对于初学者而言，html表单验证是一项极其琐碎的事情。要做好表单验证，需要准备以下基本要素：
1.html表单结构；
2.js控制表单元素的各种行为，包括鼠标点击，鼠标离开，键盘的输入等；
3.css为表单元素添加样式，包括默认的初始样式，以及触发元素行为后的变化样式。
html表单结构的建立很简单，重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息。这里我参考了百度，163邮箱，京东等互联网企业的注册页面，总结出表单验证需要的提示信息分类如下：
1.表单元素获取焦点后的帮助信息提示（用英文单词tip来表示）；
2.表单元素验证通过时的成功信息提示（用valid来表示）；
3.表单元素验证失败时的错误信息提示（用error来表示）。
如果不借助任何插件，我们需要花费大量的时间去编写不同类型的信息提示，考虑各种样式间的来回切换，以及编写一些基本的验证规则。名言曰："我之所以看得更远，是因为我站在巨人的肩膀上"。何不直接利用一些已有的成熟插件，来帮助我们快速的编写一个表单验证功能，这样既能提高效率，又能让我们抽出时间专注于我们自己的逻辑。
以jquery validate插件为例，下面我们来实现一个功能丰富且界面漂亮的表单验证例子。
jquery validate插件，依赖jquery编写（jquery.js）；在实现的过程中，为了更好地效果，我拓展了原有的功能(jquery.validate.extend.js)；所以在文档头部需要引入的文件有三个：
<script src="jquery.js"></script> <script src="lib/jquery.validate.min.js"></script> <script src="lib/jquery.validate.extend.js"></script>
首先是html表单结构的代码，这里每个表单元素都用一个div结构来划分，其中包含的label标签用来标记元素的名称。使用label标签的好处是为鼠标用户改进了可用性。当在label元素内点击文本时，浏览器就会自动将焦点转到和label相关的表单控件上。注意，每个需要校验的表单元素都应该设置id和name属性，方便在使用插件时将元素绑定校验规则和校验信息。
<form action="#" method="post" id="regForm"> <fieldset> <legend>jquery-validate表单校验验证</legend> <div class="item"> <label for="username" class="item-label">用户名:</label> <input type="text" id="username" name="username" class="item-text" placeholder="设置用户名" autocomplete="off" tip="请输入用户名"> </div> <div class="item"> <label for="password" class="item-label">密码:</label> <input type="password" id="password" name="password" class="item-text" placeholder="设置密码" tip="长度为6-16个字符"> </div> <div class="item"> <label for="password" class="item-label">确认密码:</label> <input type="password" name="repassword" class="item-text" placeholder="设置确认密码"> </div> <div class="item"> <label for="amt" class="item-label">金额:</label> <input type="text" id="amt" name="amt" class="item-text" placeholder="交易金额" tip="交易金额必须大于0，且最多有两位小数"> </div> <div class="item"> <input type="submit" value="提交" class="item-submit"> </div> </fieldset> </form>
接着，我对jquery validate插件进行了功能扩展。jquery validate插件默认只提供了校验正确及错误时的提示，缺少我们常见的帮助信息提示。为了解决这个问题，我仔细研究了插件的源码，发现插件本身提供了onfocusin,onfocusout接口。我们可以修改这两个接口，实现用户鼠标点击或选择元素时，提示帮助信息；在用户鼠标离开元素时，移除帮助信息。
此外，jquery validate默认提供表单元素输入时的实时校验，因为上面在输入时只提示用户帮助信息，故需要关闭输入的实时校验，这里对应的是插件的onkeyup。
具体代码在jquery.validate.extend.js中编写，如下：
/*******************************插件新功能-设置插件validator的默认参数*****************************************/ $.validator.setDefaults({ /*关闭键盘输入时的实时校验*/ onkeyup: null, /*添加校验成功后的执行函数--修改提示内容，并为正确提示信息添加新的样式(默认是valid)*/ success: function(label){ /*label的默认正确样式为valid，需要通过validClass来重置，否则这里添加的其他样式不能被清除*/ label.text(‘‘).addClass(‘valid‘); }, /*重写校验元素获得焦点后的执行函数--增加[1.光标移入元素时的帮助提示,2.校验元素的高亮显示]两个功能点*/ onfocusin: function( element ) { this.lastActive = element; /*1.帮助提示功能*/ this.addWrapper(this.errorsFor(element)).hide(); var tip = $(element).attr(‘tip‘); if(tip && $(element).parent().children(".tip").length === 0){ $(element).parent().append("<label class=‘tip‘>" + tip + "</label>"); } /*2.校验元素的高亮显示*/ $(element).addClass(‘highlight‘); // Hide error label and remove error class on focus if enabled if ( this.settings.focusCleanup ) { if ( this.settings.unhighlight ) { this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass ); } this.hideThese( this.errorsFor( element ) ); } }, /*重写校验元素焦点离开时的执行函数--移除[1.添加的帮助提示,2.校验元素的高亮显示]*/ onfocusout: function( element ) { /*1.帮助提示信息移除*/ $(element).parent().children(".tip").remove(); /*2.校验元素高亮样式移除*/ $(element).removeClass(‘highlight‘); /*3.替换下面注释的原始代码，任何时候光标离开元素都触发校验功能*/ this.element( element ); /*if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) { this.element( element ); }*/ } });
下一步就是使用插件为表单绑定校验规则和校验信息，对应插件的validate方法，该方法的参数为一个包含键值对的对象。其中最常用的有rules，messages。其中rules用来定义校验规则，常见的校验规则有：required(是否必填)，minlength(最小长度)，maxlength(最大长度)，email(email格式规则)，url(url格式规则)，date(date格式规则)，rangelength(给定长度范围规则)，equalTo(要求元素等于另一元素例如equalsTo:"#password");messages用来给定校验信息。具体使用方法在下面例子中有所体现：
<script> $(document).ready(function(){ $("#regForm").validate({ rules: { username:{ required: true, minlength: 2 }, password:{ required: true, minlength: 6, maxlength: 16 }, repassword:{ required: true, equalTo: "#password" }, amt: { required: true, amtCheck: true } }, messages:{ username:{ required: "用户名不能为空", minlength: "用户名的最小长度为2" }, password:{ required: "密码不能为空", minlength: "密码长度不能少于6个字符", maxlength: "密码长度不能超过16个字符" }, repassword:{ required: "确认密码不能为空", equalTo: "确认密码和密码不一致" }, amt: { required: "金额不能为空" } } }); }); </script>
最后还要为页面元素添加css样式。默认错误显示标签为label，对应的错误样式为label.error。上面在jquery.validate.extend.js文件中，有一个success函数需要说明一下。这个函数是在校验成功的时候执行的，我们在函数中为label提示标签添加了校验正确对应的样式label.valid。因此在css中如果要美化信息提示，需要对label的error,valid样式进行设计。此外我们还添加了一个class为tip的label标签，该标签只在校验元素获得焦点时生成。为此，还需要设置label的tip样式。具体如下：
body{
font-family: Microsoft Yahei;
font-size: 15px;
}
fieldset{ width: 680px; }
legend{ margin-left: 8px; }
.item{
height: 56px;
line-height: 36px;
margin: 10px;
}
.item .item-label{
float: left;
width: 80px;
text-align: right;
}
.item-text{
float: left;
width: 244px;
height: 16px;
padding: 9px 25px 9px 5px;
margin-left: 10px;
border: 1px solid #ccc;
overflow: hidden;
}
.item-select{
float: left;
height: 34px;
border: 1px solid #ccc;
margin-left: 10px;
font-size: 14px;
padding: 6px 0px;
}
.item-submit{
margin-left: 88px;
}
input.error{
border: 1px solid #E6594E;
}
input.highlight{
border: 1px solid #7abd54;
}
label.error,label.tip{
float: left;
height: 32px;
line-height: 32px;
font-size: 14px;
text-align: left;
margin-left: 5px;
padding-left: 20px;
color: red;
background: url(‘error.png‘) no-repeat left center;
}
label.tip{
color: #aaa;
background: url(‘tip.png‘) no-repeat left center;
}
label.valid{
background: url(‘valid.png‘) no-repeat left center;
width: 32px;
}
至此，表单校验的代码编写和插件的应用已经全部完成。在浏览器中运行代码，显示效果如下图：
基本上满足现在大多数网站表单验证的要求，如果需要增加验证规则，只需要在jquery.validate.extend.js中增加校验规则即可，例子如下：
/*******************************插件字段校验*****************************************/ $.validator.addMethod( "amtCheck", function(value, element){ /*var dotPos = value.indexOf(‘.‘); return value > 0 && dotPos < 0 && (dotPos > 0 && value.substring(dotPos + 1) <= 2);*/ return value && /^\d*\.?\d{0,2}$/.test(value); }, "金额必须大于0且小数位数不超过2位" );
需要完整代码的可以联系本人，微信号：13269087835。
jquery validate表单验证插件的基本使用方法及功能拓展
原文：http://www.cnblogs.com/wulei-blog/p/4841100.html