微信小程序表单验证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 相关文章推荐
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
JS作用域深度解析
Dec 29 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
vue2.0安装style/css loader的方法
Mar 14 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
第三节 定义一个类 [3]
2006/10/09 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
utf8的编码算法 转载
2006/12/27 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
document.write的几点使用心得
2014/05/14 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
AJax面试题
2014/11/25 面试题
《庐山的云雾》教学反思
2014/04/22 职场文书
小学生环保标语
2014/06/13 职场文书
学校与家长安全责任书
2014/07/23 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
《海上日出》教学反思
2016/02/23 职场文书