如何在字段有效后隐藏 el-form-item__error？

Question

vue 3.2.31

vee-验证4.5.10

元素加2.1.6

在输入事件时，它会正确显示验证错误消息。但是在模糊事件中，它显示 is required 错误消息。同样在模糊事件中，即使验证成功，它也会显示 is required 错误消息。但是当表单有效时，meta.valid 为真，反之亦然。

当时控制台如下：

我的代码：

<VeeForm v-slot="{ isSubmitting, meta }" @submit="submitForm" ref="loginFormObserver" as="div">    
        <el-form :model="loginForm" ref="loginForm" name="loginForm" size="small" label-position="left" label-width="30%">    
            <VeeField :rules="'required|email'" name="Username" v-slot="{ field, errorMessage }">    
                <el-form-item :error="errorMessage" label="Username" required>    
                    <el-input v-model="loginForm.username" type="email" clearable status-icon v-bind="field">
                    </el-input>    
                </el-form-item>    
            </VeeField>    
            <el-form-item class="text-center">    
                <el-button class="login-btn" native-type="submit" type="primary" :disabled="!meta.valid || isSubmitting">{{ trans('common.login') }} </el-button>    
            </el-form-item>    
        </el-form>    
    </VeeForm>

如果我从el-form-item 中避免required 属性，它将正常工作。但它会删除必填字段标签旁边的红色星号（星号）。

Answer 1

这可能是 element-plus 验证造成的混乱。您可以禁用他们的验证：:validate-event="false"。哪个应该给你星号并从 element-plus.

中删除验证行为

<el-input v-model="loginForm.username" type="email" clearable status-icon v-bind="field" :validate-event="false"></el-input>

如何在字段有效后隐藏 el-form-item__error？

How to hide el-form-item__error after field valid?

vue.js

vee-validate

vuejs3

element-plus