almost 6 years ago

練習寫 Validate Plugin
可以自訂驗證函數跟設定群組
= =+不過 selector 在IE 8 有點小問題改了一下條件...

/*
 * Validate Plugin
 *  範例
 *  <ReqExp group="A" checkId="name" check="empty" error="請輸入姓名" />
 *  <ReqExp group="B" checkId="phone" check="compareTo" compareid="tel" error="手機電話不相同" />
 *
 *  ReqExp 屬性介紹
 *  group 群組
 *  checkId 檢查的ID
 *  check 檢查的函數名稱
 *  error 錯誤訊息
 *
 *  $("#btnA").myValidate();
 *  
 *  $("#btnB").myValidate({
 *      group: "B",
 *      // 自訂驗證函數 val 為 checkId 的值 reqExp 為 ReqExp 標籤物件 check="checkNum"
 *      checkNum:  function(val, reqExp) {
 *          if(val == "") {
 *              return true;
 *          }
 *          var regu = "[0-9]";
 *          var re = new RegExp(regu);
 *          return re.test(val);
 *      }
 *  });
 *  
 *  說明
 * submitForm 設定要 submit 的表單id
 * bind 綁定的事件
 * group 驗證群組
 * 預設的驗證函數  val 為 checkId 的值   reqExp 為 ReqExp 標籤物件
 * 可自訂加入驗證函數
 *  compareTo: function(val, reqExp) {
 *          var compareValue = $("#" + reqExp.attr("compareid")).val();
 *          compareValue = compareValue.replace(/\r\n|\r|\n/g, '');     
 *           
 *          if(val != compareValue) {
 *              return false;
 *          } else {
 *              return true;
 *          }
 *  },
 * alertDesc alert 警訊的事件 可自行覆蓋修改
 * mySubmit Submit 事件 可自行覆蓋修改
 * resultData 物件屬性
 *    resultData.alertErrorDesc 錯誤訊息
 *    resultData.checkResult  驗證結果 true or false
 *    resultData.submitForm submit 表單id
 */
$.fn.myValidate = function (settings) {
    // 預設屬性
    var _defaultSettings = {
        submitForm: "form1",
        bind: "click",
        group: "A",
        
        empty: function (val, reqExp) {
            if(val == "") {
                return false;
            }
         
            var regu = "^[ ]+$";
            var re = new RegExp(regu);
             
            return !re.test(val);
        },
        
        compareTo: function(val, reqExp) {
            var compareValue = $("#" + reqExp.attr("compareid")).val();
            compareValue = compareValue.replace(/\r\n|\r|\n/g, '');     
             
            if(val != compareValue) {
                return false;
            } else {
                return true;
            }
        },
        
        alertDesc: function (resultData) {
            alert(resultData.alertErrorDesc);
        },
        
        mySubmit: function (resultData) {
            $("#" + resultData.submitForm).submit();
        }
    }   
    
    var _settings = $.extend(_defaultSettings, settings);
    
    var _validateMethods = {
        eachReqExp : function() {
            
            $("ReqExp").each(function() { 
                
                if ($(this).attr("group") == _settings.group) {
                    var checkValue = "";
                
                    checkValue = $("#" + $(this).attr("checkid")).val();
                    checkValue = checkValue.replace(/\r\n|\r|\n/g, '');
                
                    var checkMethod = $(this).attr("check");
                
                    if (!_settings[checkMethod](checkValue, $(this))) {
                        _settings.alertErrorDesc += $(this).attr("error") + "\n";
                    }
                }
            });
            
            if (_settings.alertErrorDesc != "") {
                _settings.checkResult = false;
            } else {
                _settings.checkResult = true;
            }
        }
    }
    
    var _handler = function () {
        // 綁定事件
        var this_object = $(this);
        this_object.bind(_settings.bind, function() {
            
            _settings.checkResult = true;
            _settings.alertErrorDesc = "";
            
            // 搜尋驗證物件
            _validateMethods.eachReqExp();
            // 建立結果
            var resultData = {};
            resultData.alertErrorDesc = _settings.alertErrorDesc;
            resultData.checkResult = _settings.checkResult;
            resultData.submitForm = _settings.submitForm;
            
            if (resultData.checkResult == false) {
                _settings.alertDesc(resultData);
            }
            
            if (resultData.checkResult == true) {
                _settings.mySubmit(resultData);
            }
        });
    }
    
    return this.each(_handler);
}
← 分頁 Plugin ArrayList 在 Foreach 下刪除的問題 →
 
comments powered by Disqus