Vuetify 3 v-form未通过验证仍提交问题求助

问题场景 #

使用Vuetify 3的v-form组件时，表单字段验证不通过仍会执行提交逻辑。已尝试两种方案：按官方文档配置验证规则、给v-form设置ref并在提交方法中调用validate()，均仅能触发字段错误提示（红边框+提示文本），但无法阻断提交流程。

模板代码

<v-form @submit.prevent="submit">
    <v-row>
        <v-col cols="12" md="6">
            <v-text-field v-model="name" :label="$t('register.name')" :rules="[required]"></v-text-field>
        </v-col>
        <v-col cols="12" md="6">
            <v-text-field v-model="email" :label="$t('register.email')" :rules="[required, validMail]" required></v-text-field>
        </v-col>
    </v-row>

    <v-btn @click="register()">Submit</v-btn>
</v-form>

脚本代码

required: function (value) {
    if (value) {
        return true;
    } else {
        return 'required field';
    }
},
validMail: function () {
    if (/long regex/.test(this.email)) {
        return true;
    } else {
        return 'invalid mail';
    }
},
register() {
    if(this.password != this.repeatpassword) {
        alert("bad");
        return
    }
    try {
        axios.post() // sending data to server
    } catch (e) {
        console.log(e)
    }
}

解决思路 #

1. 修正按钮触发逻辑

当前按钮用@click直接调用register()，绕开了表单的原生验证流程。正确做法是让按钮触发表单的submit事件：

• 给按钮添加type="submit"属性；
• 将提交逻辑移至表单的submit事件处理函数中。

修改后模板：

<v-form ref="form" @submit.prevent="handleSubmit">
    <!-- 原有表单字段保持不变 -->
    <v-btn type="submit">Submit</v-btn>
</v-form>

对应脚本：

// 验证规则保留
handleSubmit() {
    // 先执行表单全局验证
    this.$refs.form.validate().then(isValid => {
        if (!isValid) return; // 验证不通过直接阻断
        
        // 密码二次校验
        if(this.password !== this.repeatpassword) {
            alert("bad");
            return;
        }
        
        // 发起提交请求
        try {
            axios.post('/your-api-url', { name: this.name, email: this.email }) // 补充请求地址和参数
        } catch (e) {
            console.log(e)
        }
    })
}

2. 修复邮箱验证规则写法

当前validMail未接收字段值参数，直接取this.email不符合Vuetify验证规则规范，可能导致验证异常。修正为：

validMail: function (value) {
    if (!value) return '请输入邮箱'; // 可结合required规则调整提示
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 替换为你的邮箱正则
    return emailRegex.test(value) || '邮箱格式不正确';
},

3. 确保ref绑定正确

确认v-form的ref="form"已正确添加，且组件挂载后能通过this.$refs.form获取到表单实例（避免在组件未挂载时调用validate()）。

4. 异步验证处理（若有）

如果验证规则包含异步逻辑（比如远程校验），需让规则函数返回Promise，Vuetify会等待异步验证完成后再判断表单有效性。

内容的提问来源于stack exchange，提问作者miso1655