jQuery常用插件與jQuery使用validation插件實現表單驗證實例

本文轉載自查看原文 2019-03-17 14:44 808 jQuery

jQuery常用插件

1，jQuery特別容易擴展，開發者可以基於jQuery開發一些擴展動能

2，插件:http://plugins.jquery.com

3，超厲害的插件：validation 、 pickadate、 Echarts、chosen、（編輯器插件） ckeditor在百度上都可以直接搜索

表單校驗

jQuery插件validation：https://jqueryvalidation.org/

validation是一個基於jQuery的插件，里面有了jQuery的一些函數和功能

使用validation插件實現表單驗證

初始時點擊注冊的效果：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="js/jquery-3.3.1.js"></script>
 7         
 8     </head>
 9     <body>
10         <form  id="registerForm">
11             <table border="1" width="800px" height="500px" >
12                 <tr><td colspan="2" align="center" >注冊 </td></tr>
13                 <tr><td align="right" width="100px">用戶名：</td><td align="left"><input type="text" name="username"/></td></tr>
14                 <tr><td align="right">郵箱：</td><td align="left"><input type="text" name="email"/></td></tr>
15                 <tr><td align="right">密碼：</td><td align="left"><input type="password" name="password"/></td></tr>
16                 <tr><td align="right">確認密碼：</td><td align="left"><input type="password" name="repassword" /></td></tr>
17                 <tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>
18                 <tr><td align="right">性別：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
19                 
20                 <label for="sex" class="error"></label>
21                 </td></tr>
22                 <tr><td colspan="2" align="center"><input type="submit"  value="注冊"/> </td></tr>
23                 
24             </table>
25         </form>
26     </body>
27 </html>

未使用插件時.html

使用了插件並書寫了校驗規則：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="js/jquery-3.3.1.js"></script>
 7         <script src="js/jquery.validate.min.js"></script>
 8         
 9         <script>
10             var validateRule={
11                 rules:{
12                     username:{
13                         required:true,//必填
14                         minlength:3,
15                         maxlength:6
16                     },
17                     email:{
18                         required:true,
19                         email:true
20                     },
21                     password:{
22                         required:true,
23                         minlength:3,
24                         maxlength:6
25                     },
26                     repassword:{
27                         required:true,
28                         equalTo:"[name='password']"//與名為password填的內容保持一致
29                         
30                     },
31                     birthday:{
32                         date:true//填寫的內容需與日期的格式內容保持一致
33                     },
34                     sex:{
35                         required:true
36                     }
37                     
38                 },
39 
40             };
41             $(function(){
42                 $("#registerForm").validate(validateRule);
43             })
44             
45         </script>
46 
47     
48     </head>
49     <body>
50         <form  id="registerForm">
51             <table border="1" width="800px" height="500px" >
52                 <tr><td colspan="2" align="center" >注冊 </td></tr>
53                 <tr><td align="right" width="100px">用戶名：</td><td align="left"><input type="text" name="username"/></td></tr>
54                 <tr><td align="right">郵箱：</td><td align="left"><input type="text" name="email"/></td></tr>
55                 <tr><td align="right">密碼：</td><td align="left"><input type="password" name="password"/></td></tr>
56                 <tr><td align="right">確認密碼：</td><td align="left"><input type="password" name="repassword" /></td></tr>
57                 <tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>
58                 <tr><td align="right">性別：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
59                 
60             
61                 </td></tr>
62                 <tr><td colspan="2" align="center"><input type="submit"  value="注冊"/> </td></tr>
63                 
64             </table>
65         </form>
66     </body>
67 </html>

沒有引入國際化的message.js文件.html

由於默認給出的是英文提示，所以我們也可以引入國際化的message.js文件

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="js/jquery-3.3.1.js"></script>
 7         <script src="js/jquery.validate.min.js"></script>
 8         <script type="text/javascript" src="js/messages_zh.min.js" ></script>
 9         <script>
10             var validateRule={
11                 rules:{
12                     username:{
13                         required:true,//必填
14                         minlength:3,
15                         maxlength:6
16                     },
17                     email:{
18                         required:true,
19                         email:true
20                     },
21                     password:{
22                         required:true,
23                         minlength:3,
24                         maxlength:6
25                     },
26                     repassword:{
27                         required:true,
28                         equalTo:"[name='password']"//與名為password填的內容保持一致
29                         
30                     },
31                     birthday:{
32                         date:true//填寫的內容需與日期的格式內容保持一致
33                     },
34                     sex:{
35                         required:true
36                     }
37                     
38                 },
39 
40             };
41             $(function(){
42                 $("#registerForm").validate(validateRule);
43             })
44             
45         </script>
46 
47     
48     </head>
49     <body>
50         <form  id="registerForm">
51             <table border="1" width="800px" height="500px" >
52                 <tr><td colspan="2" align="center" >注冊 </td></tr>
53                 <tr><td align="right" width="100px">用戶名：</td><td align="left"><input type="text" name="username"/></td></tr>
54                 <tr><td align="right">郵箱：</td><td align="left"><input type="text" name="email"/></td></tr>
55                 <tr><td align="right">密碼：</td><td align="left"><input type="password" name="password"/></td></tr>
56                 <tr><td align="right">確認密碼：</td><td align="left"><input type="password" name="repassword" /></td></tr>
57                 <tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>
58                 <tr><td align="right">性別：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
59                 
60             
61                 </td></tr>
62                 <tr><td colspan="2" align="center"><input type="submit"  value="注冊"/> </td></tr>
63                 
64             </table>
65         </form>
66     </body>
67 </html>

