本文主要是介绍使用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插件实现表单校验的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
