Блог

Я следил за хорошим руководством по проверке формы HTML 5 с помощью Vue.js , и я слишком много раз пытался добавить сообщение об ошибке рядом с неудачным вводом, но у меня не получилось. это учебное пособие: 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");
    }
  }
};
 

я хотел бы показать сообщение об ошибке в интервале рядом с каждым полем ввода

Свойство errors объекта mixin содержит сопоставление элемента 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>
 

ДЕМОНСТРАЦИЯ