Vuejs 2 + подтверждение формы

Question

Поскольку vue-validator https://github.com/vuejs/vue-validator готовится к Vuejs 2, каков наилучший способ реализации проверки правильности?

UPDATE Я нашел этот удивительный плагин Vee Validate

Answer 1

На самом деле я нашел этот устрашающий Plugin Vee Validate

Answer 2

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

Answer 3

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

semantic-ui-form-validation

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

Answer 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(...)

Answer 5

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

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

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

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

Answer 6

Я Пытался vue-form и нашел его очень Userful