微信小程序表单验证插件WxValidate

一.下载地址:WxValidate插件地址

通过该地址文档wx-extend/blob/master/src/assets/plugins/wx-validate/WxValidate.js拷贝WxValidate.js到小程序的utils文件中,如图;

二.使用:

1.引入该插件;

import WxValidate from '../../utils/WxValidate.js';

 2.在onLoad钩子函数中初始化校验规则

    const rules = {
      insured: {
        required: true
      },
      idCard: {           //form对象中的属性
        required: true,   //是否校验空值
        idcard: true      //匹配校验规则，前提是这个规则是存在的
      },
      date: {
        required: true,
        date: true
      }
    }
//解释一下,idCard是我定义的属性,而idcard是这个插件自带的校验规则
//只有一项required:true表示就是未输入,上面的rules要和下面的messages对应
    const messages = {
      insured: {
        required: '请填写被保险人姓名'
      },
      idCard: {
        required: "请填写身份证",
        idcard: "身份证号不正确"
      },
      date: {
        required: '请选择日期',
        date: '请选择日期'
      }
    }

//实例化一个校验对象;
    this.WxValidate = new WxValidate(rules, messages)

3.校验前,将所有需要校验的属性都通过一个form对象传递给提交按钮中,然后从事件函数e中获取!

4.在事件中开启校验

  goNext(e){
    //校验
    const params = e.target.dataset.form;
    if (!this.WxValidate.checkForm(params)) {
      const error = this.WxValidate.errorList[0];
      wx.showModal({
          title: '',
          content: error.msg,
          showCancel:false;
          success(res) {
          if (res.confirm) {
            console.log("点击确定")
          }
      })
      return false
    }
}

 三.添加自己的校验规则,插件提供了addMethod方法,但是我并没有这样来使用;

可以直接在WxValidate.js中添加自己的校验规则,如图: