如何使用 HTML 5 验证和 Vue 添加错误消息

问题描述

我遵循了一个关于使用 Vue.js 进行 HTML 5 表单验证的不错教程，我尝试了太多次在失败的输入旁边添加消息错误，但我做不到。 这是教程：https://logaretm.com/blog/2019-05-03-html-aided-vuejs-form-validation/

这是我的代码：

function updateMessage(el,vm) {
  vm.errors = Object.assign({},vm.errors,{
    [el.name]: el.validationMessage
  });
}

export const ValidateMixin = {
  data: () => ({
    errors: {}
  }),computed: {
    hasErrors() {
      // Check if we have errors.
      return Object.keys(this.errors).some(key => {
        console.log(this.errors)
        return !!this.errors[key];
      });
    }
  },directives: {
    validate: {
      bind(el,_,vnode) {
        const vm = vnode.context;
        el.addEventListener("input",e => {
          updateMessage(e.target,vm);
        });
        vnode.context.$on("validate",() => {
          updateMessage(el,vm);
        });
      }
    }
  },methods: {
    validate() {
      this.$emit("validate");
    }
  }
};

我想在每个输入字段旁边的范围内显示错误消息

解决方法

mixin 的 errors 对象属性包含元素 name 到该元素的验证错误消息的映射。例如，在 <input name="myEmail" type="email" v-validate> 的输入中输入无效的电子邮件地址将在 errors.myEmail 中创建验证消息。

您可以使用模板中的 errors 对象将元素的错误消息绑定到相应 span 旁边的 input：

<input name="myEmail" type="email" v-validate>
<span v-if="errors.myEmail">{{ errors.myEmail }}</span>

demo