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


Posted in Javascript onJune 19, 2020

本文实例为大家分享了微信小程序表单验证提交错误提示的具体代码,供大家参考,具体内容如下

表单验证,点击确认发布不能为空错误提示。

以下是效果图:

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

代码如下:

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)
 
 },
//定时器提示框3秒消失
 ohShitfadeOut() {
 var fadeOutTimeout = setTimeout(() => {
  this.setData({ popErrorMsg: '' });
  clearTimeout(fadeOutTimeout);
 }, 3000);
 },
 
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
Jquery api 速查表分享
Jan 12 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
理解javascript异步编程
Jan 27 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
vue项目中极验验证的使用代码示例
Dec 03 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
js中split()方法得到的数组长度问题
Jul 19 #Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 #Javascript
微信小程序表单弹窗实例
Jul 19 #Javascript
vue用递归组件写树形控件的实例代码
Jul 19 #Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 #Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 #Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 #Javascript
You might like
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
php 删除cookie和浏览器重定向
2009/03/16 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
苹果Mac升级:MacSales.com
2017/11/20 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
恐龙的灭绝教学反思
2014/02/12 职场文书
2014年情人节活动方案
2014/02/16 职场文书
四年级学生评语大全
2014/04/21 职场文书
机械机修工岗位职责
2014/08/03 职场文书
拆迁委托协议书
2014/09/15 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
Python读取和写入Excel数据
2022/04/20 Python