码迷,mamicode.com
首页 > Web开发 > 详细

使用jQuery的validation插件实现表单校验

时间:2018-01-11 15:59:28      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:mes   oct   之间   10个   html   red   set   邮箱   put   

前端表单校验:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单校验(使用validation插件实现)</title>
 6     <script src="../jslib/jquery-1.11.0.js"></script>
 7     <script src="../jslib/jquery.validate.js"></script>
 8     <script src="../jslib/messages_zh.js"></script>
 9 
10     <script>
11         $(function () {
12             $("#formid").validate({
13                 rules:{
14                     username:{
15                         required:true
16                     },
17                     password:{
18                         required:true,
19                         rangelength:[6,10]
20                     },
21                     repassword:{
22                         required:true,
23                         equalTo:"[name=‘password‘]"
24                     },
25                     height:{
26                         required:true,
27                         min:[180]
28                     },
29                     age:{
30                         required:true,
31                         range:[18,56]
32                     }
33                 },
34                 messages:{
35                     username:{
36                         required:"不能为空"
37                     },
38                     password:{
39                         rangelenght:"密码长度必须在在6-10个字符之间"
40                     },
41                     height:{
42                         min:"身高必须在180以上"
43                     },
44                     age:{
45                         range:"年龄必须在在18岁到56岁之间"
46                     }
47                 }
48             });
49         });
50     </script>
51 </head>
52 <body>
53 <form id="formid" action="#">
54 
55     <!--不能为空-->
56     用户名:<input type="text" name="username"/> <br/>
57 
58     <!--长度在6-10个字符之间-->
59     密码:<input type="text" name="password"/> <br />
60 
61     重复密码:<input type="text" name="repassword"/> <br />
62 
63     <!--大于180cm-->
64     身高:<input type="text" name="height"/> <br />
65 
66     <!--在18岁到56岁之间-->
67     年龄:<input type="text" name="age"/> <br />
68 
69     邮箱:<input type="text" name="email"/> <br />
70 
71     <input type="submit" value="提交"/>
72 </form>
73 </body>
74 </html>

使用jQuery的validation插件实现表单校验

标签:mes   oct   之间   10个   html   red   set   邮箱   put   

原文地址:https://www.cnblogs.com/gdwkong/p/8267451.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!