微信小程序表单验证WxValidate的使用


Posted in Javascript onNovember 27, 2019

效果图GIF

微信小程序表单验证WxValidate的使用

git地址:WxValidate

使用

import WxValidate from '../../utils/WxValidate';
Page({
  data: {
    basicInfo: {
      tel: '',
      post: '',
      weChat: '',
      specialPlane: '',
      email: '',
      intro: ''
    }
  },
  onLoad() {
    this.initValidate();
  },
  initValidate() {
    const rules = {
      tel: {
        required: true,
        tel: true,
      }, post: {
        required: true,
      }, weChat: {
        required: true,
      }, specialPlane: {
        required: true,
      }, email: {
        required: true,
        email: true
      }
    };
    const messages = {
      tel: {
        required: '请输入手机号',
        tel: '请输入正确格式手机号',
      }, post: {
        required: '请输入职位',
      }, weChat: {
        required: '请输入微信号',
      }, specialPlane: {
        required: '请输入座机号',
      }, email: {
        required: '请输入电子邮箱',
        email: '请输入正确格式电子邮箱',
      }
    };
    this.WxValidate = new WxValidate(rules, messages)
  },
  formChange(val) {
    let obj = {}
    obj[`basicInfo.${val.currentTarget.dataset.val}`]= val.detail.value
    this.setData(obj)
  },
  submitForm(e) {
    const params = e.detail.value
    if (!this.WxValidate.checkForm(params)) {
      const error = this.WxValidate.errorList[0]
      this.showModal(error)
      return false
    }
  },
  showModal(error) {
    wx.showToast({
      title: error.msg,
      icon: 'none',
      duration: 2000
     })
  },
})

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

Javascript 相关文章推荐
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
npm qs模块使用详解
Feb 07 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 #Javascript
微信小程序加载机制及运行机制图解
Nov 27 #Javascript
webgl实现物体描边效果的方法介绍
Nov 27 #Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 #Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 #Javascript
vue实现浏览器全屏展示功能
Nov 27 #Javascript
js中apply和call的理解与使用方法
Nov 27 #Javascript
You might like
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
js实现盒子移动动画效果
2020/08/09 Javascript
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
python正则表达式之作业计算器
2016/03/18 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
python获取linux系统信息的三种方法
2020/10/14 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
C语言50道问题
2014/10/23 面试题
纠风工作实施方案
2014/03/15 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript