Vuejs 2 +フォーム検証
Vue-validator https://github.com/vuejs/vue-validator はVuejs 2の準備ができているので、フロントエンド検証を実装する最良の方法は何ですか?
更新この素晴らしいプラグインを見つけました Vee Validate
私の意見では、VueJSのフロントエンド検証を実装する良い方法は、 vuelidate を使用することです。
使い方はとても簡単で強力です。モデルベースの検証を提供します。つまり、検証されるデータで定義するものであるため、テンプレートから完全に切り離されます。 email、minおよびmax lengthまたはrequiredの一般的なビルトインバリデーターが付属しています。そして、他の多くの。
最終的にはすべてJavascriptであるため、 Parsely.js または Validate.js のような既存のJavascript検証ライブラリの一部を使用してこれをフックすることもできます。 Validate.jsライブラリの良い点の1つは、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"]}
_
@blur=validate(...)
の行に沿って何かを使用して、これらのvalidate()関数をコンポーネントにフックすることもできます。
現在、多くの選択肢はありません。 vue-awesome を見て、最も関連性の高いライブラリを見つけることができます。現時点では2つあります。
このバリデーターはシンプルで柔軟性があり、十分に文書化されています。 Vue Js。
過去にJqueryバリデータプラグインを使用しました。それと比較して、このsimple-vue-validatorは、その柔軟性と、ハードコーディングされたフォームと動的に生成されたフォームの両方を検証する能力において本当に際立っています。
https://github.com/semisleep/simple-vue-validator
私はSaaSプロジェクトに広範囲に使用しましたが、これまでのところうまくいきました。