审核模糊时无法正常工作

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