21

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

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

4

5 に答える 5

2

最終的にはすべて 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"]}

これらの validate() 関数をコンポーネントにフックすることもできます。@blur=validate(...)

于 2016-11-23T05:35:07.003 に答える
1

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

于 2016-10-24T13:38:21.840 に答える
1

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

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

Vuejs で使用しましたが、うまく機能します。

于 2016-11-22T19:39:10.617 に答える
0

このバリデーターはシンプルで柔軟性があり、十分に文書化されていることがわかりました。Vue Js でフォームを検証するほとんどのシナリオをカバーしています。

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

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

私は SaaS プロジェクトで広く使用しましたが、これまでのところ非常にうまくいっています。

于 2017-02-10T08:39:52.247 に答える