jquery validate 基础（二）之validate

在validate（）方法里，我们可以传递很多参数。从今天开始，我就会逐一介绍。

· debug：默认值为 false。

如果将 debug 设置成 true，则表单即使验证通过了，也不会提交。debug 设置成true，一般错误信息也会显示在 console（chrome 直接按 F12， Firefox 安装 firebug 后，按 F12） 里，如 表单元素没有 name 属性等。

$('#myForm').validate({ debug: true });

 

· submitHandler：接收一个函数

如果表单的全部元素验证通过后，会回调此函数。在这个函数里，我们可以将表单用异步（ajax）的方式提交，而不刷新当前页面；或提交用户名时，我们需要先异步验证一下用户名是否存在，如果不存在，才进行表单提交等等，都可以在这个函数里进行操作。

$('#myForm').validate({

submitHandler: function(form, event) {

$(form).ajaxSubmit();//异步提交表单

/**

    * $.ajax();//先验证异步验证用户名是否存在，再提交表单

  
 * form.submit();

  */

}

});

 

· invalidHandler：接收一个函数

如果表单元素验证不通过时，会回调此函数。此函数里，可以获取验证不通过的元素个数及错误信息，可以提示用户。

$('#myForm').validate({

invalidHandler:function(event,validator){

//取得无效元素的数量    

console.info(validator.numberOfInvalids());
    
// 取得无效元素的错误提示信息   

console.info(validator.errorMap);
}

});

 

. ignore：默认值为 ‘:hidden’（隐藏域的值不验证）

被忽略的元素将不会被验证。jquery 选择器的写法，如有多个元素，用 逗号（,）隔开。

$(function() {

$('#myForm').validate({

ignore: '.ignore, .hello' //过滤 元素的class 中含有 ignore 和 hello 的

});
});

 

· onsubmit：默认值为 true

在触发表单的 submit 事件时，验证表单元素。如果设置成 false，则 触发 submit 事件时，不验证表单。那么在别的函数时，我们需要手动调用表单验证方法 valid()，此函数返回一个布尔值，true表示验证通过；false 表示验证不通过。

$(function() {   

$('#myForm').validate({
       
onsubmit: false

});
});

<input type="button" name="btnSave" value="保存" onclick="validateForm()"/>

function validateForm() {

if($('#myForm').valid()) { //手动验证表单

$('#myForm').get(0).submit();  //提交表单

return;

}

     alert('表单验证不通过');

}

 

· onfocusout：接收 false 或 函数

在元素（除 radio、checkbox）失去焦点后，会回调此函数。如果设置成 false，不回调。设置成 true，报错。比如，年龄必填后，我们还可以加一些业务验证（当然这些验证完全可以用 validate，这里只是做一个例子）。

$(function() {   

$('#myForm').validate({

onfocusout: function(element, event) {

if($(element).attr('id')=='age'){<
d6fa
span style="color:rgb(0,0,128);"> //是年龄的文本框

  var age = $(element).val(); 

         
if(!(age && !isNaN(age) && age>0 && age<150)) {    

      alert('输入的年龄不合法');    

       }
           
}
       
}
   });
});

 

· onkeyup：接收 false 或 函数

和 onfocusout 一样，只是在 keyup 事件时，回调此函数。

 

· onclick：接收 false 或 函数

和 onfocusout 一样，只是在 click 事件时，回调此函数。主要针对 radio 和 checkbox 元素。

 

· focusInvalid：默认值为 true

当元素验证不通过时，第一个不通过元素会获得焦点。如果设置成 false 时，则不会获得焦点。

想要获取焦点，除了要配置 focusInvalid 为 true 之外，还要触发 submit 事件 或 调用 validator.focusInvalid() 。

1）触发 submit 事件，提单表单即可；调用 valid() 不行。

2） 调用 validator.focusInvalid()。配置 invalidHandler，

invalidHandler: function(event, validator) {    

validator.focusInvalid();
}

 

· focusCleanup：默认值为 false

