用uniapp的uni-forms写微信小程序,发现自定义校验方法在小程序端失效,解决方法如下
html
<uni-forms ref="form" :modelValue="info" :label-width="100" >
<uni-forms-item label="联系电话" required name="lxdh">
<uni-easyinput v-model="info.lxdh" placeholder="请输入联系电话"/>
</uni-forms-item>
js
rules的validateFunction使用异步校验
data() {
//电话校验
let phone = /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/;
return {
info: {
lxdh:'',
},
rules: {
lxdh: {
rules: [{
required: true,
errorMessage: '请输入联系电话'
}, {
validateFunction: (rule, value, data, callback) => {
// 异步需要返回 Promise 对象
return new Promise((resolve, reject) => {
setTimeout(() => {
if (!phone.test(value) && value !== '') {
reject(new Error('请输入正确电话号码'))
} else {
resolve()
}
}, 100)
})
}
}]
},
}
}
onLoad方法中手动设置rules
onLoad(){
// #ifdef MP
this.$nextTick(() => {
this.$refs.form.setRules(this.rules);
});
// #endif
}