vuelidate 在模糊上没有按预期工作

Question

我正在使用 vuelidate 来验证我的表单。一旦用户移动到下一个输入字段或单击当前输入字段的外侧，我想验证用户输入。

  <div class="form-group col-md-6" :class="{invalid: $v.partner.email.$error}">
     <label for="EmailAddress" class="control-label">Email Address</label>
     <input class="form-control" v-model="$v.partner.email.$model" @blur.native="$v.partner.email.$touch()" :class="{'is-invalid':$v.partner.email.$error, 'is-valid':!$v.partner.email.$invalid}"/>
     <div class="invalid-feedback">
         <span v-if="!$v.partner.email.required">please enter a valid email address</span>
         <span v-if="!$v.partner.email.email">please enter a valid email address</span>
     </div>
  </div>

validations: {
  partner: {
    email: { required, email },
  }
},
methods: {
  beforeSave() {
    event.preventDefault();
    if (this.$v.$invalid) {
      alert("Error");
    } else {
      this.save();
    }
  }
}

目前，只有当用户在另一个输入字段中输入内容时才会进行验证。否则即使用户输入正确的电子邮件，它也会显示错误消息。

如果我将电子邮件更改为不正确的电子邮件，它仍然会将电子邮件显示为允许用户提交表单的有效输入。

Answer 1

首先，从输入中删除修改后的.native，然后简单地使用：

<input class="form-control" @blur="$v.partner.email.$touch()"/>

另外，在beforeSave 方法内部调用$touch() 事件，如：

beforeSave() {
  this.$v.$touch();
  if (this.$v.$invalid) {
    alert("Error");
  } else {
    this.save();
  }
}