謙卑式jQuery檢核範例-自訂規則

前面介紹過謙卑式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有為此寫了系列文章,有興趣的人可以參考。

歡迎推文分享:
Published 30 July 2011 10:36 AM 由 Jeffrey
Views: 22,481



意見

# Terry Chen said on 30 June, 2017 04:53 AM

謝謝您仔細的教學文章~

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<July 2011>
SunMonTueWedThuFriSat
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication