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

Posted gdwkong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用jQuery的validation插件实现表单校验相关的知识,希望对你有一定的参考价值。

前端表单校验:

 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插件实现表单校验的主要内容,如果未能解决你的问题,请参考以下文章

jquery validate表单验证

jQuery插件—validation实现表单校验

jquery插件-表单验证插件-validator对象

jQuery表单验证插件——validation(实现行为和结构分离)

jQuery学习jQuery插件的使用与写法(表单验证插件-validation)

jQuery插件 -- 表单验证插件jquery.validate.js