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


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实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
js实现有趣的倒计时效果
Jan 19 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
php+javascript的日历控件
2009/11/19 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
php 基础函数
2017/02/10 PHP
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python的mysqldb安装步骤详解
2017/08/14 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
水产养殖学应届生求职信
2013/09/29 职场文书
弄虚作假心得体会
2014/09/10 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle