通过该地址文档wx-extend/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: {
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中添加自己的校验规则,如图:
|
请发表评论