Проверка Vuejs 2 +

Ответ 1

На самом деле я нашел этот удивительный плагин Vee Validate

Ответ 2

В настоящее время выбора не так много. Посмотрите vue-awesome, где вы можете найти наиболее актуальные библиотеки. На данный момент есть 2.

Ответ 3

Если вы используете semantic-ui или его вариант для вас, у них есть потрясающий плагин проверки формы.

semantic-ui-form-validation

Я использовал его с Vuejs, и он отлично работает.

Ответ 4

Поскольку все это в конечном счете Javascript, вы также можете использовать некоторые из существующих библиотек проверки Javascript, таких как Parsely.js или Validate.js, чтобы связать это. Одно замечательно, что библиотека Validate.js заключается в том, что ее формат может быть легко сохранен в глобальном хранилище, если вы используете Vuex:

var constraints = {
  creditCardNumber: {
    presence: true,
    format: {
      pattern: /^(34|37|4|5[1-5]).*$/,
      message: function(value, attribute, validatorOptions, attributes, globalOptions) {
        return validate.format("^%{num} is not a valid credit card number", {
          num: value
        });
      }
    },
    length: function(value, attributes, attributeName, options, constraints) {
      if (value) {
        // Amex
        if ((/^(34|37).*$/).test(value)) return {is: 15};
        // Visa, Mastercard
        if ((/^(4|5[1-5]).*$/).test(value)) return {is: 16};
      }
      // Unknown card, don't validate length
      return false;
    }
  },
  creditCardZip: function(value, attributes, attributeName, options, constraints) {
    if (!(/^(34|37).*$/).test(attributes.creditCardNumber)) return null;
    return {
      presence: {message: "is required when using AMEX"},
      length: {is: 5}
    };
  }
};

Затем используется как таковое:

validate({creditCardNumber: "4"}, constraints);
// => {"creditCardNumber": ["Credit card number is the wrong length (should be 16 characters)"]}

validate({creditCardNumber: "9999999999999999"}, constraints);
// => {"creditCardNumber": ["9999999999999999 is not a valid credit card number"]}

validate({creditCardNumber: "4242424242424242"}, constraints);
// => undefined

validate({creditCardNumber: "340000000000000"}, constraints);
// => {"creditCardZip": ["Credit card zip is required when using AMEX"]}

Вы также можете подключить эти функции validate() к вашему компоненту с чем-то рядом с @blur=validate(...)

Ответ 5

Я нашел этот валидатор простым, гибким и хорошо документированным. Он охватывает большинство сценариев проверки форм в Vue Js.

В прошлом я использовал плагин проверки JQuery. По сравнению с этим, этот простой-vue-validator действительно выделяется своей гибкостью и способностью проверять как жестко закодированные, так и динамически сгенерированные формы.

https://github.com/semisleep/simple-vue-validator

Я использовал его для моего проекта SaaS, и до сих пор он прошел очень хорошо.

Ответ 6

Я пробовал vue-form и нашел его очень удобным