jquery 之validate 筆記

jquery.validate是jquery旗下的一個驗證框架，藉助jquery的優勢，我們可以迅速驗證一些常見的輸入,並且可以自己擴充自己的驗證方法，並且對國際化也有很好的支持。
說明：需要JQuery版本：1.2.6+
步驟：
1，要導入相應的jQuery.js與jquery.validate.js文件
<script src="jquery.js" type="text/javascript"></script>
< script src="jquery.validate.js" type="text/javascript">
2，在相應的字段上指定驗證規則
名稱 *<input type="text" name="loginName" class="required">
其中class="required"代表本字段必須要輸入數據
3，指定要對錶單進行驗證
<script type="text/javascript">
$(function(){
$("#testForm").validate();
});
< /script>

效果如下圖：
1. 基礎知識
1.1. 指定驗證規則的方式
1.1.1. 把驗證規則寫到字段元素的class屬性中
例：
名稱 *　<input type="text" name="loginName" class="required"><br>
密 *　 <input type="password" name="password" class="required"><br>
再次輸入 <input type="password" name="password2"
class="{equalTo: '[name=password]'} required"><br>
生日　　 <input type="text" name="birthday" class="dateISO"><br>
E-mail *<input type="text" name="email" class="email"><br>
PAR(zip)<input type="file" name="resource" class="{accept: 'zip'}">

說明：
1，如果使用class="{}"的方式，必須引入包：jquery.metadata.js
1.1.2. 調用validate()方法時傳遞字段的驗證規則
$(function() {
$("#testForm").validate({
rules: {
loginName:{
required: true,
min: 2
} ,
password: {
required: true
},
password2: {
equalTo: "input[name=password]"
}
}
});
});
1.2. 內置的驗證規則
required:true 必輸字段
remote:"check.php" 使用ajax方法調用check.php驗證輸入值
email:true 必須輸入正確格式的電子郵件
url:true 必須輸入正確格式的網址
date:true 必須輸入正確格式的日期
dateISO:true 必須輸入正確格式的日期(ISO)，例如：2010-01-01，2010/01/01 只驗證格式，不驗證有效性
number:true 必須輸入合法的數字(負數，小數)
digits:true 必須輸入整數
creditcard: 必須輸入合法的信用卡號
equalTo:"#field" 輸入值必須和#field相同
accept: "gif|png|jpg" 輸入擁有合法後綴名的字符串（上傳文件的後綴），多個後綴之間用’|’隔開
maxlength:5 輸入長度最多是5的字符串(漢字算一個字符)
minlength:10 輸入長度最小是10的字符串(漢字算一個字符)
rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字符串")(漢字算一個字符)
range:[5,10] 輸入值必須介於 5 和 10 之間
max:5 輸入值不能大於5
min:10 輸入值不能小於10
說明：
1， remote是遠程驗證：比如註冊驗證用戶名是否已被註冊，返回值只能是true（驗證成功）或false（驗證失敗）。
2，某些屬性值中的引號不能省略，否則出錯。如accept、equalTo等。
1.3. 自定義驗證規則
除了內置的驗證規則，validation還允許自定義驗證規則。這是通過validation的addMethod()方法實現的，語法爲：
jQuery.validator.addMethod("name",function,message)
其中:
1， name爲驗證規則的名稱
2， function定義驗證的規則。參數有?。返回值爲?。
3， message是驗證失敗時的提示信息。
1.4. 指定錯誤提示內容
1.4.1. 更改默認的提示內容
jQuery.extend(jQuery.validator.messages, {
required: "必選字段",
remote: "請修正該字段",
email: "請輸入正確格式的電子郵件",
url: "請輸入合法的網址",
date: "請輸入合法的日期",
dateISO: "請輸入合法的日期 (ISO).",
number: "請輸入合法的數字",
digits: "只能輸入整數",
creditcard: "請輸入合法的信用卡號",
equalTo: "請再次輸入相同的值",
accept: "請輸入擁有合法後綴名的字符串",
maxlength: jQuery.validator.format("允許的最大長度爲 {0} 個字符"),
minlength: jQuery.validator.format("允許的最小長度爲 {0} 個字符"),
rangelength: jQuery.validator.format("允許的長度爲{0}和{1}之間"),
range: jQuery.validator.format("請輸入介於 {0} 和 {1} 之間的值"),
max: jQuery.validator.format("請輸入一個最大爲 {0} 的值"),
min: jQuery.validator.format("請輸入一個最小爲 {0} 的值")
擴展工具
stringMinLength: jQuery.validator.format("請輸入一個小於{0} 的字符串, 一箇中文字符長度爲2”),
stringMaxLength: jQuery.validator.format("請輸入一個大於} 的字符串, 一箇中文字符長度爲2”),
string: “含特殊符號!”,
byteRangeLength: "請確保輸入的值在3-15個字節之間(一箇中文字算2個字節)",
stringCH: "只能輸入漢字,一個漢字佔兩具字節",
stringEN:”只能輸入字母”

1.4.2. 個別表單改變提示內容（只對當前表單有效）
方法一：
<input type="file" name="parResource"
class="{accept: 'zip', messages: {accept:'請選擇正確的文件'}}">

方法二：
$(function() {
$("#testForm").validate({
messages:{
loginName: {
required: "必選字段2"
},
email: {
required: '必選字段22',
email: "請輸入正確格式的電子郵件2"
}
}
});
});
1.5. 改變錯誤消息顯示樣式
指定label.error的樣式就可以了，如下：
<style type="text/css">
label.error{
margin-left: 10px;
color: red;
}
< /style>

說明：label.error指class爲error的label元素，如：<label for="resource" class="error">

這是湯陽光老師講的，雖然這位老師很年輕，但是他的技術很高，以前學的知識很多，所以也有思路不清的地方，可是自從這位老師給我們講課，我就感覺到他有一種對JAVA技術的靈性，無論是什麼在他那裏總能得到思想上的昇華！真是佩服！

// 字符最大長度驗證（一箇中文字符長度爲2）
jQuery.validator.addMethod("stringMaxLength", function(value, element, param) {
var length = value.length;
for ( var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length <= param);
}, $.validator.format("長度不能大於{0}!"));

// 字符驗證
jQuery.validator.addMethod("string", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "不允許包含特殊符號!");

// 中文字兩個字節
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, "請確保輸入的值在3-15個字節之間(一箇中文字算2個字節)");

// 只能輸入中文
jQuery.validator.addMethod("stringCH", function(value, element) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || /[^u4E00-u9FA5]/g.test(value);
}, "只能輸入漢字,一個漢字佔兩具字節");

// 只能輸入26個字母
jQuery.validator.addMethod("stringEN", function(value, element) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
alert(length);
return this.optional(element) || /^[A-Za-z]+$/g.test(value);
}, "只能輸入字母");
}