validateboostraptooltip表單驗證示例

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