接着我们通过js来实现对表单元素的校验。在校验之前，我对jquery validate插件进行了功能扩展，对默认的选项进行了重写覆盖。jquery validate插件默认只提供了校验正确及错误时的提示，缺少我们常见的帮助信息提示。为了解决这个问题，我仔细研究了插件的源码，发现插件本身提供了onfocusin(校验元素获得焦点时调用)和onfocusout(校验元素失去焦点时调用)这两个函数。通过修改默认参数的这两个接口，可以实现党用户鼠标点击或选择元素时(即元素获得焦点)，提示帮助信息；在用户鼠标离开元素时(即元素失去焦点)，移除帮助信息。
此外，jquery validate默认提供表单元素输入时的实时校验，因为我们要求在输入时只提示用户帮助信息，故需要关闭输入的实时校验，为此我们将默认参数中的onkeyup设置为null。
具体的扩展改进代码我放到了新增js脚本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>" + 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 ); }*/ } });
完善插件的功能后，现在就是重头戏——使用插件为表单元素绑定校验规则和校验信息。jquery validate插件提供validate方法实现form表单的元素校验，该方法的参数是一个包含键值对的对象。其中最常用的键有rules(为不同元素定义校验规则)，messages(为不同元素定义错误提示信息)，success(校验正确后的字符串或者是执行函数)。常见的校验规则有：required(是否必填)，minlength(最小长度)，maxlength(最大长度)，email(email格式规则)，url(url格式规则)，date(date格式规则)，rangelength(给定长度范围规则)，equalTo(要求元素等于另一元素例如equalsTo:"#password")。下面的代码呈现了如何对表单中的用户名、密码等字段绑定校验规则：
<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>
2.3 表单验证css样式