jquery.validate.js【簡單實用的表單驗證框架】【進階版】

這個是這個插件的官網和我找到的一個中文博客。(雖然插件的名字叫作jquery.validte.js，但其實，這個插件的名字叫jquery validation)。

基礎的用法能夠去看冷子欲的文章或者上面的博客，我這裏就不詳細介紹了。

首先最重要的一點，全部要驗證的域都要在form裏，同時這些域都要有name屬性。

詳細內容請見原文連接：http://www.gbtags.com/gb/share/5765.htm

1. 默認validate參數的初始化：

   這個插件若是要用，確定不少頁面都會用到，畢竟若是有表單，就須要驗證。並且這個插件的默認語言是英語，因此咱們要轉換成漢語。咱們固然不但願在每一個頁面的js都寫一遍message。因此咱們能夠在公用的js裏面對默認message進行初始化。

1. jQuery.extend(jQuery.validator.messages, {
2. required: "必選字段",
3. remote: "請修正該字段",
4. email: "請輸入正確格式的電子郵件",
5. url: "請輸入合法的網址",
6. date: "請輸入合法的日期",
7. dateISO: "請輸入合法的日期 (ISO).",
8. number: "請輸入合法的數字",
9. digits: "只能輸入整數",
10. creditcard: "請輸入合法的信用卡號",
11. equalTo: "請再次輸入相同的值",
12. accept: "請輸入擁有合法後綴名的字符串",
13. maxlength: jQuery.validator.format("請輸入一個長度最可能是 {0} 的字符串"),
14. minlength: jQuery.validator.format("請輸入一個長度最少是 {0} 的字符串"),
15. rangelength: jQuery.validator.format("請輸入一個長度介於 {0} 和 {1} 之間的字符串"),
16. range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
17. max: jQuery.validator.format("請輸入一個最大爲 {0} 的值"),
18. min: jQuery.validator.format("請輸入一個最小爲 {0} 的值")
19. });

 

 同時，咱們也能夠對一些其它參數進行初始化：

1. $.validator.setDefaults({
2. errorClass: "fieldError", // 錯誤的時候添加什麼class
3. ignore: ".ignore", // 默認忽略那些域的驗證
4. ignoreTitle: true,
5. onkeyup: false,
6. errorPlacement: function(error, element) {
7. // 有錯誤了怎麼辦
8. },
9. submitHandler: function(form) {
10. // 全部驗證經過怎麼辦
11. }
12. });

 

 2. 添加驗證的規則

驗證的規則添加有不少種冷子欲以前的文章介紹的形式：

1. $("#form").validate({
2. debug:true, //調試模式
3. rules:{
4. username:{
5. required:true, //開啓必填項
6. rangelength:[3,10] //請輸入的數值在3至10位之間
7. };
8. };
9. });

 

 上面的驗證規則都是寫死的，好比required和rangelength都是插件內定好的規則，固然這些規則也不必定都能知足咱們的要求，那麼咱們該怎麼辦？jquery.validation提供了一個添加自定義規則的方法：addMethod：

1. $.validator.addMethod("usernameCheck", function(value, element){
2. return /^[0-9a-z_A-Z]+$/.test(value);
3. }, "用戶名格式錯誤");
4.  
5. $("form").validate({
6. rules: {
7. username: {
8. required: true,
9. minlength: 2,
10. maxlength: 20,
11. usernameCheck: true
12. remote: {
13. url: "check_username.jhtml",
14. cache: false
15. }
16. }
17. }
18. });

 

 上面的插件會驗證用戶名是否必填，長度，用戶名是否合法（也能夠用內置的pattern進行驗證），同時用ajax驗證用戶名是否重複啊什麼的。

有的時候，你可能name不是都同樣，好比說你要提交一組的數據，你的數據格式多是這個樣子的：

1. <input type="text" class="username" name="member[0].username" />
2. <input type="text" class="username" name="member[1].username" />
3. <input type="text" class="username" name="member[2].username" />
4. <input type="text" class="username" name="member[3].username" />
5. <input type="text" class="username" name="member[4].username" />

 

 咱們固然不肯意在rules裏面對5個分別寫驗證規則，太浪費時間，經歷，那麼咱們能夠用addClassRules方法，一樣的效果，做用在對應的class上面。

1. $.validator.addClassRules({
2. username: {
3. required: true,
4. minlength: 2,
5. maxlength: 20,
6. usernameCheck: true
7. remote: {
8. url: "check_username.jhtml",
9. cache: false
10. }
11. }
12. });
13. $("form").validate(); // 別忘了初始化

 

 3. 驗證錯誤了怎麼辦？

一般這個插件都是讓在驗證域的後面，若是咱們是一排的同name的checkbox呢？那麼他會把錯誤信息放到第一個checkbox的後面，這樣會很醜，咱們固然是想放到最後一個checkbox的後面，那麼咱們用errorPlacement方法：

1. $("form").validate({
2. errorPlacement: function(error, element) {
3. if($(element).is("input[type='checkbox']")) {
4. error.appendTo($(element).parent()); // 放到最後一個
5. } else {
6. $(element).after(error); // 放在錯誤域的後面
7. }
8. }
9. });

 4. 驗證經過了，而後呢？

咱們一般可能驗證經過之後，並不想直接提交表單，或許咱們也只是用表單進行驗證，而後經過ajax提交表單，那麼咱們能夠用submitHandler方法：

1. $("form").validate({
2. submitHandler: function(form) {
3. // 驗證成功之後作點你想作的事情
4. form.submit(); // 若是不想提交，就return false。
5. }
6. });

 

 5. 怎麼經過js直接驗證？

有的時候，即便咱們沒有編輯這個域，咱們也想要驗證這個域是否正確，那麼怎麼辦？用valid()方法。這個方法能夠做用到一個form，也能夠做用到一個域，驗證的同時，返回true/false值。

1. var v = $("input").valid();
2. var b = $("form").valid();

 

 6. 還有更多功能，這裏就不介紹了，你們能夠看上面提供的官網和博客地址。

 

 

1. 代碼演示：http://www.gbtags.com/gb/rtreplayerpreview/1140.htm

 詳細內容請見原文連接： http://www.gbtags.com/gb/share/5765.htm