0

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

1 回答 1

1

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

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

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

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

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

于 2020-01-28T12:50:47.553 回答