在先前介紹過的Unobtrusive Validation(謙卑式檢核)寫法,我們都是用data-val-ruleName="檢核失敗訊息"的方式指定檢核失敗時要顯示的訊息文字。但在實務情境下,檢核訊息常需依使用者選擇或輸入的內容不同而顯示不同的訊息,以提高介面親和力。(例如: "您輸入的字串過長,請刪去5個字元"、"12345不是一個有效的使用者名稱"、"2011/99/31是哪門子鬼日期,再亂搞信不信老子劈死你!"... 等等,訊息中搭配使用者輸入內容,更能精確陳述問題所在。)
針對遠端檢核及自訂規則,jQuery Validation本來就支援動態訊息。在遠端檢核時,可透過回傳雙引號包覆的字串,覆寫原有的錯誤訊息,達到動態變動訊息內容的目的(細節可參考舊文);而自訂規則要使用動態訊息,只需做點小調整就好: (自訂規則的細節也請參考舊文)
以下是一個範例,模擬多幣別運費輸入欄位的檢核。當幣別為台幣、美金、歐元時,各有1000, 30, 25元的上限,我們希望在使用者輸入超過上限時,可顯示"超過某幣別金額上限nnnn"的失敗訊息。
<script src="Scripts/jquery-1.6.4.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script src="Scripts/jquery.validate.unobtrusive.js"></script>
<script src="Scripts/jquery.validate.inline.js"></script>
<link href="Content/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
jQuery.validator.addMethod("custValdRule",
function (value, elem, params) {
var $curr = $("#curr option:selected");
var maxValue = parseFloat($curr.data("maxValue"));
this.settings.messages[elem.name] =
"超過" + $curr.text() + "金額上限" + maxValue;
jQuery.validator.unobtrusive.adapters.add(
options.rules["custValdRule"] = true;
options.messages['custValdRule'] = options.message;
$("#form1").makeValidationInline();
$("#curr").change(function () {
body,table,input { font-size: 9pt; }
td { border: 1px solid gray; padding: 5px; }
<form id="form1" method="get" action="">
<table style="margin-top: 30px;">
<td style="width: 80px; text-align: right; vertical-align: baseline;">
<td style="width: 150px">
<option value="TWD" data-max-value="1000">TWD</option>
<option value="USD" data-max-value="30">USD</option>
<option value="EUR" data-max-value="25">EUR</option>
<input type="text" id="amount" name="amount" size="4" maxlength="4"
style="text-align: right"
data-val = "true" data-val-required="請填寫金額" data-val-custChk="*" />
<input type="submit" value="送出" />