uni-app uni-forms组件在开发者工具和真机上校验失效

uni-app uni-forms组件在开发者工具和真机上校验失效

产品分类

uniapp/小程序/字节跳动

示例代码：

<template>  
    <view :class="classes.root">  
        <uni-forms ref="formRef" :modelValue="formData" :rules="formRules" validateTrigger="blur">  
            <uni-forms-item name="mobile">  
                <uni-easyinput v-model="formData.mobile" type="number" placeholder="请输入手机号" maxlength="11" />  
            </uni-forms-item>  
            <uni-forms-item name="sms_vcode">  
                <uni-easyinput v-model="formData.sms_vcode" type="number" placeholder="请输入验证码" maxlength="6">  
                    <template #right>  
                        <view :class="classes.vcode" @click="sendVcode">{{ vcodeText }}</view>  
                    </template>  
                </uni-easyinput>  
            </uni-forms-item>  
        </uni-forms>  
        <view :class="classes.footer">  
            <button :class="classes.button" @click="doSubmit">立即登录</button>  
        </view>  
    </view>  
</template>  

<script setup>  
import { createNamespace } from '@/utils/create.js';  
import { setStorageSync, getStorageSync } from '@/utils/storage.js';  
import { goBack } from '@/composables/useLoginJump.js';  
import uploadData from '@/composables/useUploadInfo.js';  
import { sendSms, smsLogin } from '@/apis/login';  
import { loginCodeSubmitLog } from '@/datareport/loginLog.js';  

const { bem } = createNamespace('child-login-form');  
const classes = reactive({  
    root: computed(() => [bem()]),  
    vcode: computed(() => [bem('vcode', { disabled: isCountDown.value })]),  
    footer: computed(() => [bem('footer')]),  
    button: computed(() => [bem('button')])  
});  

const formData = reactive({  
    mobile: null,  
    sms_vcode: null  
});  

const formRules = reactive({  
    mobile: {  
        rules: [  
            {  
                required: true,  
                errorMessage: '请输入手机号'  
            },  
            {  
                validateFunction: function (rule, value, data, callback) {  
                    if (0 < value.length && value.length < 11) {  
                        callback('请输入正确的手机号');  
                    }  
                    return true;  
                }  
            }  
        ]  
    },  
    sms_vcode: {  
        rules: [  
            {  
                required: true,  
                errorMessage: '请输入验证码'  
            },  
            {  
                validateFunction: function (rule, value, data, callback) {  
                    if (0 < value.length && value.length < 6) {  
                        callback('请输入正确的验证码');  
                    }  
                    return true;  
                }  
            }  
        ]  
    }  
});  

const isCountDown = ref(false);  
const counter = ref(59);  
const btnText = ref('');  
const timer = ref(null);  
const startTimer = () => {  
    let _counter = counter.value;  
    let _timer;  
    isCountDown.value = true;  
    btnText.value = _counter;  
    _timer = setInterval(() => {  
        _counter--;  
        btnText.value = _counter;  
        if (_counter == 0) {  
            isCountDown.value = false;  
            clearInterval(_timer);  
        }  
    }, 1000);  
    timer.value = _timer;  
};  
const vcodeText = computed(() => {  
    return isCountDown.value ? `${btnText.value}s` : '获取验证码';  
});  

const sendVcode = () => {  
    // 倒计时中不能点击  
    if (isCountDown.value) return;  

    // 校验手机号  
    formRef.value  
        .validateField(['mobile'])  
        .then((res) => {  
            let data = {  
                mobile: formData.mobile  
            };  
            console.log('===获取验证码校验结果===', res);  
            // sendSms(data)  
            //  .then((res) => {  
            //      // 发送短信验证码，开始倒计时  
            //      startTimer();  
            //  })  
            //  .catch((err) => {});  
        })  
        .catch((err) => {});  
};  

const formRef = ref('formRef');  
const doSubmit = () => {  
    formRef.value  
        .validate()  
        .then((res) => {  
            // 登录  
            let extraData = JSON.parse(getStorageSync('allParams'));  
            let data = {  
                ...formData,  
                ...extraData  
            };  
            smsLogin(data)  
                .then((res) => {  
                    // 返回上上页  
                    res = res.data;  
                    loginCodeSubmitLog();  
                    uploadData(() => {  
                        setStorageSync('isLogin', true);  
                        setStorageSync('customer', res.customer);  
                        setStorageSync('openid', res.openid);  
                        setStorageSync('uid', res.uid);  
                        goBack(2);  
                    });  
                })  
                .catch((err) => {});  
        })  
        .catch((err) => {  
            console.log('err', err);  
        });  
};  
</script>

操作步骤：

不填写手机号，直接点击获取验证码

预期结果：

校验不通过，不能发送短信

实际结果：

校验通过，触发了发短信接口

bug描述：

表单校验失效，不填写内容时，开发者工具、真机，返回校验通过。
uni-forms版本：1.4.13

开发环境信息