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
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值