Vue Validator 仅在更改/模糊/提交之后

Question

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

<label for="first_name">First name:
    <span  v-if="$validation1.first_name.required" 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 1

啊，Google-able 这个词不是关于 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 Validator 仅在更改/模糊/提交之后

Vue Validator only after change / blur / submit

vue.js