uniapp微信小程序自定义表单校验失效

用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
}

猜你喜欢

转载自blog.csdn.net/starstarstarl/article/details/129157273