最后还要为页面元素添加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; }
3 表单验证效果演示
至此，表单校验的代码编写和插件的应用已经全部完成。在浏览器中运行代码，显示效果如下图：
基本上满足现在大多数网站表单验证的要求，如果需要增加验证规则，只需要在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位" );