代码之家 › 专栏 › 技术社区 › Djave

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

vue.js

0

Djave · 技术社区 · 10 年前

我第一次使用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>

目前唯一的问题是,当我用表单登录页面时,整个页面都会出现错误。有没有一种方法可以抑制错误并只在输入模糊/表单提交时显示它们?

3 回复 | 直到 10 年前

1

0

Djave 10 年前

啊,谷歌能用的词不是关于 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">

2

0

Prosa Rosa 9 年前

您需要在验证中添加.distry或.touch

    <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>

3

0

pevac 5 年前

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

所以我补充道 必修的 当onblur事件发生时。

<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);
        }
    }
});