validateFunction 自定义校验规则
如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则,这时候需要通过ref,在onReady
生命周期调用组件的setRules方法绑定验证规则 无法通过props传递变量,是因为微信小程序会过滤掉对象中的方法,导致自定义验证规则无效。
<uni-forms ref="form">
<uni-forms-item required label="手机号" name="mob">
<uni-easyinput v-model="mob" placeholder="手机号" />
</uni-forms-item>
<uni-forms-item required label="身份证" name="id_num">
<uni-easyinput v-model="DataAll.id_num" placeholder="身份证" />
</uni-forms-item>
</uni-forms>
//表单校验规则
dynamicRules: {
mob: {
rules: [{
required: true,
errorMessage: '请填写手机号码',
}, {
validateFunction: function(rule, value, data, callback) {
let iphoneReg = (
/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{
8}$/
); //手机号码
if (!iphoneReg.test(value)) {
callback('手机号码格式不正确,请重新填写')
}
}
}]
},
id_num: {
rules: [{
required: true,
errorMessage: '请填写身份证',
}, {
validateFunction: function(rule, value, data, callback) {
let iphoneReg = (
/^[1-9]\d{
5}(18|19|([23]\d))\d{
2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{
3}[0-9Xx]$/
); //
if (!iphoneReg.test(value)) {
callback('身份证格式不正确,请重新填写')
}
}
}, ]
},
},
onReady() {
// 需要在onReady中设置规则
this.$refs.form.setRules(this.dynamicRules)
},
submit() {
let _this = this
this.$refs.form.validate().then(res => {
console.log('表单数据信息:', res);
}).catch(err => {
console.log('表单错误信息:', err);
})
},
具体的使用规则看官方文档,很详细
uni-app表单校验官方文档