gpt4 book ai didi

javascript - Vuelidate 在页面渲染时验证

转载 作者:行者123 更新时间:2023-12-02 22:03:33 26 4
gpt4 key购买 nike

在我们的 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了解这些方法的重要性。

关于javascript - Vuelidate 在页面渲染时验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59793587/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com