jQuery Validate表单验证插件实现代码(3)

  最后还要为页面元素添加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表单验证插件实现代码

  基本上满足现在大多数网站表单验证的要求,如果需要增加验证规则,只需要在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位" );

以上所述是小编给大家介绍的jQuery Validate表单验证插件实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyxjys.html