Question

我第一次使用Vue，Vue Validator。以下是我的代码示例：

WizardDialog

目前唯一的问题是，当我使用我的表单登陆页面时，整个事情都被错误所覆盖。有没有办法可以抑制错误并只在输入模糊/表单提交时显示它们？

Answer 1

Argh，Google支持的词不是关于blur，关于submit - 关于timing和initial：

http://vuejs.github.io/vue-validator/en/timing.html

<input id="first_name" initial="off" placeholder="e.g. Christopher" class="" v-validate:first_name="[&#039;required&#039;]" v-model="first_name" name="first_name" type="text">

Answer 2

您需要在验证中添加.dirty或.touched

    <label for="first_name">First name:
    <span  v-if="$validation1.first_name.required && $validation1.first_name.touched" class="invalid">Enter your first name.</span>                            
    <input id="first_name" placeholder="e.g. Christopher" class="" v-validate:first_name="[&#039;required&#039;]" v-model="first_name" name="first_name" type="text">
</label>

Answer 3

我正在处理类似的问题。我必须为输入 name: "" 设置一个初始化变量，但我还希望在元素中有一个 required 属性。

所以我在 onblur 事件发生时添加 required。

<input name="name" type="number" v-model="name" @blur="addRequired" />

const app = Vue.createApp({
    data() {
        return {
            name: ""
        }
    },
    methods:{
        addRequired: function(event){
            event.target.setAttribute("required", true);
        }
    }
});

Vue验证器仅在更改/模糊/提交后

3 个答案: