Vuelidate 在页面渲染上验证答案

【问题标题】：Vuelidate validates on page renderVuelidate 在页面渲染上验证
【发布时间】：2020-01-17 19:15:25
【问题描述】：

在我们的 Vue 应用程序中，我们使用 Vuelidate 进行表单验证。存在这种行为，即在页面呈现时验证字段，而应仅在表单提交中对其进行验证，如在提交处理中使用 $v.invalid 和 $v.touch() 的文档中所述。奇怪的是，在某些实现它的页面中，它运行良好。但有时，在其他页面中，它会以我不想要的方式验证，但我看不出在哪里可以解决这个问题。有人经历过吗？一些代码sn-ps。

 <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');
  }
}

【问题讨论】：

标签： javascript vue.js frontend vuelidate

【解决方案1】：

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

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

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

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

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

【讨论】：