Поскольку vue-validator https://github.com/vuejs/vue-validator готовится к Vuejs 2, каков наилучший способ реализации проверки правильности?Vuejs 2 + подтверждение формы
UPDATE Я нашел этот удивительный плагин Vee Validate
Поскольку vue-validator https://github.com/vuejs/vue-validator готовится к Vuejs 2, каков наилучший способ реализации проверки правильности?Vuejs 2 + подтверждение формы
UPDATE Я нашел этот удивительный плагин Vee Validate
На самом деле я нашел этот устрашающий Plugin Vee Validate
В настоящее время существует не так много вариантов. Взгляните на vue-awesome, где вы найдете самые актуальные библиотеки. На данный момент есть 2.
Если вы используете semantic-ui или его вариант для вас, у них есть потрясающий плагин проверки формы.
Я использовал его с Vuejs и он прекрасно работает.
Поскольку все это в конечном счете 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(...)
Я нашел этот валидатор простым, гибким и хорошо документированным. Он охватывает большинство сценариев проверки форм в Vue Js.
Я использовал Jquery validator плагин в прошлом. По сравнению с этим, этот простой-vue-validator действительно выделяется своей гибкостью и способностью проверять как жестко закодированные, так и динамически сгенерированные формы.
https://github.com/semisleep/simple-vue-validator
я использовал его широко для моего проекта SaaS и до сих пор он пошел на очень хорошо.
Я Пытался vue-form и нашел его очень Userful