validateboostraptooltip表單驗(yàn)證示例

Validate+Boostraptooltip 表單驗(yàn)證示例一、工具準(zhǔn)備：1、boostrap: 下載地址 /jquery:jQuery 版本需大于或等于 2、validate 及tooltip 使用教程：菜鳥教程地址：以下指示列出了一些常用配置項(xiàng)，比較重要的加紅區(qū)別。validate()的可選項(xiàng)描述代碼debug：進(jìn)行調(diào)試模式（表單不提交） 。$(".selector").validate({debug:true})把調(diào)試設(shè)置為默認(rèn)。$.validator.setDefaults({debug:true})submitHandler ：通過驗(yàn)證后運(yùn)行的函數(shù)，里面要加上表單提交的函數(shù)，否則表單不會(huì)提交。$(".selector").validate({submitHandler:function(form){$(form).ajaxSubmit();}})ignore：對(duì)某些元素不進(jìn)行驗(yàn)證。$("#myform").validate({ignore:".ignore"})rules：自定義規(guī)則， key:value 的形式，key是要驗(yàn)證的元素，value 可以是字符串或?qū)ο蟆?(".selector").validate({rules:{name:"required",email:{required:true,email:true}}})messages：自定義的提示信息，key:value 的形式，key 是要驗(yàn)證的元素， value 可以是字符串或函數(shù)。$(".selector").validate({rules:{name:"required",email:{required:true,email:true}},messages:{name:"Name 不能為空",email:{required:"E-mail 不能為空",email:"E-mail 地址不正確"}}})groups：對(duì)一組元素的驗(yàn)證，用一個(gè)錯(cuò)誤提示，用errorPlacement 控制把出錯(cuò)信息放在哪里。$("#myform").validate({groups:{username:"fnamelname"},errorPlacement:function(error,element){if(element.attr("name")=="fname"||element.attr("name")=="lname")error.insertAfter("#lastname");elseerror.insertAfter(element);},debug:true})Onubmit：類型 Boolean，默認(rèn) true，指定是否提交時(shí)驗(yàn)證。$(".selector").validate({onsubmit:false})onfocusout：類型 Boolean，默認(rèn) true，指定是否在獲取焦點(diǎn)時(shí)驗(yàn)證。$(".selector").validate({onfocusout:false})onkeyup：類型 Boolean，默認(rèn) true，指定是否在敲擊鍵盤時(shí)驗(yàn)證。$(".selector").validate({onkeyup:false})onclick：類型Boolean，默認(rèn)true，指定是否在鼠標(biāo)點(diǎn)擊時(shí)驗(yàn)證（一般驗(yàn)證checkbox、radiobox）。$(".selector").validate({onclick:false})focusInvalid：類型 Boolean，默認(rèn) true。提交表單后，未通過驗(yàn)證的表單（第一個(gè)或提交之前獲得焦點(diǎn)的未通過驗(yàn)證的表單）會(huì)獲得焦點(diǎn)。$(".selector").validate({focusInvalid:false})focusCleanup ：類型 Boolean，默認(rèn) false。當(dāng)未通過驗(yàn)證的元素獲得焦點(diǎn)時(shí)，移除錯(cuò)誤提示（避免和 focusInvalid一起使用）。$(".selector").validate({focusCleanup:true})errorClass：類型 String，默認(rèn) "error"。指定錯(cuò)誤提示的css 類名，可以自定義錯(cuò)誤提示的樣式。$(".selector").validate({errorClass:"invalid"})errorElement ：類型 String，默認(rèn) "label"。指定使用什么標(biāo)簽標(biāo)記錯(cuò)誤。$(".selector").validateerrorElement:"em"})wrapper：類型 String，指定使用什么標(biāo)簽再把上邊的errorELement 包起來。$(".selector").validate({wrapper:"li"})errorLabelContainer ：類型 Selector，把錯(cuò)誤信息統(tǒng)一放在一個(gè)容器里面。$("#myform").validate({errorLabelContainer:"#messageBox",wrapper:"li",submitHandler:function(){alert("Submitted!")}})showErrors：跟一個(gè)函數(shù)，可以顯示總共有多少個(gè)未通過驗(yàn)證的元素。$(".selector").validate({showErrors:function(errorMap,errorList){$("#summary").html("Yourformcontains"+this.numberOfInvalids()+"errors,seedetailsbelow.");this.defaultShowErrors();}})errorPlacement ：跟一個(gè)函數(shù)，可以自定義錯(cuò)誤放到哪里。$("#myform").validate({errorPlacement:function(error,element){error.appendTo(element.parent("td").next("td"));},debug:true})success：要驗(yàn)證的元素通過驗(yàn)證后的動(dòng)作， 如果跟一個(gè)字符串，會(huì)當(dāng)作一個(gè) css 類，也可跟一個(gè)函數(shù)。$("#myform").validate({success:"valid",submitHandler:function(){alert("Submitted!")}