jQuery Validate初步體驗(一)_jquery
- WBOY原創
- 2016-05-16 15:26:081306瀏覽
jQuery 是一個快速、簡單的JavaScript library， 它簡化了HTML 檔案的traversing，事件處理、動畫、Ajax 互動，從而方便了網頁製作的快速發展。 jQuery 是為改變你編寫JavaScript 的方式而設計的。
jQuery Validate 外掛程式為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單。
但是在學習的過程中，我也遇到了疑惑，網上的許多例子似乎都是依賴jquery.metadata.js這個庫，然後在標籤裡寫成class=”required remote” 這樣的形式，class本身是呈現樣式的，現在被附上各種校驗的規則，看起來有些亂。那如果不依賴jquery.metadata.js，又該怎麼寫。
1、只引入jquery.js(具體版本自己選擇)和jquery.validate.js
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
$().ready(function() {
$("#registerForm").validate();
});
</script>
</head>
<body>
<form id="registerForm" method="get" action="">
<fieldset>
<p>
<label for="cusername">用户名</label>
<input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="password" required="true" minlength="6">
</p>
<p>
<label for="cconfirmpassword">确认密码</label>
<input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" name="email" required="true" email="true"> </input>
</p>
<p>
<input type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
事實證明，只引入上面的兩個JS檔案也能完成簡單的表單驗證。
2、不過由於預設的提示訊息是英文的，為了能有一個友善的提示，所以，接下來要做的就是讓提示訊息顯示成中文了。
方法一、透過javascript自訂提示資訊。
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
$().ready(function() {
$("#registerForm").validate({
rules : {
username : {
required : true,
rangelength:[2,10]
},
password : {
required : true,
minlength:6
},
confirmpassword : {
required : true,
equalTo:"#cpassword"
},
email : {
required : true,
email : true
}
},
messages : {
username : {
required : '请输入姓名',
rangelength:'长度在 {0} 到 {1} 之间'
},
password : {
required : '请输入密码',
minlength:'密码不能少于 {0}位'
},
confirmpassword : {
required : '请再次输入密码',
equalTo:'两次输入的密码不一致'
},
email : {
required :'请输入邮箱',
email : '请输入有效的电子邮件地址'
}
}
});
});
</script>
</head>
<body>
<form id="registerForm" method="get" action="">
<fieldset>
<p>
<label for="cusername">用户名</label>
<input id="cusername" name="username" type="text"/>
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="password"/>
</p>
<p>
<label for="cconfirmpassword">确认密码</label>
<input id="cconfirmpassword" name="confirmpassword" type="password"/>
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" name="email" type="email"/>
</p>
<p>
<input type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
首先這裡有一個方法呼叫： $("#registerForm").validate([options]) ，這是用來驗證選擇的表單，方法的參數是可選項，可以輸入0個或多個鍵值對(key/value)，這個方法是為了處理例如：submit , focus , keyup , blur, click 觸發驗證的，物件是整個表單的元素，或是單一元素，使用rules 和messages 定義驗證的元素，使用errorClass , errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, ignoreTitle去控制非法元素的錯誤訊息顯示。其中rules裡也可以輸入0個或多個鍵值對，他的key對應的是元素的name屬性值，例如username，confirmpassword等等。而他的value裡則是一些驗證規則。 messages同rules一樣可以輸入0個或多個鍵值對，他的key也是對應的元素的name屬性值，而他的value裡則是驗證錯誤的提示訊息。簡而言之，rules{}中定義驗證規則的方法。 messages{}中定義錯誤輸出。
上面有一點要注意的就是 equalTo:"#cpassword"，這個鍵值對裡的value是元素的ID值(如果注意到#號就應該能察覺到)。
透過上面的寫法，你就可以自訂提示訊息了。或許你會有疑問了，難道我每次驗證表單的時候都要重新自訂提示訊息嗎？當然不是了，你還可以Ctrl C+Ctrl V。這當然是個玩笑。 。 。不過，接下來的方法二會解決你的疑問。
方法二、自訂一份提示訊息，然後儲存成JS檔案。把他當作模板，然後在需要的頁面直接引入就行。我是從網路下載了一份。
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
define( ["jquery", "../jquery.validate"], factory );
} else {
factory( jQuery );
}
}(function( $ ) {
/*
* Translated default messages for the jQuery validation plugin.
* Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
*/
$.extend($.validator.messages, {
required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多可以输入 {0} 个字符"),
minlength: $.validator.format("最少要输入 {0} 个字符"),
rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")
});
}));
頁面的程式碼和JV1.HTML幾乎是一模一樣，只是多引進了一份JS檔。
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script>
<script>
$().ready(function() {
$("#registerForm").validate();
});
</script>
</head>
<body>
<form id="registerForm" method="get" action="">
<fieldset>
<p>
<label for="cusername">用户名</label>
<input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="password" required="true" minlength="6">
</p>
<p>
<label for="cconfirmpassword">确认密码</label>
<input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" name="email" required="true" email="true"> </input>
</p>
<p>
<input type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
方法一和方法二並不互斥，兩種方法是可以結合使用的。你可以先用方法二儲存一份比較通用的模板，然後再用方法一去依具體情況來自訂提示。
以上就是我今天下午學習的收穫了。據說在新版本中，又有了新的寫法，既不需要依賴上面提到的jquery.metadata.js庫，也不需要通過javascript自定義提示信息，而是在標籤里以data-rule-驗證規則、data-msg-提示資訊這樣的格式來重新定義。躍躍欲試......
以下是官網提供的預設校驗規則。
(1)required:true 必輸欄位
(2)remote:"check.php" 使用ajax方法呼叫check.php驗證輸入值
(3)email:true 必須輸入正確格式的電子郵件
(4)url:true 必須輸入正確格式的網址
(5)date:true 必須輸入正確格式的日期
(6)dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性
(7)number:true 必須輸入合法的數字(負數，小數)
(8)digits:true 必須輸入整數
(9)creditcard: 必須輸入合法的信用卡號
(10)equalTo:"#field" 輸入值必須和#field相同
(11)accept: 輸入擁有合法後綴名的字串（上傳檔案的後綴）
(12)maxlength:5 輸入長度最多是5的字串(漢字算一個字元)
(13)minlength:10 輸入長度最小是10的字串(漢字算一個字元)
(14)rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字串")(漢字算一個字元)
(15)range:[5,10] 輸入值必須介於 5 和 10 之間
(16)max:5 輸入值不能大於5
(17)min:10 輸入值不能小於10
好了，摸索了將近兩個小時，我的第一篇隨筆到這也算是完成了。同時希望能帶給大家靈感。
下篇文章跟大家介紹jQuery Validate初步體驗(二)，一起學習吧。