您的位置：首页 > Web前端 > JQuery

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

2018-01-11 11:18 661 查看

前端表单校验：

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航