web-dev-qa-db-ja.com

Vuejs 2 +フォーム検証

Vue-validator https://github.com/vuejs/vue-validator はVuejs 2の準備ができているので、フロントエンド検証を実装する最良の方法は何ですか？

更新この素晴らしいプラグインを見つけました Vee Validate

javascriptformsvalidationvue.jsvuejs2
17
Tiago Matos

私の意見では、VueJSのフロントエンド検証を実装する良い方法は、 vuelidate を使用することです。

使い方はとても簡単で強力です。モデルベースの検証を提供します。つまり、検証されるデータで定義するものであるため、テンプレートから完全に切り離されます。 email、minおよびmax lengthまたはrequiredの一般的なビルトインバリデーターが付属しています。そして、他の多くの。

3
jpeg

最終的にはすべて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（）関数をコンポーネントにフックすることもできます。

2
K3TH3R

現在、多くの選択肢はありません。 vue-awesome を見て、最も関連性の高いライブラリを見つけることができます。現時点では2つあります。

1
ragnar

セマンティックUIまたはそのオプションを使用している場合、すばらしいフォーム検証プラグインがあります。

セマンティックUIフォーム検証

私はVuejsでそれを使用しましたが、うまく機能します。

1
rdk1992

このバリデーターはシンプルで柔軟性があり、十分に文書化されています。 Vue Js。

過去にJqueryバリデータプラグインを使用しました。それと比較して、このsimple-vue-validatorは、その柔軟性と、ハ​​ードコーディングされたフォームと動的に生成されたフォームの両方を検証する能力において本当に際立っています。

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

私はSaaSプロジェクトに広範囲に使用しましたが、これまでのところうまくいきました。

0
gogo52cn