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()时，veelidate将表单标记为脏表单。

请阅读here，以了解这些方法的重要性。

Vuelidate验证页面渲染

1 个答案: