欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-03-07 16:53:31
前端表单校验： ......

前端表单校验：

 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>

上一篇： python re库入门(正则表达式)

下一篇： Python安装scrapy的正确姿势

推荐阅读