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:
},
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[]
this.showModal(error)
return false
}
wx.showLoading({
title: '玩命加载中',
mask: true
})