如何使用 Vue.js 和 Vuelidate 验证模糊字段
How to validate field on blur using Vue.js and Vuelidate
我正在使用 Bootstrap-Vue 表单输入,并使用 Vuelidate 进行验证。目前在用户输入时,我会得到轮廓颜色(红色或绿色)和一个复选框或一个叉号,具体取决于有效还是无效。我现在想更改此行为,以便它仅在模糊时显示。我在我的输入中添加了以下代码行,但是发生了相同的行为:
@blur="$v.form.code_part1.$touch()"
这是我的完整输入代码,请你解释一下我哪里出错了,或者如何正确处理这个问题?
<b-form-input
:class="{ 'hasError': $v.form.code_part2.$error }"
placeholder="Next Four"
v-model="$v.form.code_part2.$model"
@blur="$v.form.code_part1.$touch()"
:state="$v.form.code_part2.$dirty ? !$v.form.code_part2.$error : null"
class="form-control mb-3"
name="Part 2"
id="code_part2"
type="text"
maxlength="4"
aria-label="Next Four"
></b-form-input>
添加 .native
修饰符
@blur.native="$v.form.code_part1.$touch()"
我正在使用 Bootstrap-Vue 表单输入,并使用 Vuelidate 进行验证。目前在用户输入时,我会得到轮廓颜色(红色或绿色)和一个复选框或一个叉号,具体取决于有效还是无效。我现在想更改此行为,以便它仅在模糊时显示。我在我的输入中添加了以下代码行,但是发生了相同的行为:
@blur="$v.form.code_part1.$touch()"
这是我的完整输入代码,请你解释一下我哪里出错了,或者如何正确处理这个问题?
<b-form-input
:class="{ 'hasError': $v.form.code_part2.$error }"
placeholder="Next Four"
v-model="$v.form.code_part2.$model"
@blur="$v.form.code_part1.$touch()"
:state="$v.form.code_part2.$dirty ? !$v.form.code_part2.$error : null"
class="form-control mb-3"
name="Part 2"
id="code_part2"
type="text"
maxlength="4"
aria-label="Next Four"
></b-form-input>
添加 .native
修饰符
@blur.native="$v.form.code_part1.$touch()"