网站开发常用jquery插件总结(四)验证插件validation

1 / 14 网站开发常用 jquery插件总结 (四 )验证插件 validation 网站开发常用 jQuery插件总结 (四）验证插件 validation (来自 : 海 达范文网 :网站开发常用 jquery 插件总结 (四 )验证插件 validation) 在网站开发过程中，有时我们需要验证用 户输入的信息是否符合我们的要求，所以我们会对用户提交的数据进行验证。验证分两次进行，一次是在客户端，一次是在服务端。客户端的验证可以提升用户的体验。 jquery 验证插件有很多，实现的功能也基本相同。本文介绍的只是 jquery验证插件中的一种 插件功能 简单实现客户端信息验证，过滤不符合要求的信息 官方地址 官方地址： http:/,有详细的插件使用说明 2 / 14 官方 demo： http:/validate/demo/ 使用方法 1.引用 js 样式，可自定义，简单的只需要添加 error样式，也可使用官方 demo中的样式。 .error color:red; margin-left:8px; 代码 $(document).ready(function() 3 / 14 / validate signup form on keyup and submit var validator = $(#signupform).validate( rules: firstname: required, username: required: true, minlength: 2 , password: required: true, minlength: 5 4 / 14 , password_confirm: required: true, minlength: 5, equalTo: #password , email: required: true, email: true, , dateformat: required, 5 / 14 terms: required , messages: firstname: 姓名不能为空 , username: required: 用户名不能为空 , minlength: (用户名只少由 0 字符组成 ) , password: required: 密码不能为空 , minlength: (密码只少由 0 字符组成 ) 6 / 14 , password_confirm: required: 确认密码不能为空 , minlength: (确认密码只少由 0 字符组成 ), equalTo: 秘密与确认密码不一致 , email: required: 邮箱不能为空 , email: 邮箱格式不正确 , dateformat: 请选择性别 , 7 / 14 terms: , / the errorPlacement has to take the table layout into account errorPlacement: function(error, element) if ( (:radio) ) ( ().next().next(); else if ( (:checkbox) ) ( (); else ( ().next(); , 8 / 14 / specifying a submitHandler prevents the default submit, good for the demo submitHandler: function() alert(submitted!); , / set this class to error-labels to indicate valid fields success: function(label) / set as text for IE ( ).addClass(checked); , highlight: function(element, errorClass) 9 / 14 $(element).parent().next().find(. + errorClass).removeClass(checked); ); ); 以上的代码只使用了插件提供的属性和方法。也可以自定义验证方法。如 $.(checkUserName, function(value) /value为验证的值，对应于元素 id /方法代码 , 用户名格式不正确 ); 使 用 自 定 义 方 法 也 非 常 简 单 ， 只 需 要 元素id:”checkUserName” 10 / 14 4.使用的 html 姓名 用户名 密码 11 / 14 确认密码 邮箱 性别 男 12 / 14 女 以阅读并同意网站条款 . 13 / 14 / 效果演示：验证插件 validate 测试 网站开发常用 jQuery插件总结 (二）弹出层插件 Lightbox_me 网站开发过程中，为了增加网站交互效果，我们有时需要在当前页面弹出诸如登陆、注册、设置等窗口。而这些窗口就是层，弹出的窗口就是弹出层。 jQuery中弹出层插件很多，但有些在 html5+css3 浏览器下，支持完美。而在例如 ie8一下的浏览器下显示不出应有的效果。例如插件在 ie8下就无法显示。 14 / 14 本 文 介 绍 的 插 件 Lightbox_me