JSフォーム検証プラグインのデータと論理分離操作例分析【ポリシーモード】

本明細書の例は、JSフォーム検証プラグインのデータと論理分離動作を説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
以前にフォーム検証プラグインと書きましたが、なぜ車輪を繰り返し作っていますか？第一の問題はコード構造が乱れていて、原型継承の書き方によって成層化されますが、業務ロジックとデータ構造が混在していて、第二の問題――拡張性と柔軟性が悪いです。
フォーム検証の過程を真剣に分析して、二つのステップに分けられます。どうやって検証し、どうやって検証しますか？どのように検証するかはデータレベルの問題です。どうやって検証するかは業務ロジックレベルの問題です。
クリック：ここですソースの確認
ポリシーモードは、オブジェクトとルールを区別します。
アルゴリズム（データ層）とオブジェクト（論理層）を分離するにはどうすればいいですか？アルゴリズムはお客様と独立して変化することができますか？戦略モードをここに導入します。
何がポリシーモードですか？
一連のアルゴリズムを定義して、各アルゴリズムをパッケージ化し、相互に置換できるようにします。このモードは、アルゴリズムを使用するクライアントと独立して変化させることができる。
つまり、戦略モードは対象自体と演算規則を区別して、その機能が非常に強いです。この設計モード自体の核心思想は対象に向けてプログラミングされた多形性の思想です。
ポリシーパターンのさらなる定義については、参照
次に、戦略モデルを使って、コード階層問題を解決します。
理想的なプラグインの呼び出し
コードを開始する前に、より簡単な方法でプラグインを起動したいです。

  //     form  
  var form = document.getElementById('myForm');

  //         
  var validation = new FormValidator();
  //       
  validation.add(form.username, 'isEmpty', '       s');
  validation.add(form.password, 'minLength: 6', '        6   ');
  validation.add(form.password2, 'isEqualTo: password', '     ');
  validation.add(form.mobile, 'isMobile', '         ');

  //     ，       
  $('#submit-btn').click(function() {
    var errorMsg = validation.start();

    //          ，       
    if(errorMsg){
      console.log(errorMsg);
      return false;
    }
  })

add()方法パラメータ説明
1、パラメータ1：検証が必要なフォーム項目DOM元素、form[name属性]
2、パラメータ2：検証方法は、コロンで分割し、コロン後の値を方法のパラメータとします（オプション）
3、パラメータ3：エラーメッセージ情報
作成検証関数
私たちは戦略モードを使ってコードを作成し始めました。第一ステップは、独立したトラヒック論理の検証関数アルゴリズム、すなわちデータ層のみを作成する。

var VerifyPolicies = {
  isEmpty: function(value, errMsg) {
    if(value == '') return errMsg;
  },

  //     
  minLength: function(value, length, errMsg) {
    if (value.length < length) return errMsg;
  },
  //     
  isMobile: function(value, errMsg) {
    if(!/^1[34578]\d{9}$/.test(value)) return errMsg;
  },
  //     
  isEqualTo: function (value, toDom, errMsg) {
    var toValue = document.getElementById(toDom).value;

    if(value !== toValue) return errMsg;
  }
};

検証ロジックの作成

function FormValidator(VerifyPolicy) {
  this.verifyPolicies = VerifyPolicy ? VerifyPolicy : VerifyPolicies;
  //           
  this.validateFn = [];
}

FormValidator.prototype.add = function(dom, rules, errMsg) {
  var _this = this;

  this.validateFn.push(function() {
    var args = [];
    var rule = rules.split(':');
    var ruleName = rule[0];
    var ruleParam = rule[1];
    var value = dom.value;

    args.push(value);
    if(ruleParam) args.push(ruleParam.trim());
    args.push(errMsg);

    //     apply      ，    ES6，      ：
    // return _this.verifyPolicies[ruleName](...args)
    return _this.verifyPolicies[ruleName].apply(null, args);
  })
};

FormValidator.prototype.start = function() {
  var fn = this.validateFn;
  for(var i =0, len = fn.length; ; i++) {
    var msg = fn[i]();
    if(msg) return msg;
  }
};

これでフォーム全体の検証が完了しました。この方法の上に、任意に方法を追加することができます。
興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRun上記コードの運行効果をテストします。
もっと多くのJavaScriptに関する内容に興味がある読者は、当駅のテーマを見ることができます。「javascript対象向け入門教程」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」および「JavaScript数学演算の使い方のまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。