validateFunction custom validation rules
If you need to use validateFunction custom validation rules, you cannot use the rules attribute of uni-forms to configure the validation rules. At this time, you need to use ref to onReadycall the setRules method of the component in the life cycle to bind the validation rules. Passing variables through props is because the WeChat applet will filter out the methods in the object, resulting in invalid custom validation rules.
<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);
})
},
For specific rules of use, see the official document, which is very detailed
in the official document of uni-app form verification