javascript - Vuelidate 在页面渲染时验证

Question

在我们的 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');
  }
}

Answer 1

当页面呈现时，vuelidate 将运行所有表单验证。这就是 vuelidate 的工作原理。

您需要检查表单是否脏以及无效。

$v.$dirty() && $v.$invalid()

当您使用 $v.$touch() 或 $v.$reset() 时，vuelidate 会将表单标记为脏。

请阅读https://vuelidate.js.org/#sub-v-values了解这些方法的重要性。