微信小程序表单验证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 相关文章推荐
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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自动跳转中英文页面
2008/07/29 PHP
php 删除数组元素
2009/01/16 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
基于vue 实现token验证的实例代码
2017/12/14 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
举例讲解Python中装饰器的用法
2015/04/27 Python
python基于socket实现网络广播的方法
2015/04/29 Python
python实现黑客字幕雨效果
2018/06/21 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
python语言元素知识点详解
2019/05/15 Python
python issubclass 和 isinstance函数
2019/07/25 Python
Python实现TCP通信的示例代码
2019/09/09 Python
PyTorch中permute的用法详解
2019/12/30 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
党员倡议书
2015/01/19 职场文书
转学证明范本
2015/06/19 职场文书
朋友离别感言
2015/08/04 职场文书
如何写好开幕词?
2019/06/24 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
浅谈pytorch中的dropout的概率p
2021/05/27 Python
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android