JQurey Validation表单验证使用详解

是一款优秀的插件，它能对客户端表单进行验证，并且提供了许多可以定制的属性和方法，良好的扩展性。本文就是通过讲解这个实例来理解Validation的应用。

本实例涉及到的验证有：

用户名：长度、字符验证，重复性ajax验证（是否已存在）。

密码：长度验证，重复输入密码验证。

邮件：邮件地址验证。

固定电话：中国大陆固定电话号码验证。

手机号：中国大陆手机号码验证。

网址：网站URL地址验证。

日期：标准日期格式验证。

数字：整数、正整数验证，数字范围验证。

身份证：大陆身份证号码验证。

邮政编码：大陆邮政编码验证。

文件：文件类型（后缀）验证，如只允许上传图片。

IP：IP地址验证。

验证码：验证码ajax验证。

使用方法：

1、准备jquery和jquery.validate插件

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

2、准备CSS样式

页面样式我不再详述，大家可以自己写个样式，也可以参看DEMO的页面源代码。这里要强调的关键样式是要显示验证信息的样式

label.error{color:#ea5200; margin-left:4px; padding:0px 20px;
background:url(images/unchecked.gif) no-repeat 2px 0 }
label.right{margin-left:4px; padding-left:20px; background:
url(images/checked.gif) no-repeat 2px 0} 

3、XHTML

<form id="myform" action="#" method="post">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable">
 <tr class="table_title">
  <td colspan="2">jquery.validation 表单验证</td>
 </tr>
 <tr>
  <td width="22%" align="right">用户名：</td>
  <td><input type="text" name="user" id="user" class="input required" />
  <p>用户名为3-16个字符，可以为数字、字母、下划线以及中文</p></td>
 </tr>
 <tr>
  <td align="right">密码：</td>
  <td><input type="password" name="pass" id="pass" class="input required" />
  <p>最小长度:6 最大长度:16</p>
  </td>
 </tr>
 <tr>
  <td align="right">确认密码：</td>
  <td><input type="password" name="repass" class="input required" /></td>
 </tr>
</table>
</form>

限于篇幅，本文的只截取了实例中HTML代码的一小部分，详细XHTML代码可参看页面DEMO源代码。值得一提的是，我在给了标签一个“required”类样式，下文将会提到它的作用。