<!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>