需求：小程序，个人资料的时候需要进行校验，如下图
第一步：下载WxValidate.js
第二步：在所需要的页面的js文件中引入
import WxValidate from '../../../utils/WxValidate.js'
第三步：wxml里面写上form表单（这个插件必须是表单才可以用，提交按钮也是要在form里面的，form里面的input一定要加name属性，name属性是和js里面对应的）
<form action="" bindsubmit='formSubmit'>
<view class='inputItem'>
<view class='required'>*</view>
<view class='inputLabel'>
<view>身份证号</view>
</view>
<view class='phoneInput'>
<input value='{{form.card}}' name='idcard' placeholder-class='placeholderStyle' placeholder='请填写您子女的真实身份证号码'></input>
</view>
</view>
<button form-type='submit'>保存</button>
</form>第三步：写js啦
// pages/addChild/addChild.js
import WxValidate from '../../../utils/WxValidate.js'
Page({
/**
* 页面的初始数据
*/
data: {
form: {
name: '',
idcard: '',
schoolName: '',
className: '',
number: ''
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.initValidate()
},
//报错
showModal(error) {
wx.showModal({
content: error.msg,
showCancel: false,
})
},
//验证函数
initValidate() {
const rules = {
name: {
required: true,
minlength:2
},
idcard:{
required: true,
idcard: true
},
schoolName:{
required: true,
},
unit:{
required: true
},
number:{
digits: true
}
}
const messages = {
name: {
required: '请填写姓名',
minlength:'请输入正确的名称'
},
idcard:{
required:'请填写身份证号',
idcard:'请填写正确的身份证号'
},
schoolName:{
required:'请填写学校名称'
},
unit:{
required:'请选择年级'
},
number:{
digits:'请填写正确的学号'
}
}
this.WxValidate = new WxValidate(rules, messages)
},
//调用验证函数
formSubmit: function(e) {
console.log('form发生了submit事件，携带的数据为：', e.detail.value)
const params = e.detail.value
//校验表单
if (!this.WxValidate.checkForm(params)) {
const error = this.WxValidate.errorList[0]
this.showModal(error)
return false
}
this.showModal({
msg: '提交成功'
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
}
})
内置校验规则如下
报错信息如下
如有不足，欢迎补充
