微信小程序表单校验WxValidate.js使用

　　WxValidate插件是参考 jQuery Validate 封装的，为小程序表单提供了一套常用的验证规则，包括手机号码、电子邮件验证等等，同时提供了添加自定义校验方法，让表单验证变得更简单。

　　首先插件的下载地址和官方文档：https://github.com/skyvow/wx-extend

　　具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js

1、引入方法：将插件文件拷贝到你所需要的文件目录下

2、采用局部引用的方式将插件引入到你所需要的页面的JS文件里，具体操作如下

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

3、在wxml文件中对表单组件的数据绑定，否则无论表单组件如何填写，都无法验证规则。表单组件的绑定方法如下

    <view class="issue_item">
      <input focus name="title" value="{{title}}" placeholder='请输入问题描述' />
    </view>

　　主要的方法就是在需要验证的input框内加入value值的绑定，其他的组件同理

4、验证规则的书写。

　　在onLoad函数中加入验证规则函数，即验证规则和报错规则的代码

 onLoad: function () { // 初始化验证方法
    this.initValidate() },

  //报错 
 showModal(error) { wx.showModal({ content: error.msg, showCancel: false, }) }, //验证函数
 initValidate() { const rules = { title: { required: true, maxlength: 128 }, dbType: { required: true }, priority: { required: true }, description: { required: true } } const messages = { title: { required: '请输入问题描述', minlength: '最多只能输入128个字符' }, dbType: { required: '请选择问题类型' }, priority: { required: '请选择问题等级' }, description: { required: '请输入问题详情' } } this.WxValidate = new WxValidate(rules, messages) },

5、调用校验规则

 submitIssue (e){ let issueInfo = e.detail.value //校验表单
    if (!this.WxValidate.checkForm(issueInfo)) { const error = this.WxValidate.errorList[0] this.showModal(error) return false } wx.showLoading({ title: '玩命加载中', mask: true })