本文例項講述了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程式設計有所幫助。