引入了國際化的message.js文件.html

我們也可以自己自定義書寫提示內容，在messages中進行書寫

<script>
            var validateRule={
                rules:{
                    username:{
                        required:true,//必填
                        minlength:3,
                        maxlength:6
                    },
                    email:{
                        required:true,
                        email:true
                    },
                    password:{
                        required:true,
                        minlength:3,
                        maxlength:6
                    },
                    repassword:{
                        required:true,
                        equalTo:"[name='password']"//與名為password填的內容保持一致
                        
                    },
                    birthday:{
                        date:true//填寫的內容需與日期的格式內容保持一致
                    },
                    sex:{
                        required:true
                    }
                    
                },
            messages:{
                    username:{
                    required:"這個是必須填寫的哦！！",//必填
                    minlength:"最少得3個字符哦！！",
                    maxlength:"最多只能填6個字符哦！！"
                    },
                    sex:{
                        required:"性別必須的勾選哦！！！"
                    }
                }
            };
            $(function(){
                $("#registerForm").validate(validateRule);
            })
            
        </script>

從展示的效果圖中我們可以看到性別的那一欄提示內容並沒有意識提示在后面，而是在兩個input標簽之間，我們可以做這樣的處理，就可以將提示內容展示在后面：

<tr><td align="right">性別：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
              <label for="sex" class="error" style="display: none;"></label>
                </td></tr>

最終的效果圖：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="js/jquery-3.3.1.js"></script>
 7         <script src="js/jquery.validate.min.js"></script>
 8         <script type="text/javascript" src="js/messages_zh.min.js" ></script>
 9         <script>
10             var validateRule={
11                 rules:{
12                     username:{
13                         required:true,//必填
14                         minlength:3,
15                         maxlength:6
16                     },
17                     email:{
18                         required:true,
19                         email:true
20                     },
21                     password:{
22                         required:true,
23                         minlength:3,
24                         maxlength:6
25                     },
26                     repassword:{
27                         required:true,
28                         equalTo:"[name='password']"//與名為password填的內容保持一致
29                         
30                     },
31                     birthday:{
32                         date:true//填寫的內容需與日期的格式內容保持一致
33                     },
34                     sex:{
35                         required:true
36                     }
37                     
38                 },
39             messages:{
40                     username:{
41                     required:"這個是必須填寫的哦！！",//必填
42                     minlength:"最少得3個字符哦！！",
43                     maxlength:"最多只能填6個字符哦！！"
44                     },
45                     sex:{
46                         required:"性別必須的勾選哦！！！"
47                     }
48                 }
49             };
50             $(function(){
51                 $("#registerForm").validate(validateRule);
52             })
53             
54         </script>
55 
56     
57     </head>
58     <body>
59         <form  id="registerForm">
60             <table border="1" width="800px" height="500px" >
61                 <tr><td colspan="2" align="center" >注冊 </td></tr>
62                 <tr><td align="right" width="100px">用戶名：</td><td align="left"><input type="text" name="username"/></td></tr>
63                 <tr><td align="right">郵箱：</td><td align="left"><input type="text" name="email"/></td></tr>
64                 <tr><td align="right">密碼：</td><td align="left"><input type="password" name="password"/></td></tr>
65                 <tr><td align="right">確認密碼：</td><td align="left"><input type="password" name="repassword" /></td></tr>
66                 <tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>
67                 <tr><td align="right">性別：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
68               <label for="sex" class="error" style="display: none;"></label>
69                 </td></tr>
70                 <tr><td colspan="2" align="center"><input type="submit"  value="注冊"/> </td></tr>
71                 
72             </table>
73         </form>
74     </body>
75 </html>

最終代碼.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 表單驗證插件----jquery validation jQuery表單驗證插件 --jQuery Validation Plugin jQuery Validate插件驗證實例 jQuery插件——Validation Plugin表單驗證 jQuery學習之路（8）- 表單驗證插件-Validation Validation-jQuery表單驗證插件使用方法 jQuery插件之validation插件 jQuery插件之validation插件 jquery-validation.js驗證插件使用詳解 jquery插件講解：輪播（SlidesJs）+驗證（Validation）