jQuery Validate 表单验证

在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交，我们可以通过自己编写JavasScript代码来验证，但是有时数据量过多时就会有些难度了。基于jQuery的jquery.validate验证框架帮我们解决了困难，我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，而且对国际化也有非常好的支持。

今天记录的就是用此插件来实现表单验证，效果图：

1、获取JS文件：http://jqueryvalidation.org/，这个插件的用法就不再多讲了，如不熟悉或者还没用过的可以通过官网了解也可以搜索jquery validate中文API，此文仅仅记录如何实现上图效果。

2、导入JS

1 <script src="test/jquery.js" type="text/javascript"></script>
2 <script src="test/jquery.validate.js" type="text/javascript"></script>

3、创建表单

01 <fieldset style="width:700px; margin:0 auto;">
02     <legend>用户注册</legend>
03     <form id="signupForm" method="get" action="">
04         <p>
05             <label for="firstname">用户名：</label>
06             <input id="firstname" name="firstname" type="text" />
07             <span class="red">*</span>
08         </p>
09         <p>
10             <label for="realname">真实名：</label>
11             <input id="realname" name="realname" type="text" />
12         </p>
13         <p>
14             <label for="password">密　码：</label>
15             <input id="password" name="password" type="password" />
16             <span class="red">*</span>
17         </p>
18         <p>
19             <label for="confirm_password">确　认：</label>
20             <input id="confirm_password" name="confirm_password" type="password" />
21             <span class="red">*</span>
22         </p>
23         <p>
24             <label for="email">邮　箱：</label>
25             <input id="email" name="email" type="text" />
26             <span class="red">*</span>
27         </p>
28         <p>
29             <label for="tel">电　话：</label>
30             <input id="tel" name="tel" type="text" />
31         </p>
32         <p>
33             <label for="address">地　址：</label>
34             <input id="address" name="address" type="text" />
35         </p>
36         <p>
37             <label for="idcard">证件号：</label>
38             <input id="idcard" name="idcard" type="text" />
39         </p>
40         <p>
41             <label for="degree">学　历：</label>
42             <select id="degree" name="degree">
43                 <option value="-1">请选择</option>
44                 <option value="1">小学</option>
45                 <option value="2">中学</option>
46                 <option value="3">大专</option>
47                 <option value="4">本科</option>
48                 <option value="5">学士</option>
49                 <option value="6">硕士</option>
50                 <option value="7">博士</option>
51             </select>
52         </p>
53         <p>
54             <label for="sex">性　别：</label>
55             <input type="radio" id="rdoFemale" name="sex" />男
56             <input type="radio" id="rdoMale" name="sex" />女
57             <input type="radio" id="rdoSecret" name="sex" />保密
58         </p>
59         <p>
60             <input id="read" name="read" type="checkbox" /><label for="read">同意相关条约</label>
61         </p>
62         <p>
63             <input class="submit" type="submit" value="Register"/>
64         </p>
65     </form>
66 </fieldset>

4、表单初始化样式

1 .red{ color:red;}
2 .submit{ width:80px;}
3 input{height:22px; padding:2px;}

5、验证代码

01 $(document).ready(function() {
02
03     //设置默认属性
04     $.validator.setDefaults({
05         submitHandler: function(form) {
06             form.submit();
07        }
08     }),
09
10     //开始验证
11     $("#signupForm").validate({
12         rules: {
13