微信小程序表单验证错误提示效果


Posted in Javascript onMay 19, 2017

微信小程序表单验证,点击确认发布不能为空错误提示,具体内容如下

以下是效果图:

微信小程序表单验证错误提示效果

代码如下:

WXML:

<view class="ad_popError" wx:if="{{popErrorMsg}}">{{popErrorMsg}}</view> 
<view class="ad_popFt"> 
<form bindsubmit="goDetail" > 
  <textarea class="ad_popArea" bindinput="commentTxtFn" focus="{{isPopOpen}}" placeholder="请输入留言内容" placeholder-style="color:#cccccc;" name="textarea" /> 
 <view class="ad_popCout"> 
 <text class="one_star">你还可以输入</text> 
 <text class="one_stars {{!!tips?'danger':''}}">{{commentTxtCount}}</text> 
 <text class="one_star">字</text> 
 </view> 
 <button class="informBtn" form-type="submit">确认发布</button> 
</form> 
</view>

WXSS:

page{background: #f4f4f4;} 
.ad_popHd{height: 76rpx; line-height: 76rpx; font-size: 32rpx;text-align: center; border-bottom: 1px solid #cdd1cd; padding: 0 20rpx;color: #202120;} 
.ad_popFt{ margin: 20rpx ; margin-top: 50rpx;} 
.ad_popArea{ width: 708rpx; height:400rpx;font-size:30rpx;padding: 20rpx; box-sizing: border-box; -webkit-box-sizing: border-box; line-height: 40rpx; color: #333; background: #fff; } 
.ad_popCout{ color: #969899; font-size: 24rpx; text-align: right; line-height: 58rpx; padding: 0 20rpx;} 
.informBtn{background: #09bb07;color: #fff;font-size: 34rpx; margin-top: 38rpx;height: 88rpx;} 
.one_stars{color: #999;} 
.one_star{font-size: 20rpx;color: #999;} 
.danger{ color: #f64400;} 
.ad_popError{ background: #de352d; color: #fff; height: 58rpx; line-height: 58rpx; font-size: 24rpx; text-align: center; position: absolute; left: 0; top: 0; width: 100%; z-index:3;}

JS:

// pages/informLeaveMsg/informLeaveMsg.js 
Page({ 
 
 /** 
 * 页面的初始数据 
 */ 
 data: { 
  
 }, 
 //确认发布 
 goDetail:function(e){ 
 setTimeout(()=>{ 
  var subValue = e.detail.value.textarea 
  console.log(subValue) 
  if (subValue == null || subValue == "") { 
  console.log("不能为空") 
  this.setData( 
   { popErrorMsg: "发布的留言内容不能为空" } 
  ); 
  this.ohShitfadeOut(); 
  return;  
  } 
  
 },100) 
  
 }, 
 
 ohShitfadeOut() { 
 var fadeOutTimeout = setTimeout(() => { 
  this.setData({ popErrorMsg: '' }); 
  clearTimeout(fadeOutTimeout); 
 }, 3000); 
 }, 
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门学习书籍推荐
Jun 12 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
原生JS实现pc端轮播图效果
Dec 21 Javascript
微信小程序实现滑动删除效果
May 19 #Javascript
微信小程序图片横向左右滑动案例
May 19 #Javascript
layui导航栏实现代码
May 19 #Javascript
详解AngularJS controller调用factory
May 19 #Javascript
layer弹窗插件操作方法详解
May 19 #Javascript
layui选项卡效果实现代码
May 19 #Javascript
bootstrap table单元格新增行并编辑
May 19 #Javascript
You might like
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
JavaScript模板入门介绍
2012/09/26 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
用Python编程实现语音控制电脑
2014/04/01 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
铁路个人事迹材料
2014/01/30 职场文书
亲子读书活动方案
2014/02/22 职场文书
航空学院求职信
2014/06/11 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
2015年保送生自荐信
2015/03/24 职场文书
舞出我人生观后感
2015/06/16 职场文书
公司食堂管理制度
2015/08/05 职场文书
Oracle中日期的使用方法实例
2022/07/07 Oracle