用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使用异步校验文章来源：https://www.toymoban.com/news/detail-720231.html
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文章来源地址https://www.toymoban.com/news/detail-720231.html
onLoad(){
// #ifdef MP
this.$nextTick(() => {
this.$refs.form.setRules(this.rules);
});
// #endif
}到了这里，关于uniapp微信小程序自定义表单校验失效的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