当设置成 true 时，验证不通过的元素获取焦点时，元素后的错误提示信息将不显示。

 

· errorClass：默认值为 ‘error’

元素验证不通过时，给错误信息增加一个样式。只能增加一个样式，不能增加多个。如果用逗号隔开，默认选最后一个。

$(function() {   

$('#myForm').validate({         

errorClass: 'greenError'

});
});

增加 greenError 样式

.greenError {    

color: green;

}

 

· validClass

验证通过的元素，增加 class。支持多个 class，多个用逗号隔开。

$(function() {   

$('#myForm').validate({  

validClass: 'bold, tmp'

});
});

增加样式

.bold {    

font-weight: bold;

}

.tmp {

border: 1px dashed #f00;

}

 

· errorElement：默认值为 ‘label’

元素验证不通过时，错误信息会放在 label 元素里。如：

<label id="username-error" class="error" for="username">必须填写</label>

如果配置成 ‘span’，则错误信息会放在 span 里，如：

<span id="username-error" class="error">必须填写</span>

 

· wrapper：默认值为 window

错误的提示信息被什么元素包裹。如果设置成 ‘li’，则提示信息如：

<li><label id="username-error" class="error" for="username" style="display: inline;">必须填写</label></li>

 

· errorLabelContainer

将所有的错误信息，放在该元素中。支持 jquery 选择器写法。

$(function() {   

$('#myForm').validate({
       
wrapper: 'li',  

errorLabelContainer: '#container'

});
});

html内容：

<div id="container" style="border: 1px dashed #f00;"></div>

· errorContainer

当有元素验证不通过时， 配置的元素会显示；当元素全部验证通过时，配置的元素将隐藏。

 

· showErrors：接收一个函数

自定义的一个错误信息的显示。当验证表单时，会回调此函数。函数接收两个参数 errorMap 和 errorList。其中 errorList 是一个数组，数组中的每个对象都会有 message（错误信息） 和 element（验证不通过的元素）。

 

· errorPlacement：接收一个函数

自定义错误信息显示的位置。正常情况下，错误信息显示的元素的后面。配置 errorLabelContainer 后，此配置无效。

$(function() {   

$('#myForm').validate({       

rules: {           

hobby: 'required'       // name 为 hobby 的元素，必填

},          

errorPlacement: function(error, element) {           

if($(element).attr('name')=='hobby') {       //元素的name为 hobby        

var es = $(':input[name=hobby]');    

// 在最后一个元素后，增加错误元素       

$(error).insertAfter(es[es.length - 1].nextSibling);    

} else {      

// 其它元素，在元素的后面增加错误信息

          
$(error).insertAfter(element);      

      }       

}
    });

});

html内容

<span>爱好：</span>

<input type="checkbox" name="hobby"/>吃 

<input type="checkbox" name="hobby"/>喝 

<input type="checkbox" name="hobby"/>玩 

 

· success：接收一个 字符串 或 函数

如果元素验证通过后，原来的错误提示所在的 label 上增加一个样式，或自定义样式（函数）。

$(function() {   

$('#myForm').validate({       

   success: 'success'

});
});

html内容

.success {    

border: 1px solid red;

}

函数形式

$(function() { 

$('#myForm').validate({       

success: function(label) {            

//在验证通过的元素后，增加验证通过的提示

label.addClass('success').text('验证通过'); 

}   

});

});

 

· highlight：默认是增加 errorClass 样式，接收一个函数

当元素验证不通过时，会回调此函数。

$(function() {   

$('#myForm').validate({            

  highlight: function(element, errorClass, validClass) {           

$(element).fadeOut(function() {               

$(element).fadeIn();           

});       

}

});
});

 

· unhighlight：默认是去除 errorClass 样式，接收一个函数

与 highlight 正好相反，当元素验证通过时，回调此方法。

 

· ignoreTitle：默认值为false

设置成 true 后，验证不通过的元素，会将该元素的 title 属性，作为错误的提示信息。如果该元素没有 title 属性，则显示原来的错误提示信息。