Vuelidate 在页面呈现时验证
Vuelidate validates on page render
在我们的 Vue 应用程序中,我们使用 Vuelidate 进行表单验证。存在这种行为,其中字段在页面呈现时被验证,当它只应在表单提交中验证时,如在提交处理中使用 $v.invalid 和 $v.touch() 的文档中所述。奇怪的是,在某些实现它的页面中,它运行良好。但有时,在其他页面中,它会以我不想要的方式进行验证,但我看不出在哪里可以解决这个问题。有人经历过这个吗?一些代码片段。
<input
id="name"
type="text"
name="name"
v-model="form.name"
:class="{
invalid:
!$v.form.name.required || !$v.form.name.minLength,
}"
/>
我的数据对象和验证
data: {
form: {
name: '',
birth: '',
parentage: '',
}
},
validations: {
form: {
name: { required, minLength: minLength(4) },
}
投稿方式
async submit() {
this.$v.touch();
if (!this.$v.$invalid) {
console.log('Submit');
}
}
当页面呈现时,vuelidate 将 运行 所有表单验证。这就是 vuelidate 的工作原理。
您需要检查表单是否脏了以及它是否无效。
$v.$dirty() && $v.$invalid()
当您使用 $v.$touch()
或 $v.$reset()
时,vuelidate 将表单标记为脏。
请阅读https://vuelidate.js.org/#sub-v-values以了解这些方法的重要性。
在我们的 Vue 应用程序中,我们使用 Vuelidate 进行表单验证。存在这种行为,其中字段在页面呈现时被验证,当它只应在表单提交中验证时,如在提交处理中使用 $v.invalid 和 $v.touch() 的文档中所述。奇怪的是,在某些实现它的页面中,它运行良好。但有时,在其他页面中,它会以我不想要的方式进行验证,但我看不出在哪里可以解决这个问题。有人经历过这个吗?一些代码片段。
<input
id="name"
type="text"
name="name"
v-model="form.name"
:class="{
invalid:
!$v.form.name.required || !$v.form.name.minLength,
}"
/>
我的数据对象和验证
data: {
form: {
name: '',
birth: '',
parentage: '',
}
},
validations: {
form: {
name: { required, minLength: minLength(4) },
}
投稿方式
async submit() {
this.$v.touch();
if (!this.$v.$invalid) {
console.log('Submit');
}
}
当页面呈现时,vuelidate 将 运行 所有表单验证。这就是 vuelidate 的工作原理。
您需要检查表单是否脏了以及它是否无效。
$v.$dirty() && $v.$invalid()
当您使用 $v.$touch()
或 $v.$reset()
时,vuelidate 将表单标记为脏。
请阅读https://vuelidate.js.org/#sub-v-values以了解这些方法的重要性。