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


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 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
js实现图片轮播效果
Dec 19 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
js实现无缝轮播图
Mar 09 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
php实现可逆加密的方法
2015/08/11 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
python检索特定内容的文本文件实例
2018/06/05 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
python搜索算法原理及实例讲解
2020/11/18 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
教师旷工检讨书
2014/01/18 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
中学生演讲稿
2014/04/26 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang