jquery.validate验证介绍

可以调用$("#validateForm").valid();来判断是否全部验证通过(返回的为boolean类型)

jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持。说明：需要JQuery版本：1.2.6+步骤：1， 要导入相应的jQuery.js与jquery.validate.js文件<script src="jquery.js" type="text/javascript"></script><script src="jquery.validate.js" type="text/javascript">2， 在相应的字段上指定验证规则名称 *<input type="text" name="loginName" class="required">其中class="required"代表本字段必须要输入数据3， 指定要对表单进行验证<script type="text/javascript">    $(function(){        $("#testForm").validate();    });</script> 效果如下图：1.           基础知识1.1. 指定验证规则的方式1.1.1.   把验证规则写到字段元素的class属性中例：名称 *　<input type="text" name="loginName" class="required"><br>密  *　 <input type="password" name="password" class="required"><br>再次输入 <input type="password" name="password2"class="{equalTo: '[name=password]'} required"><br>生日　　  <input type="text" name="birthday" class="dateISO"><br>E-mail *<input type="text" name="email" class="email"><br>PAR(zip)<input type="file" name="resource" class="{accept: 'zip'}"> 说明：1，如果使用class="{}"的方式，必须引入包：jquery.metadata.js1.1.2.   调用validate()方法时传递字段的验证规则$(function() {    $("#testForm").validate({        rules: {            loginName:{                required: true,                min: 2            }   ,            password: {                required: true            },            password2: {                equalTo: "input[name=password]"            }        }    });});1.2. 内置的验证规则required:true                    必输字段remote:"check.php"              使用ajax方法调用check.php验证输入值email:true                      必须输入正确格式的电子邮件url:true                        必须输入正确格式的网址date:true                      必须输入正确格式的日期dateISO:true                    必须输入正确格式的日期(ISO)，例如：2010-01-01，2010/01/01 只验证格式，不验证有效性number:true                   必须输入合法的数字(负数，小数)digits:true                       必须输入整数creditcard:                      必须输入合法的信用卡号equalTo:"#field"                    输入值必须和#field相同accept: "gif|png|jpg"      输入拥有合法后缀名的字符串（上传文件的后缀），多个后缀之间用’|’隔开maxlength:5                    输入长度最多是5的字符串(汉字算一个字符)minlength:10                    输入长度最小是10的字符串(汉字算一个字符)rangelength:[5,10]                  输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)range:[5,10]                      输入值必须介于 5 和 10 之间max:5                        输入值不能大于5min:10                        输入值不能小于10说明：1， remote是远程验证：比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。2， 某些属性值中的引号不能省略，否则出错。如accept、equalTo等。1.3. 自定义验证规则除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的，语法 为：jQuery.validator.addMethod("name",function,message)其中:1， name为验证规则的名称2， function定义验证的规则。参数有?。返回值为?。3， message是验证失败时的提示信息。1.4. 指定错误提示内容1.4.1.   更改默认的提示内容jQuery.extend(jQuery.validator.messages, {    required: "必选字段",    remote: "请修正该字段",    email: "请输入正确格式的电子邮件",    url: "请输入合法的网址",    date: "请输入合法的日期",    dateISO: "请输入合法的日期 (ISO).",    number: "请输入合法的数字",    digits: "只能输入整数",    creditcard: "请输入合法的信用卡号",    equalTo: "请再次输入相同的值",    accept: "请输入拥有合法后缀名的字符串",    maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),    minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),    rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),    range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),    max: jQuery.validator.format("请输入一个最大为 {0} 的值"),min: jQuery.validator.format("请输入一个最小为 {0} 的值")扩展工具stringMinLength: jQuery.validator.format("请输入一个小于{0} 的字符串, 一个中文字符长度为2”),stringMaxLength: jQuery.validator.format("请输入一个大于} 的字符串, 一个中文字符长度为2”),string: “含特殊符号!”,byteRangeLength: "请确保输入的值在3-15个字节之间(一个中文字算2个字节)",stringCH: "只能输入汉字,一个汉字占两具字节",stringEN:”只能输入字母”  1.4.2.   个别表单改变提示内容（只对当前表单有效）方法一：<input type="file" name="parResource"class="{accept: 'zip', messages: {accept:'请选择正确的文件'}}"> 方法二：$(function() {    $("#testForm").validate({        messages:{            loginName: {required: "必选字段2"},            email: {                required: '必选字段22',                email: "请输入正确格式的电子邮件2"            }        }    });});1.5. 改变错误消息显示样式指定label.error的样式就可以了，如下：<style type="text/css">    label.error{        margin-left: 10px;        color: red;    }</style> 说明：label.error指class为error的label元素，如：<label for="resource" class="error">        这是汤阳光老师讲的，虽然这位老师很年轻，但是他的技术很高，以前学的知识很多，所以也有思路不清的地方，可是自从这位老师给我们讲课，我就感觉到他有一种对JAVA技术的灵性，无论是什么在他那里总能得到思想上的升华！真是佩服！ function DIYMethod(){    // 字符最小长度验证（一个中文字符长度为2）    jQuery.validator.addMethod("stringMinLength", function(value, element, param) {        var length = value.length;        for ( var i = 0; i < value.length; i++) {            if (value.charCodeAt(i) > 127) {                length++;            }        }        return this.optional(element) || (length >= param);    }, $.validator.format("长度不能小于{0}!"));     // 字符最大长度验证（一个中文字符长度为2）    jQuery.validator.addMethod("stringMaxLength", function(value, element, param) {        var length = value.length;        for ( var i = 0; i < value.length; i++) {            if (value.charCodeAt(i) > 127) {                length++;            }        }        return this.optional(element) || (length <= param);    }, $.validator.format("长度不能大于{0}!"));     // 字符验证    jQuery.validator.addMethod("string", function(value, element) {        return this.optional(element) || /^[\Α-\￥\w]+$/.test(value);    }, "不允许包含特殊符号!");     // 中文字两个字节    jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {        var length = value.length;        for(var i = 0; i < value.length; i++){            if(value.charCodeAt(i) > 127){                length++;            }        }        return this.optional(element) || ( length >= param[0] && length <= param[1] );    }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");     // 只能输入中文    jQuery.validator.addMethod("stringCH", function(value, element) {        var length = value.length;        for(var i = 0; i < value.length; i++){            if(value.charCodeAt(i) > 127){                length++;            }        }        return this.optional(element) || /[^u4E00-u9FA5]/g.test(value);    }, "只能输入汉字,一个汉字占两具字节");          // 只能输入26个字母         jQuery.validator.addMethod("stringEN", function(value, element) {        var length = value.length;        for(var i = 0; i < value.length; i++){            if(value.charCodeAt(i) > 127){                length++;            }        }        alert(length);        return this.optional(element) || /^[A-Za-z]+$/g.test(value);    }, "只能输入字母");}