validateFunction 自定義校驗規(guī)則
如果需要使用 validateFunction 自定義校驗規(guī)則,則不能采用 uni-forms 的 rules 屬性來配置校驗規(guī)則,這時候需要通過ref,在onReady
生命周期調(diào)用組件的setRules方法綁定驗證規(guī)則 無法通過props傳遞變量,是因為微信小程序會過濾掉對象中的方法,導致自定義驗證規(guī)則無效。文章來源:http://www.zghlxwxcb.cn/news/detail-505122.html
<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>
//表單校驗規(guī)則
dynamicRules: {
mob: {
rules: [{
required: true,
errorMessage: '請?zhí)顚懯謾C號碼',
}, {
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: '請?zhí)顚懮矸葑C',
}, {
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中設置規(guī)則
this.$refs.form.setRules(this.dynamicRules)
},
submit() {
let _this = this
this.$refs.form.validate().then(res => {
console.log('表單數(shù)據(jù)信息:', res);
}).catch(err => {
console.log('表單錯誤信息:', err);
})
},
具體的使用規(guī)則看官方文檔,很詳細
uni-app表單校驗官方文檔文章來源地址http://www.zghlxwxcb.cn/news/detail-505122.html
到了這里,關于uniapp表單uni-forms校驗自定義校驗規(guī)則,手機校驗、身份證校驗的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!