jQuery Validation Plugin插件使用说明.docx

jQuery Validation Plugin是为了满足开发者对前台表单进行验证的一个插件，使用时只需要简单的引入jquery.js 和 jquery.validation.js即可。具体的网址请参考：/和/project/validate。在这里我们使用的版本是jquery-1.6.4.js和jquery.validate.js（1.9）基本用法基本的使用十分简单只需要调用$(#registForm).validate();这样的话，就会在表单registForm提交时对其进行验证，验证的规则采用的是默认设置。可以包含两个部分：设置验证的规则设置验证不通过的提示例如我们介绍一个注册实例，包含有三个属性名为userName,password,confirmPassWord三个文本框（由于在项目中使用了会使用struts标签，所以结合jquery使用时需要设置styleId）格式例如：html:text property=userName styleId=userName/html:text初始代码没有加任何验证，现在我们希望增加如下验证：userName：必填，长度是6-20个字节passWord：必填，长度为6-20个字节confirmPassWord：必填，长度为6-20个字节，且必须要和password相同。email ：必填，符合email格式。假设我们已经引入jquery和Validation的js类库。增加规则：在这里设置规则采用的是键值对的形式，键为对应dom。Validation插件本身封装了一下规则的方法，通过“规则名：Boolean”的形式就可以引用，比如email:true就表明会引用email的规则进行验证。注意这部分代码也需要添加到$().ready(function() {}中。$(# registForm).validate({rules: {//rules表明了开始声明验证规则userName: {required: true,// required为validation内置规则名minlength: 6, //最小长度maxlength: 20},//----最大长度passWord: {required: true,minlength: 6,maxlength: 20},confirmPassWord: {required: true,equalTo: #passWord},//----要求和某个值想等email: {required: true,email: true//----要求符合email格式}}});}下面就需要对应的提示消息：提示消息也会采用键值对的形式，键为对应dom。要针对上面规则的提示编写对应的提示，如果有的规则没有编写提示将会采用默认的提示。注意message应在$(#registForm).validate({});内部编写，和rules相同时一部分。messages: { userName: {required: 请输入用户名,minlength: 用户名长度不能小于6个字节,maxlength:用户名长度不能大于20个字节},passWord: {required: 请输入密码,minlength: 密码长度不能小于6个字节,maxlength:密码长度不能大于20个字节},confirmPassWord: {required: 请输入确认密码,equalTo: 确认密码与密码不同},email: {required: 请输入确认密码,email:请输入有效地电子邮件地址}}}自定义方法虽然说validation中内置了一些规则，如果我们的需求复杂，我们怎么满足呢？其实我们自定义规则。比如说，我们需要说用户名只能是中文字、英文字母、数字和下划线jQuery.validator.addMethod(validateUserName,function(value,element){returnthis.optional(element)||/^[\u0391-\uFFE5\w]+$/.test(value);},用户名只能包括中文字、英文字母、数字和下划线);然后我们在对应的rules里设置validateUserName：true就可以了。userName: {required: 请输入用户名,minlength: 用户名长度不能小于6个字节,maxlength:用户名长度不能大于20个字节,validateUserName：true}错误提示的位置默认情况下，错误提示是有validation框架生成一个lable标签，这个标签默认显示在所校验项的后部。如果想要改变错误提示的位置，可以在你要显示提示的地方增加一个div。例如我们在页面的底部增加了一个d