最后还要为页面元素添加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: 650px; } legend{ text-align: center; font-size: 20px; } .item{ height: 56px; line-height: 30px; margin: 10px; } .item .item-label{ float: left; width: 80px; text-align: right; } .item-text{ float: left; width: 240px; height: 30px; padding: 9px 25px 9px 5px; margin-left: 10px; border: 1px solid #ccc; overflow: hidden; } .item-select{ float: left; height: 30px; border: 1px solid #ccc; margin-left: 10px; font-size: 14px; padding: 6px 0px; } .item-file{ float: left; height: 30px; margin-left: 10px; font-size: 14px; padding: 6px 0px; } .item-submit{ float: left; height: 30px; width: 50px; margin-left: 90px; font-size: 14px; } input.error{ border: 1px solid #E6594E; } input.highlight{ border: 1px solid #7abd54; } label.error{ float: left; height: 30px; line-height: 30px; font-size: 14px; text-align: left; margin-left: 5px; padding-left: 35px; color: red; background: url('../image/error.png') no-repeat left center; } label.tip{ float: left; height: 30px; line-height: 30px; font-size: 14px; text-align: left; margin-left: 5px; padding-left: 35px; color: #aaa; background: url('../image/tip.png') no-repeat left center; padding-left: 35px; } label.valid{ background: url('../image/valid.png') no-repeat left center; }
至此，表单验证就做好了，这里就不再展示了，看最前面即可。效果还可以，不过还可以更加完善，我对jQuery了解的也不太多，希望大家共同进步！
源码下载：验证插件validate