mpvue集成WeValidator（小程序开发）

mpvue集成WeValidator（小程序开发）
we-validator（小程序表单验证插件）支持微信小程序、支付宝小程序以及普通web页面使用。

安装we-validateor

npm install we-validator --save

使用

1.在utils文件夹中新建一个js文件，作为自定义校验规则公共文件；

import WeValidator from 'we-validator'
WeValidator.addRule('Passport', function(value, param){
     const reg = /^1[45][0-9]{7}|([P|p|S|s]\d{7})|([S|s|G|g]\d{8})|([Gg|Tt|Ss|Ll|Qq|Dd|Aa|Ff]\d{8})|([H|h|M|m]\d{8，10})$/;
    return reg.test(value) 
})

2.在main.js中挂载，进行全局引用；

import WeValidator from './utils/weValidator'
Vue.prototype.$WeValidator = WeValidator.WeValidator

3.在需要使用的页面进行使用。

mounted(){
      this.eValidator = new this.$WeValidator({
        rules: {
          phone: {
            required: true,
            mobile:true
          },
          sms: {
            required: true
          },
          password: {
            required: true
          },
          passwordAgaine: {
            required: true,
            equalTo:'password'
          }
        },
        messages: {
          phone: {
            required: '请输入手机号码',
            mobile:'请输入正确的手机号码'
          },
          sms: {
            required: '请输入短信验证码'
          },
          password: {
            required: '请输入新密码'
          },
          passwordAgaine: {
            required: '请再次输入新密码',
            equalTo:'两次密码不同，请重新输入'
          }
        }
      })
    }

4.监听input输入内容进行实时校验（需要校验的字段都必须在data进行定义声明）；

<van-field
      placeholder="请输入手机号"
      name="phone"
      :value="form.phone"
       @blur="validate"
 />

validate(event){
          console.log(event.mp.detail)
          this.form.phone= event.mp.detail.value
          this.eValidator.checkData(this.form)
      }

we-validator更多用法，可参考https://www.npmjs.com/package/we-validator/v/1.3.1