jQuery Validation 是 jQuery 的一個既強又有彈性的 plugin 套件，主要功能就是用來進行表單驗證。
Using jQuery Validation
jQuery.validate
簡單範例
<head>
<title></title>
<script type="text/javascript" src="./Scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="./Scripts/jquery.validate.js"></script>
<script type="text/javascript">
$(function () {
$("#myForm").validate();
});
</script>
</head>
<body>
<form id="myForm" method="post" action="javascript:alert('完成');">
<p>
UserName(*) :<input class="required" minlength="5" />
</p>
<p>
Email(*) :<input name="email" class="required email"/>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
</body>
語法說明
若要驗證欄位，只要將下列驗證規則參數加入 class 屬性中即可，也可以混合使用。
驗證規則參數：(查看完整列表)
- required：必填欄位
- email：格式要符合E-Mail格式
- url：格式要符合網址格式，如：http://www.minwt.com
- number：數字格包含小數點
- digits：數字為正整數
- date：日期格式
- dataISO：日期格式，格式必須為YYYY/MM/DD、YYYY-MM-DD、YYYYMMDD
- equalTo：與某一欄位值相同
- minValue：最小字元長度
- maxValue：最大字元長度
- rangeValue：字元長度區間長度
- minLength：最小字元長度(中文字算一個字符)
- maxLength：最大字元長度(中文字算一個字符)
- rangeLength：字元長度區間長度(中文字算一個字符)
進階範例
<form id="myForm" method="post" action="javascript:alert('完成');">
<p>
UserName :<input type="text" name="username"/>
</p>
<p>
Email : <input type="text" name="email"/>
</p>
<p>
Policy : <input type="checkbox" name="agree" id="agree"/>
</p>
<p>
Favorite :<input type="checkbox" name="favorite" value="apple"/>apple
<input type="checkbox" name="favorite" value="htc"/>htc
<input type="checkbox" name="favorite" value="samsung"/>samsung
<label for="favorite" class="error">請至少選擇二項</label>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
<script type="text/javascript">
$(function () {
$("#myForm").validate({
rules: {
username: {
required: true,
minlength: 3
},
email: {
required: true,
email: true
},
agree: "required",
favorite: {
minlength: 2
}
},
messages: {
username: {
required: "此為必填欄位",
minlength: "UserName 至少需要 {0} 個字"
},
email: "請正確輸入Email",
agree: "你必須勾選同意"
},
event: "keyup",
submitHandler: function () {
if ($("#agree").attr("checked"))
$("#agree").attr("checked", true);
}
});
});
</script>
語法說明
- rules ：定義驗證規則。
- messages ：定義訊息文字。
- event ：設定觸發驗證的事件，可選用的事件值有 [keyup|blur]，若不使用這個參數時就只會在 submit 事件時觸發驗證。
- submitHandler ：定義當驗證通過，但尚未送出前所要執行的程式碼。
- debug ：定義當驗證失敗時所要執行的程式碼。
Customized validation rule
有的時候，我們需要稍微複雜一點的檢查邏輯，讓 A 欄位的檢查邏輯可以因為其他的輸入欄位而調整。例如：如果在線上購物的時候，使用者有匯款、線上刷卡兩種付款的方式，我們希望如果使用者選擇了線上刷卡，匯款帳號後五碼變成選填，信用卡號變成必填；如果使用者選匯款，檢查的邏輯就顛倒過來，像這樣的功能要怎麼做呢？
<input name="payment" id="atm" type="radio" value="ATM" />
<label for="atm">ATM 匯款 : 請填入匯款帳號末五碼 </label>
<input name="pay_account" type="text" class="atm_required" />
$.validator.addMethod("atm_required",
function( value, element){
return ( $('#payment_atm').is(':checked') ) ?
( value != '' && value.length == 5) : true;
}, 'ATM 匯款必填'
);
Customized error message
若要修改驗證結果的訊息文字，有以下做法
修改 jquery.validate.js
這方法可以修改預設的訊息內容，只要開啟 jquery.validate.js ，找到以下區塊，變更文字內容即可。
使用 localization messages
jQuery validation 預設的 message 是英文，如果你想要用其他的語言，可以在 include jquery validation plugin 之後，再多 include locale 的 javascript, 如：
<script type="text/javascript" src="/PATH/TO/jquery-validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="/PATH/TO/jquery-validation/localization/messages_tw.js"></script>
在 messages 中加入 icon
jQuery validation 預設會將 error message 裝在 裡，並放在輸入欄位的後面。 所以你也可以針對這個 class 設定屬於你的 error message 樣式。
label.error{
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
label.success{
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
$(document).ready( function(){
$('#commentForm').validate({
success: function(label) {
label.addClass("success").text("Ok!");
}
});
});
感謝分享
回覆刪除