1

前面介紹過謙卑式jQuery檢核，並補充了呼叫後端程式進行檢核的做法，最後只要再學會加入自訂檢核規則的做法，謙卑式jQuery檢核就算功能完整，可以在專案中挑大樑了!

加入自訂檢核邏輯的動作包含兩部分:

1) 使用jQuery.validator.addMethod加入自訂檢核規則，提供一個函數執行檢查並傳回true/false
2) 使用jQuery.validator.unobtrusive.adapters.add定義自訂檢核規則的HTML語法及額外設定程序

在以下的程式範例中，我宣告了兩個自訂規則，一個是簡單的檢查號碼演算，輸入五碼數字，第五碼須為前四碼數字總和除10的餘數；第二個規則重點在透過data-val-ruleName-paraName方式多指定一個參數，並將參數傳至檢核函數做為判斷依據。補充說明都寫在註解裡，大家揉一下眼睛，開始看Code吧!

<!DOCTYPE html>
<html>
<head>
    <title></title>
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js" 
     type="text/javascript"></script>   
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js" 
     type="text/javascript"></script>   
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" 
     type="text/javascript"></script>  
    <style type="text/css">
body,input { font-size: 9pt; }     
.input-validation-error { border: 1px solid #ff0000 }
.input-validation-valid  { border: 1px solid #00ff00 }
.field-validation-error { color: #ff0000 }
.field-validation-valid { display: none }
.validation-summary-errors { font-weight: bold; color: #ff0000 }
.validation-summary-valid { display: none }
    </style>
    <script type="text/javascript">
        //加入自訂規則
        jQuery.validator.addMethod(
     //檢核規則名稱
            'myCheckSum',
           //實做檢查邏輯的函數，共有三個參數
             //value=欄位內容, elem為欄位元素, params為額外參數
   function (value, elem, params) {
                if (!value.match(/^\d{5}$/))
                    return false;
                var sum = 0;
                for (var i = 0; i < 4; i++)
                    sum += parseInt(value.charAt(i));
                return (sum % 10) == parseInt(value.charAt(4));
            },
            '' //可指定預設錯誤訊息，但在Unobstrusive做法中用不到
            );
        jQuery.validator.addMethod(
            "fixEqChk",
            //示範由params傳入額外參數的玩法
              //params會等於下方程式中，rules["fixedEqChk"]所指定的內容
   function (value, elem, params) {
                return value == params.chkValue;
            },
            "");
 
        //設定透過HTML掛載自訂規則的語法
        jQuery.validator.unobtrusive.adapters.add(
            'checksum', [],
            function (options) {
                options.rules["myCheckSum"] = true;
                options.messages['myCheckSum'] = options.message;
            }
        );
        jQuery.validator.unobtrusive.adapters.add(
            'fixeqchk', ['value'], //另外指定可用data-val-fixeqchk-value設定比對字串
              function (options) {
              //如果要傳參數給驗證函數，rules['...]會被傳送成上方addMethod裡
                //function(value, elem, params)中的params變數
                options.rules["fixEqChk"] = { chkValue: options.params.value };
              options.messages["fixEqChk"] = options.message;
            }
        );
    </script>
</head>
<body>
<form id="form1">
<div>
<input type="text" id="tCust" name="tCust" 
 data-val = "true" data-val-required = "不可空白"
 data-val-checksum = "格式或檢查碼不正確" data-val-checksum-plus = "2" />
<span data-valmsg-for="tCust"></span>
</div>
<div>
<input type="text" id="tFixEq" name="tFixEq"
 data-val = "true"  data-val-required = "不可空白"
 data-val-fixeqchk = "要輸入A才能過關" data-val-fixeqchk-value = "A" />
<span data-valmsg-for="tFixEq"></span>
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>

有一點要注意，由於jquery.validate.unobtrusive.js會在網頁載入時解析元素的data-val-*標籤設定檢核規則，因此加入自訂規則要在網頁載入完成前執行，記得別把jQuery.validator.addMethod()、jQuery.validator.unobtrusive.adapters.add()放在$(function() { … });中執行(某個笨蛋就做了這件傻事，還查了很久才發現錯誤)，不然得花手腳重新設定規則。

另外，在ASP.NET MVC 3中，自訂檢核規則的做法不太相同，但可做到Client-Side/Server-Side都加入同樣的檢核要求(就系統嚴謹及資安角度來說，Server-Side的檢核不可省略)，demo有為此寫了系列文章，有興趣的人可以參考。


Comments

# by Terry Chen

謝謝您仔細的教學文章~

Post a comment