微信小程序表单验证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 checkbox 全选/反选及批量删除
Apr 28 Javascript
浅说js变量
May 25 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
微信小程序Echarts覆盖正常组件问题解决
Jul 13 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 已经成熟
2006/12/04 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
php构造函数的继承方法
2015/02/09 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
js实现抽奖效果
2017/03/27 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
Python 数据结构之旋转链表
2017/02/25 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
Python hashlib模块的使用示例
2020/10/09 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
你的自行车健身专家:FaFit24
2016/11/16 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
final, finally, finalize的区别
2012/03/01 面试题
培训演讲稿范文
2014/01/12 职场文书
企业内部培训方案
2014/02/04 职场文书
社区文化建设方案
2014/05/02 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书