(轉)強大的JQuery表單驗證插件 FormValidator使用介紹

相關內容簡體繁體

(轉)強大的JQuery表單驗證插件 FormValidator使用介紹

本文轉載自查看原文 2014-12-10 16:45 13588 js/ jquery

jQuery formValidator表單驗證插件是客戶端表單驗證插件。
在做B/S開發的時候，我們經常涉及到很多表單驗證，例如新用戶注冊，填寫個人資料，錄入一些常規數據等等。在這之前，頁面開發者（JavaScript開發者）需要編寫大量的JavaScript來進行表單元素的校驗，而這些校驗在平時開發中不停的重復書寫。
常見的校驗如不能為空，必須滿足長度要求，必須為數字，必須為Email等等。一般要判斷的表單元素比較多，開發過程就顯得枯燥無味——重復的代碼不斷重復，而且可能還要兼容多種瀏覽器，更多的考慮因素使人頭疼不已。由於每個要校驗的頁面雖然邏輯基本相同，但是在大多數情況下，出於種種原因，開發者寧願再編寫一套JS文件，為了便於管理。
jQuery formValidator表單插件致力於改善這一過程。你只關心業務邏輯，而無需關系實現過程,只需簡單的配置，無需寫代碼就能實現表單的檢驗。它包括常規檢驗功能和可擴展校驗功能。針對每個表單元素你只需要寫一行配置信息就能完成校驗。而這些配置信息無需寫入表單元素，實現了js代碼和html代碼的分離。這樣做的好處，使B/S開發過程中，分工更加明確，頁面設計着只需關心他的頁面（設計的時候不必擔心把腳本弄壞了），javascript開發者只需關心腳本的開發。
而插件本身包含的校驗方式可以有無數種，只要你擴展正則表達式和函數。本插件於同類校驗插件最大的區別：校驗功能可以擴展；實現了校驗代碼於html代碼的完全分離；你只需寫一行配置信息就能完成一個表單元素的所有校驗。插件本身提供了很多回調函數，使調用者能最大限度的發揮自己的想象能力來完成自己的業務需求。在同一個頁面你可以擁有很多個校驗組，你只需在提交的按鈕那里調用
return jQuery.formValidator.pageIsValid('校驗組號') 來完成多個組的校驗，互不干擾。
插件具備跨瀏覽器的能力。目前在ie和ff兩種瀏覽器下調試通過，你不用再考慮在多瀏覽器下如何兼容，jQuery formValidator幫你做到了這些。

1.首先在項目中添加必備js與css

2.代碼中添加引用（必備引用）

代碼如下:

3.<body>中要驗證的標簽（做一些常用的演示）

代碼如下:

 
            001. 
            <table border="0px" style="font-size:12px"> 
           
            002. 
            <tr> 
           
            003. 
            <td colpan="3"><input type="submit" name="button" id="button" value="提交" /></td> 
           
            004. 
            </tr> 
           
            005. 
            <tr> 
           
            006. 
            <td align="right">身份證(正則表達式庫):</td> 
           
            007. 
            <td><input name="sfz" type="text" id="sfz" /></td> 
           
            008. 
            <td><div id="sfzTip" style="width:300px"></div></td> <!--必須注意這里提示驗證信息中的div的id值，跟要驗證控件中的id值多了一個Tip，下面的都是這樣。必須多的是Tip，也必須要多。--> 
           
            009. 
            </tr> 
           
            010. 
            <tr> 
           
            011. 
            <td align="right">身份證(外部函數):</td> 
           
            012. 
            <td><input type="text" id="sfz1" style="width:120px" /></td> 
           
            013. 
            <td><div id="sfz1Tip" style="width:300px"></div></td> 
           
            014. 
            </tr> 
           
            015. 
            <tr> 
           
            016. 
            <td align="right">整數:</td> 
           
            017. 
            <td><input type="text" id="zs" style="width:120px" /></td> 
           
            018. 
            <td><div id="zsTip" style="width:300px"></div></td> 
           
            019. 
            </tr> 
           
            020. 
            <tr> 
           
            021. 
            <td align="right">正整數:</td> 
           
            022. 
            <td><input type="text" id="zzs" style="width:120px" /></td> 
           
            023. 
            <td><div id="zzsTip" style="width:300px"></div></td> 
           
            024. 
            </tr> 
           
            025. 
            <tr> 
           
            026. 
            <td align="right">負整數:</td> 
           
            027. 
            <td><input type="text" id="fzs" style="width:120px" /></td> 
           
            028. 
            <td><div id="fzsTip" style="width:300px"></div></td> 
           
            029. 
            </tr> 
           
            030. 
            <tr> 
           
            031. 
            <td align="right">數字:</td> 
           
            032. 
            <td><input type="text" id="sz" style="width:120px" /></td> 
           
            033. 
            <td><div id="szTip" style="width:300px"></div></td> 
           
            034. 
            </tr> 
           
            035. 
            <tr> 
           
            036. 
            <td align="right">正數（正整數 + 0）:</td> 
           
            037. 
            <td><input type="text" id="zs1" style="width:120px" /></td> 
           
            038. 
            <td><div id="zs1Tip" style="width:300px"></div></td> 
           
            039. 
            </tr> 
           
            040. 
            <tr> 
           
            041. 
            <td align="right">負數（負整數 + 0）:</td> 
           
            042. 
            <td><input type="text" id="fs" style="width:120px" /></td> 
           
            043. 
            <td><div id="fsTip" style="width:300px"></div></td> 
           
            044. 
            </tr> 
           
            045. 
            <tr> 
           
            046. 
            <td align="right">浮點數:</td> 
           
            047. 
            <td><input type="text" id="fds" style="width:120px" /></td> 
           
            048. 
            <td><div id="fdsTip" style="width:300px"></div></td> 
           
            049. 
            </tr> 
           
            050. 
            <tr> 
           
            051. 
            <td align="right">正浮點數:</td> 
           
            052. 
            <td><input type="text" id="zfds" style="width:120px" /></td> 
           
            053. 
            <td><div id="zfdsTip" style="width:300px"></div></td> 
           
            054. 
            </tr> 
           
            055. 
            <tr> 
           
            056. 
            <td align="right">負浮點數:</td> 
           
            057. 
            <td><input type="text" id="ffds" style="width:120px" /></td> 
           
            058. 
            <td><div id="ffdsTip" style="width:300px"></div></td> 
           
            059. 
            </tr> 
           
            060. 
            <tr> 
           
            061. 
            <td align="right">非負浮點數（正浮點數 + 0）:</td> 
           
            062. 
            <td><input type="text" id="fffds" style="width:120px" /></td> 
           
            063. 
            <td><div id="fffdsTip" style="width:300px"></div></td> 
           
            064. 
            </tr> 
           
            065. 
            <tr> 
           
            066. 
            <td align="right">非正浮點數（負浮點數 + 0）:</td> 
           
            067. 
            <td><input type="text" id="fzfds" style="width:120px" /></td> 
           
            068. 
            <td><div id="fzfdsTip" style="width:300px"></div></td> 
           
            069. 
            </tr> 
           
            070. 
            <tr> 
           
            071. 
            <td align="right">顏色:</td> 
           
            072. 
            <td><input type="text" id="ys" style="width:120px" /></td> 
           
            073. 
            <td><div id="ysTip" style="width:300px"></div></td> 
           
            074. 
            </tr> 
           
            075. 
            <tr> 
           
            076. 
            <td align="right">你的EMAIL:</td> 
           
            077. 
            <td><input type="text" id="email" style="width:120px" /></td> 
           
            078. 
            <td><div id="emailTip" style="width:300px"></div></td> 
           
            079. 
            </tr> 
           
            080. 
            <tr> 
           
            081. 
            <td align="right">手機:</td> 
           
            082. 
            <td><input type="text" id="sj" style="width:120px" /></td> 
           
            083. 
            <td><div id="sjTip" style="width:300px"></div></td> 
           
            084. 
            </tr> 
           
            085. 
            <tr> 
           
            086. 
            <td align="right">郵編:</td> 
           
            087. 
            <td><input type="text" id="yb" style="width:120px" /></td> 
           
            088. 
            <td><div id="ybTip" style="width:300px"></div></td> 
           
            089. 
            </tr> 
           
            090. 
            <tr> 
           
            091. 
            <td align="right">非空:</td> 
           
            092. 
            <td><input type="text" id="fk" style="width:120px" /></td> 
           
            093. 
            <td><div id="fkTip" style="width:300px"></div></td> 
           
            094. 
            </tr> 
           
            095. 
            <tr> 
           
            096. 
            <td align="right">圖片:</td> 
           
            097. 
            <td><input type="text" id="tp" style="width:120px" /></td> 
           
            098. 
            <td><div id="tpTip" style="width:300px"></div></td> 
           
            099. 
            </tr> 
           
            100. 
            <tr> 
           
            101. 
            <td align="right">壓縮文件:</td> 
           
            102. 
            <td><input type="text" id="rar" style="width:120px" /></td> 
           
            103. 
            <td><div id="rarTip" style="width:300px"></div></td> 
           
            104. 
            </tr> 
           
            105. 
            <tr> 
           
            106. 
            <td align="right">ip4:</td> 
           
            107. 
            <td><input type="text" id="ip4" style="width:120px" /></td> 
           
            108. 
            <td><div id="ip4Tip" style="width:300px"></div></td> 
           
            109. 
            </tr> 
           
            110. 
            <tr> 
           
            111. 
            <td align="right">QQ號碼:</td> 
           
            112. 
            <td><input type="text" id="<a href="http://www.it165.net/qq/" target="_blank" class="keylink">qq</a>" style="width:120px" /></td> 
           
            113. 
            <td><div id="<a href="http://www.it165.net/qq/" target="_blank" class="keylink">qq</a>Tip" style="width:300px"></div></td> 
           
            114. 
            </tr> 
           
            115. 
            <tr> 
           
            116. 
            <td align="right">國內電話:</td> 
           
            117. 
            <td><input type="text" id="dh" style="width:120px" /></td> 
           
            118. 
            <td><div id="dhTip" style="width:300px"></div></td> 
           
            119. 
            </tr> 
           
            120. 
            <tr> 
           
            121. 
            <td align="right">用戶名:</td> 
           
            122. 
            <td><input type="text" id="yhm" style="width:120px" /></td> 
           
            123. 
            <td><div id="yhmTip" style="width:300px"></div></td> 
           
            124. 
            </tr> 
           
            125. 
            <tr> 
           
            126. 
            <td align="right">字母:</td> 
           
            127. 
            <td><input type="text" id="zm" style="width:120px" /></td> 
           
            128. 
            <td><div id="zmTip" style="width:300px"></div></td> 
           
            129. 
            </tr> 
           
            130. 
            <tr> 
           
            131. 
            <td align="right">大寫字母:</td> 
           
            132. 
            <td><input type="text" id="dxzm" style="width:120px" /></td> 
           
            133. 
            <td><div id="dxzmTip" style="width:300px"></div></td> 
           
            134. 
            </tr> 
           
            135. 
            <tr> 
           
            136. 
            <td align="right">小寫字母:</td> 
           
            137. 
            <td><input type="text" id="xxzm" style="width:120px" /></td> 
           
            138. 
            <td><div id="xxzmTip" style="width:300px"></div></td> 
           
            139. 
            </tr> 
           
            140. 
            <tr> 
           
            141. 
            <td align="right">身份證:</td> 
           
            142. 
            <td><input type="text" id="sfz" style="width:120px" /></td> 
           
            143. 
            <td><div id="sfzTip" style="width:300px"></div></td> 
           
            144. 
            </tr> 
           
            145. 
            </table>

4.<script>中的代碼

代碼如下:

 
            01. 
            <script type="text/javascript"> 
           
            02. 
            $(document).ready(function () { 
           
            03. 
            $.formValidator.initConfig({ formID: "form1", onError: function () { alert("校驗沒有通過，具體錯誤請看錯誤提示") } }); 
           
            04. 
            $("#sfz").formValidator({ onShow: "請輸入15或18位的身份證", onfocus: "輸入15或18位的身份證", onCorrect: "輸入正確" }).regexValidator({ regExp: "idcard", dataType:"enum", onError: "你輸入的身份證格式不正確" }); ; 
           
            05. 
            $("#sfz1").formValidator({ onShow: "請輸入15或18位的身份證", onfocus: "輸入15或18位的身份證", onCorrect: "輸入正確" }).functionValidator({ fun: isCardID }); 
           
            06. 
            $("#zs").formValidator({ onShow: "請輸入整數", onCorrect: "謝謝你的合作，你的整數正確" }).regexValidator({ regExp: "intege", dataType: "enum", onError: "整數格式不正確"}); 
           
            07. 
            $("#zzs").formValidator({ onShow: "請輸入正整數", onCorrect: "謝謝你的合作，你的正整數正確" }).regexValidator({ regExp: "intege1", dataType: "enum", onError: "正整數格式不正確" }); 
           
            08. 
            $("#fzs").formValidator({ onShow: "請輸入負整數", onCorrect: "謝謝你的合作，你的負整數正確" }).regexValidator({ regExp: "intege2", dataType: "enum", onError: "負整數格式不正確" }); 
           
            09. 
            $("#sz").formValidator({ onShow: "請輸入數字", onCorrect: "謝謝你的合作，你的數字正確" }).regexValidator({ regExp: "num", dataType: "enum", onError: "數字格式不正確" }); 
           
            10. 
            $("#zs1").formValidator({ onShow: "請輸入正數", onCorrect: "謝謝你的合作，你的正數正確" }).regexValidator({ regExp: "num1", dataType: "enum", onError: "正數格式不正確"}); 
           
            11. 
            $("#fs").formValidator({ onShow: "請輸入負數", onCorrect: "謝謝你的合作，你的負數正確" }).regexValidator({ regExp: "num2", dataType: "enum", onError: "負數格式不正確" }); 
           
            12. 
            $("#sj").formValidator({ onShow: "請輸入你的手機號碼", onfocus: "必須是13或15打頭哦", onCorrect: "謝謝你的合作，你的手機號碼正確" }).regexValidator({ regExp: "mobile", dataType: "enum", onError: "手機號碼格式不正確" }); 
           
            13. 
            //$("#").formValidator({onShow:"",onfocus:"請輸入",onCorrect:"謝謝你的合作，你的正確"}).regexValidator({regExp:"",dataType:"enum",onError:"格式不正確"}); 
           
            14. 
            $("#email").formValidator({ onShow: "請輸入你的email", onfocus: "請注意你輸入的email格式，例如:wzmaodong@126.com", onCorrect: "謝謝你的合作，你的email正確"}).regexValidator({ regExp: "email", dataType: "enum", onError: "email格式不正確" }); 
           
            15. 
            $("#fds").formValidator({ onShow: "請輸入浮點數", onCorrect: "謝謝你的合作，你的浮點數正確" }).regexValidator({ regExp: "decmal", dataType: "enum", onError: "浮點數格式不正確" }); 
           
            16. 
            $("#zfds").formValidator({ onShow: "請輸入正浮點數", onCorrect: "謝謝你的合作，你的正浮點數正確" }).regexValidator({ regExp: "decmal1", dataType: "enum", onError: "正浮點數格式不正確" }); 
           
            17. 
            $("#ffds").formValidator({ onShow: "請輸入負浮點數", onCorrect: "謝謝你的合作，你的負浮點數正確" }).regexValidator({ regExp: "decmal2", dataType: "enum", onError: "負浮點數格式不正確" }); 
           
            18. 
            $("#fffds").formValidator({ onShow: "請輸入非負浮點數", onCorrect: "謝謝你的合作，你的非負浮點數正確" }).regexValidator({ regExp: "decmal4", dataType: "enum", onError:"非負浮點數格式不正確" }); 
           
            19. 
            $("#fzfds").formValidator({ onShow: "請輸入非正浮點數", onCorrect: "謝謝你的合作，你的非正浮點數正確" }).regexValidator({ regExp: "decmal5", dataType: "enum", onError:"非正浮點數格式不正確" }); 
           
            20. 
            $("#ys").formValidator({ onShow: "請輸入16進制顏色", onCorrect: "謝謝你的合作，你的16進制顏色正確" }).regexValidator({ regExp: "color", dataType: "enum", onError: "16進制顏色格式不正確" }); 
           
            21. 
            $("#yb").formValidator({ onShow: "請輸入郵編", onfocus: "6位數字組成的哦", onCorrect: "謝謝你的合作，你的郵編正確" }).regexValidator({ regExp: "zipcode", dataType:"enum", onError: "郵編格式不正確" }); 
           
            22. 
            $("#ip4").formValidator({ onShow: "請輸入ip4", onfocus: "例如：172.16.201.18", onCorrect: "謝謝你的合作，你的ip4正確" }).regexValidator({ regExp: "ip4", dataType:"enum", onError: "ip4格式不正確" }); 
           
            23. 
            $("#fk").formValidator({ onShow: "請輸入非空字符", onCorrect: "謝謝你的合作，你的非空字符正確" }).regexValidator({ regExp: "notempty", dataType: "enum", onError: "非空字符格式不正確" }); 
           
            24. 
            $("#tp").formValidator({ onShow: "請輸入圖片名", onCorrect: "謝謝你的合作，你的圖片名正確" }).regexValidator({ regExp: "picture", dataType: "enum", onError: "圖片名格式不正確" }); 
           
            25. 
            $("#rar").formValidator({ onShow: "請輸入壓縮文件名", onCorrect: "謝謝你的合作，你的壓縮文件名正確" }).regexValidator({ regExp: "rar", dataType: "enum", onError: "壓縮文件名格式不正確" }); 
           
            26. 
            $("#qq").formValidator({ onShow: "請輸入QQ號碼", onCorrect: "謝謝你的合作，你的QQ號碼正確" }).regexValidator({ regExp: "qq", dataType: "enum", onError: "QQ號碼格式不正確"}); 
           
            27. 
            $("#dh").formValidator({ onShow: "請輸入國內電話", onfocus: "例如：0577-88888888或省略區號88888888", onCorrect: "謝謝你的合作，你的國內電話正確" }).regexValidator({ regExp: "tel", dataType: "enum", onError: "國內電話格式不正確" }); 
           
            28. 
            $("#yhm").formValidator({ onShow: "請輸入用戶名", onCorrect: "謝謝你的合作，你的用戶名正確" }).regexValidator({ regExp: "username", dataType: "enum", onError: "用戶名格式不正確" }); 
           
            29. 
            $("#zm").formValidator({ onShow: "請輸入字母", onCorrect: "謝謝你的合作，你的字母正確" }).regexValidator({ regExp: "letter", dataType: "enum", onError: "字母格式不正確"}); 
           
            30. 
            $("#dxzm").formValidator({ onShow: "請輸入大寫字母", onCorrect: "謝謝你的合作，你的大寫字母正確" }).regexValidator({ regExp: "letter_u", dataType: "enum", onError: "大寫字母格式不正確" }); 
           
            31. 
            $("#xxzm").formValidator({ onShow: "請輸入小寫字母", onCorrect: "謝謝你的合作，你的小寫字母正確" }).regexValidator({ regExp: "letter_l", dataType: "enum", onError: "小寫字母格式不正確" }); 
           
            32. 
            $("#sfz").formValidator({ onShow: "請輸入身份證", onCorrect: "謝謝你的合作，你的身份證正確" }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "身份證格式不正確" }); 
           
            33. 
            }); 
           
            34. 
            </script>

5.效果圖：

6.<script>中函數參數說明：

formValidator:

用來做初始化的類型，必須先執行。（"√"為showalert可用參數）

屬性	屬性名稱	默認值	showalert	詳細解釋
validatorgroup	校驗組	"1"	√	一個頁面的控件可以分成多個組，分開校驗
empty	是否可以為空	false	√
automodify	輸入錯誤離開焦點的時候，自動修復錯誤	true	√	先給出提示然后，自動修復，目前只支持text、file、textarea三種類型
onempty	空時候的提示	"輸入內容為空"		可以為空，為空時候的提示。為空者不顯示
onshow	顯示時候的提示	"請輸入內容"		為空者不顯示
onfocus	獲得焦點的提示	"請輸入內容"		為空者不顯示
oncorrect	輸入正確后的提示	"輸入正確"		當你焦點離開控件的時候，如果輸入正確將出現該提示。為空者不顯示
tipid	顯示錯誤的容器ID	表單ID+"Tip"		如果不自動構建提示層，表示提示成的ID號如果自動構建提示層，表示提示層相對的目標控件
tipcss	自動構建的提示層的樣式	"left":"10px", "top":"1px", "height":"20px", "width":"250px"		主要用於定位自動構建的提示層
forcevalid	強制輸入的值必須有效	true	√	是否把一個全角字符當做2個長度的參數
ajax	提交服務器	true	√	ajaxValidator是否把該表單提交給服務器
defaultvalue	默認值	null	√	所有input和select表單。如果你不設置就保持原值，一旦設置就設為默認值。
triggerevent	默認值	blur	√	當前支持2種屬性值: blur:失去焦點的時候觸發 change:當輸入框里的值發生改變的時候觸發

inputValidator：

屬性	屬性名稱	默認值	詳細解釋
type	比較類型	"size"	(對select無效) "size":表示比較長度，默認值 "number":數值型比較 "string":字符型比較 "date":短日期類型 "datetime":長日期類型
min	最小長度/值	0	默認數值型。如果進行字符比較，請收入字符型對select-one而言inputValidator里的參數min和max表示選擇的索引號范圍對select-multiple而言inputValidator里的參數min和max表示選擇的個數
max	最大長度/值	99999999999	同上
onerror	發生錯誤的提示	"輸入錯誤"	為空者不顯示。
onerrormin	比min屬性小的提示	null	當用戶輸入的值比min屬性小的時候的錯誤提示
onerrormax	比max屬性大的提示	null	當用戶輸入的值比max屬性大的時候的錯誤提示
empty	控件文本值是否允許兩邊為空	兩邊都允許出現空	默認值{leftempty:true,rightempty:true,emptyerror:null} leftempty:表示左邊是否允許為空 rightempty:表示右邊是否允許為空 emptyerror：出現該錯誤的時候的提示，如果為null，則利用onerror屬性來提示錯誤。

compareValidator：

屬性	屬性名稱	默認值	詳細解釋
desid	要比較控件的ID	""	要跟源目標進行比較的目標ID
operateor	比較符號	"="	一共有如下幾種類型:=、!=、>、>=、<、<=
datatype	數據類型	"string"	目前只支持2種:"string"、"number","datetime","date"
onerror	發生錯誤的提示	"輸入錯誤"	為空者不顯示。

regexValidator:

屬性	屬性名稱	默認值	詳細解釋
regexp	正則表達式或表達式數組	""	采用的是顯式構造函數new RegExp("pattern"[,"flags"]); 由於Javascript 中'\' 被用作轉義字符，所以在使用顯示構造函數構造實例對象的時候，需要使用'\\' 代替'\'
param	附加參數	"i"	g：代表可以進行全局匹配。 i：代表不區分大小寫匹配。 m：代表可以進行多行匹配。可以任意組合,當然也可以不加參數
comparetype	比較類型	"\|\|"	"\|\|"或的關系 "&&"並列
datatype	數據類型	"string"	"string":自己寫的表達式，"enum":枚舉名。具體請見demo3.htm 你可以自己修改、添加formValidatorRegex.js里的枚舉項目名和表達式。
onerror:	發生錯誤的提示	"輸入錯誤"	為空者不顯示。

ajaxValidator:

幾乎所有的屬性跟$.ajax()的屬性一樣，請參考$.ajax()函數的幫助

屬性	屬性名稱	默認值	詳細解釋
type	請求的類型	"GET"	"POST" 或 "GET"
url	發送到的URL地址	""	在服務器端，你可以通過name為clientid獲取觸發驗證的控件ID名
datatype	返回的數據類型	"html"	xml、html、script、json、text
timeout	超時設置	999
data	數據	""
async	是否以異步的方式發送	true
success	當請求成功時調用的函數	null
processdata	自動處理返回的數據為字符串	true	在默認的情況下，如果data選項傳進的數據是一個對象而不是字符串，將會自動地被處理和轉換成一個查詢字符串
complete	當請求完成時調用的函數	null
beforesend	當請求前時調用的函數	null	有個一個參數，根$.ajax里的beforeSend參數一樣。
buttons	你點提交的按鈕(組)jQuery對象	null	當你觸發了ajax校驗，buttons里對應的按鈕（組）就會灰掉，一直等待服務器返回數據為止
error	當請求失敗時調用的函數	"請求失敗"	你可以自己定義這個錯誤，在error里自動打出。為空者不顯示。

functionValidator

屬性

屬性名稱

默認值

返回值的解釋

fun

外部函數名()
參數1:元素的值,
參數2:元素對象

默認當作處理過程

true/false	校驗成功/失敗
字符串	校驗失敗，返回值當作自定義錯誤
無	處理過程

onerror

發生錯誤的提示

"輸入錯誤"

函數return false的時候，顯示該錯誤信息

公共函數:

主要是設置全局參數和判斷是否通過校驗

函數名

函數說明

$.formValidator.initConfig

參數：配置類型

屬性

默認值

說明

validatorgroup

"1"

你要針對哪個組進行配置

formid

要自動注冊pageIsValid函數的表單ID號

alertmessage

false

是否彈出窗口

autotip

false

是否自動構建提示層

errorfocus

true

發生錯誤的時候，第一個出錯控件是否獲得焦點

forcevalid

true

是否一直輸入正確為止才允許離開焦點

wideword

true

是否把一個全角字符當做2個長度

onsuccess

null

該組校驗通過后的回調函數,返回false，阻止表單的提交

submitonce

false

校驗通過后，是否灰掉所有的提交按鈕

onerror

null

該組校驗失敗后的回調函數，有兩個參數

參數1	一個校驗沒有通過的錯誤信息
參數2	一個校驗沒有通過的元素對象
參數3	所有的錯誤信息數組，你可以通過$.map來遍歷

debug

false

是否處於調試模式。true:不提交表單

$.formValidator.pageIsValid

一個參數：不是配置類型

validatorgroup

"1"

你要針對哪個組進行驗證

$.formValidator.isOneValid

一個參數：當時設置驗證的表單元素ID。
返回是否校驗成功的信息。

$.formValidator.setFailState

function("tipid","顯示的信息")
在showword模式下，如果你的額外校驗沒有通過，你可以通過它來設置成失敗信息和狀態

$.formValidator.getLength

function("表單元素id")
checkbox或radiobutton表示(同組)選擇的個數。
對select-one，選擇索引的值
對select-multiple，inputValidator里的參數min和max表示選擇的個數
其它input表示的表示字符長度。

$.formValidator.retSetTipState

function(校驗組號) 來把該組的提示內容恢復到onshow狀態

$.formValidator.reloadAutoTip

重新定位自動構建的提示層

formValidator:

用來做初始化的類型，必須先執行。（"√"為showalert可用參數）

屬性	屬性名稱	默認值	showalert	詳細解釋
validatorgroup	校驗組	"1"	√	一個頁面的控件可以分成多個組，分開校驗
empty	是否可以為空	false	√
automodify	輸入錯誤離開焦點的時候，自動修復錯誤	true	√	先給出提示然后，自動修復，目前只支持text、file、textarea三種類型
onempty	空時候的提示	"輸入內容為空"		可以為空，為空時候的提示。為空者不顯示
onshow	顯示時候的提示	"請輸入內容"		為空者不顯示
onfocus	獲得焦點的提示	"請輸入內容"		為空者不顯示
oncorrect	輸入正確后的提示	"輸入正確"		當你焦點離開控件的時候，如果輸入正確將出現該提示。為空者不顯示
tipid	顯示錯誤的容器ID	表單ID+"Tip"		如果不自動構建提示層，表示提示成的ID號如果自動構建提示層，表示提示層相對的目標控件
tipcss	自動構建的提示層的樣式	"left":"10px", "top":"1px", "height":"20px", "width":"250px"		主要用於定位自動構建的提示層
forcevalid	強制輸入的值必須有效	true	√	是否把一個全角字符當做2個長度的參數
ajax	提交服務器	true	√	ajaxValidator是否把該表單提交給服務器
defaultvalue	默認值	null	√	所有input和select表單。如果你不設置就保持原值，一旦設置就設為默認值。
triggerevent	默認值	blur	√	當前支持2種屬性值: blur:失去焦點的時候觸發 change:當輸入框里的值發生改變的時候觸發

inputValidator：

屬性	屬性名稱	默認值	詳細解釋
type	比較類型	"size"	(對select無效) "size":表示比較長度，默認值 "number":數值型比較 "string":字符型比較 "date":短日期類型 "datetime":長日期類型
min	最小長度/值	0	默認數值型。如果進行字符比較，請收入字符型對select-one而言inputValidator里的參數min和max表示選擇的索引號范圍對select-multiple而言inputValidator里的參數min和max表示選擇的個數
max	最大長度/值	99999999999	同上
onerror	發生錯誤的提示	"輸入錯誤"	為空者不顯示。
onerrormin	比min屬性小的提示	null	當用戶輸入的值比min屬性小的時候的錯誤提示
onerrormax	比max屬性大的提示	null	當用戶輸入的值比max屬性大的時候的錯誤提示
empty	控件文本值是否允許兩邊為空	兩邊都允許出現空	默認值{leftempty:true,rightempty:true,emptyerror:null} leftempty:表示左邊是否允許為空 rightempty:表示右邊是否允許為空 emptyerror：出現該錯誤的時候的提示，如果為null，則利用onerror屬性來提示錯誤。

compareValidator：

屬性	屬性名稱	默認值	詳細解釋
desid	要比較控件的ID	""	要跟源目標進行比較的目標ID
operateor	比較符號	"="	一共有如下幾種類型:=、!=、>、>=、<、<=
datatype	數據類型	"string"	目前只支持2種:"string"、"number","datetime","date"
onerror	發生錯誤的提示	"輸入錯誤"	為空者不顯示。

regexValidator:

屬性	屬性名稱	默認值	詳細解釋
regexp	正則表達式或表達式數組	""	采用的是顯式構造函數new RegExp("pattern"[,"flags"]); 由於Javascript 中'\' 被用作轉義字符，所以在使用顯示構造函數構造實例對象的時候，需要使用'\\' 代替'\'
param	附加參數	"i"	g：代表可以進行全局匹配。 i：代表不區分大小寫匹配。 m：代表可以進行多行匹配。可以任意組合,當然也可以不加參數
comparetype	比較類型	"\|\|"	"\|\|"或的關系 "&&"並列
datatype	數據類型	"string"	"string":自己寫的表達式，"enum":枚舉名。具體請見demo3.htm 你可以自己修改、添加formValidatorRegex.js里的枚舉項目名和表達式。
onerror:	發生錯誤的提示	"輸入錯誤"	為空者不顯示。

ajaxValidator:

幾乎所有的屬性跟$.ajax()的屬性一樣，請參考$.ajax()函數的幫助

屬性	屬性名稱	默認值	詳細解釋
type	請求的類型	"GET"	"POST" 或 "GET"
url	發送到的URL地址	""	在服務器端，你可以通過name為clientid獲取觸發驗證的控件ID名
datatype	返回的數據類型	"html"	xml、html、script、json、text
timeout	超時設置	999
data	數據	""
async	是否以異步的方式發送	true
success	當請求成功時調用的函數	null
processdata	自動處理返回的數據為字符串	true	在默認的情況下，如果data選項傳進的數據是一個對象而不是字符串，將會自動地被處理和轉換成一個查詢字符串
complete	當請求完成時調用的函數	null
beforesend	當請求前時調用的函數	null	有個一個參數，根$.ajax里的beforeSend參數一樣。
buttons	你點提交的按鈕(組)jQuery對象	null	當你觸發了ajax校驗，buttons里對應的按鈕（組）就會灰掉，一直等待服務器返回數據為止
error	當請求失敗時調用的函數	"請求失敗"	你可以自己定義這個錯誤，在error里自動打出。為空者不顯示。

functionValidator

屬性

屬性名稱

默認值

返回值的解釋

fun

外部函數名()
參數1:元素的值,
參數2:元素對象

默認當作處理過程

true/false	校驗成功/失敗
字符串	校驗失敗，返回值當作自定義錯誤
無	處理過程

onerror

發生錯誤的提示

"輸入錯誤"

函數return false的時候，顯示該錯誤信息

公共函數:

主要是設置全局參數和判斷是否通過校驗

函數名

函數說明

$.formValidator.initConfig

參數：配置類型

屬性

默認值

說明

validatorgroup

"1"

你要針對哪個組進行配置

formid

要自動注冊pageIsValid函數的表單ID號

alertmessage

false

是否彈出窗口

autotip

false

是否自動構建提示層

errorfocus

true

發生錯誤的時候，第一個出錯控件是否獲得焦點

forcevalid

true

是否一直輸入正確為止才允許離開焦點

wideword

true

是否把一個全角字符當做2個長度

onsuccess

null

該組校驗通過后的回調函數,返回false，阻止表單的提交

submitonce

false

校驗通過后，是否灰掉所有的提交按鈕

onerror

null

該組校驗失敗后的回調函數，有兩個參數

參數1	一個校驗沒有通過的錯誤信息
參數2	一個校驗沒有通過的元素對象
參數3	所有的錯誤信息數組，你可以通過$.map來遍歷

debug

false

是否處於調試模式。true:不提交表單

$.formValidator.pageIsValid

一個參數：不是配置類型

validatorgroup

"1"

你要針對哪個組進行驗證

$.formValidator.isOneValid

一個參數：當時設置驗證的表單元素ID。
返回是否校驗成功的信息。

$.formValidator.setFailState

function("tipid","顯示的信息")
在showword模式下，如果你的額外校驗沒有通過，你可以通過它來設置成失敗信息和狀態

$.formValidator.getLength

$.formValidator.retSetTipState

function(校驗組號) 來把該組的提示內容恢復到onshow狀態

$.formValidator.reloadAutoTip

重新定位自動構建的提示層

formValidator:

用來做初始化的類型，必須先執行。（"√"為showalert可用參數）

屬性	屬性名稱	默認值	showalert	詳細解釋
validatorgroup	校驗組	"1"	√	一個頁面的控件可以分成多個組，分開校驗
empty	是否可以為空	false	√
automodify	輸入錯誤離開焦點的時候，自動修復錯誤	true	√	先給出提示然后，自動修復，目前只支持text、file、textarea三種類型
onempty	空時候的提示	"輸入內容為空"		可以為空，為空時候的提示。為空者不顯示
onshow	顯示時候的提示	"請輸入內容"		為空者不顯示
onfocus	獲得焦點的提示	"請輸入內容"		為空者不顯示
oncorrect	輸入正確后的提示	"輸入正確"		當你焦點離開控件的時候，如果輸入正確將出現該提示。為空者不顯示
tipid	顯示錯誤的容器ID	表單ID+"Tip"		如果不自動構建提示層，表示提示成的ID號如果自動構建提示層，表示提示層相對的目標控件
tipcss	自動構建的提示層的樣式	"left":"10px", "top":"1px", "height":"20px", "width":"250px"		主要用於定位自動構建的提示層
forcevalid	強制輸入的值必須有效	true	√	是否把一個全角字符當做2個長度的參數
ajax	提交服務器	true	√	ajaxValidator是否把該表單提交給服務器
defaultvalue	默認值	null	√	所有input和select表單。如果你不設置就保持原值，一旦設置就設為默認值。
triggerevent	默認值	blur	√	當前支持2種屬性值: blur:失去焦點的時候觸發 change:當輸入框里的值發生改變的時候觸發

inputValidator：

屬性	屬性名稱	默認值	詳細解釋
type	比較類型	"size"	(對select無效) "size":表示比較長度，默認值 "number":數值型比較 "string":字符型比較 "date":短日期類型 "datetime":長日期類型
min	最小長度/值	0	默認數值型。如果進行字符比較，請收入字符型對select-one而言inputValidator里的參數min和max表示選擇的索引號范圍對select-multiple而言inputValidator里的參數min和max表示選擇的個數
max	最大長度/值	99999999999	同上
onerror	發生錯誤的提示	"輸入錯誤"	為空者不顯示。
onerrormin	比min屬性小的提示	null	當用戶輸入的值比min屬性小的時候的錯誤提示
onerrormax	比max屬性大的提示	null	當用戶輸入的值比max屬性大的時候的錯誤提示
empty	控件文本值是否允許兩邊為空	兩邊都允許出現空	默認值{leftempty:true,rightempty:true,emptyerror:null} leftempty:表示左邊是否允許為空 rightempty:表示右邊是否允許為空 emptyerror：出現該錯誤的時候的提示，如果為null，則利用onerror屬性來提示錯誤。

compareValidator：

屬性	屬性名稱	默認值	詳細解釋
desid	要比較控件的ID	""	要跟源目標進行比較的目標ID
operateor	比較符號	"="	一共有如下幾種類型:=、!=、>、>=、<、<=
datatype	數據類型	"string"	目前只支持2種:"string"、"number","datetime","date"
onerror	發生錯誤的提示	"輸入錯誤"	為空者不顯示。

regexValidator:

屬性	屬性名稱	默認值	詳細解釋
regexp	正則表達式或表達式數組	""	采用的是顯式構造函數new RegExp("pattern"[,"flags"]); 由於Javascript 中'\' 被用作轉義字符，所以在使用顯示構造函數構造實例對象的時候，需要使用'\\' 代替'\'
param	附加參數	"i"	g：代表可以進行全局匹配。 i：代表不區分大小寫匹配。 m：代表可以進行多行匹配。可以任意組合,當然也可以不加參數
comparetype	比較類型	"\|\|"	"\|\|"或的關系 "&&"並列
datatype	數據類型	"string"	"string":自己寫的表達式，"enum":枚舉名。具體請見demo3.htm 你可以自己修改、添加formValidatorRegex.js里的枚舉項目名和表達式。
onerror:	發生錯誤的提示	"輸入錯誤"	為空者不顯示。

ajaxValidator:

幾乎所有的屬性跟$.ajax()的屬性一樣，請參考$.ajax()函數的幫助

屬性	屬性名稱	默認值	詳細解釋
type	請求的類型	"GET"	"POST" 或 "GET"
url	發送到的URL地址	""	在服務器端，你可以通過name為clientid獲取觸發驗證的控件ID名
datatype	返回的數據類型	"html"	xml、html、script、json、text
timeout	超時設置	999
data	數據	""
async	是否以異步的方式發送	true
success	當請求成功時調用的函數	null
processdata	自動處理返回的數據為字符串	true	在默認的情況下，如果data選項傳進的數據是一個對象而不是字符串，將會自動地被處理和轉換成一個查詢字符串
complete	當請求完成時調用的函數	null
beforesend	當請求前時調用的函數	null	有個一個參數，根$.ajax里的beforeSend參數一樣。
buttons	你點提交的按鈕(組)jQuery對象	null	當你觸發了ajax校驗，buttons里對應的按鈕（組）就會灰掉，一直等待服務器返回數據為止
error	當請求失敗時調用的函數	"請求失敗"	你可以自己定義這個錯誤，在error里自動打出。為空者不顯示。

functionValidator

屬性

屬性名稱

默認值

返回值的解釋

fun

外部函數名()
參數1:元素的值,
參數2:元素對象

默認當作處理過程

true/false	校驗成功/失敗
字符串	校驗失敗，返回值當作自定義錯誤
無	處理過程

onerror

發生錯誤的提示

"輸入錯誤"

函數return false的時候，顯示該錯誤信息

公共函數:

主要是設置全局參數和判斷是否通過校驗

函數名

函數說明

$.formValidator.initConfig

參數：配置類型

屬性

默認值

說明

validatorgroup

"1"

你要針對哪個組進行配置

formid

要自動注冊pageIsValid函數的表單ID號

alertmessage

false

是否彈出窗口

autotip

false

是否自動構建提示層

errorfocus

true

發生錯誤的時候，第一個出錯控件是否獲得焦點

forcevalid

true

是否一直輸入正確為止才允許離開焦點

wideword

true

是否把一個全角字符當做2個長度

onsuccess

null

該組校驗通過后的回調函數,返回false，阻止表單的提交

submitonce

false

校驗通過后，是否灰掉所有的提交按鈕

onerror

null

該組校驗失敗后的回調函數，有兩個參數

參數1	一個校驗沒有通過的錯誤信息
參數2	一個校驗沒有通過的元素對象
參數3	所有的錯誤信息數組，你可以通過$.map來遍歷

debug

false

是否處於調試模式。true:不提交表單

$.formValidator.pageIsValid

一個參數：不是配置類型

validatorgroup

"1"

你要針對哪個組進行驗證

$.formValidator.isOneValid

一個參數：當時設置驗證的表單元素ID。
返回是否校驗成功的信息。

$.formValidator.setFailState

function("tipid","顯示的信息")
在showword模式下，如果你的額外校驗沒有通過，你可以通過它來設置成失敗信息和狀態

$.formValidator.getLength

$.formValidator.retSetTipState

function(校驗組號) 來把該組的提示內容恢復到onshow狀態

$.formValidator.reloadAutoTip

重新定位自動構建的提示層

6.添加修改說明：

代碼如下:

 
             01. 
             $.formValidator.reloadAutoTip(); //重新加載表單驗證樣式 
            
             02. 
             if(!$.formValidator.pageIsValid('1')) return false; //如果不通過則不提交 
            
             03. 
             代碼如下: 
            
             04. 
             $(document).ready(function () { 
            
             05. 
             $.formValidator.initConfig({ formID: "form1", onError: function () { alert("校驗沒有通過，具體錯誤請看錯誤提示") } }); 
            
             06. 
             $("#name").formValidator({ onShow: "請輸入姓名！", onFocus: "輸入一個到十個字符", onCorrect: "輸入正確，謝謝您的合作！" }).inputValidator({ min: 1, max: 20, onError: "輸入長度，不對！" }); 
            
             07. 
             $("#timelong").formValidator({ onShow: "請輸入路演時長！", onFocus: "輸入格式為正整數！", onCorrect: "輸入正確，謝謝您的合作！" }).regexValidator({ regExp:"intege1",dataType: "enum", onError: "您輸入的時長格式不正確！" }); 
            
             08. 
             $("#address").formValidator({ onShow: "請輸入路演平台名稱！", onFocus: "輸入一個到五十個字符", onCorrect: "輸入正確，謝謝您的合作！" }).inputValidator({ min: 1, max: 50, onError: "輸入長度，不對！" }); 
            
             09. 
             $("#urladdress").formValidator({ onShow: "請輸入路演鏈接地址！", onFocus: "輸入格式：http://www.baidu.com", onCorrect: "輸入正確，謝謝您的合作！" }).regexValidator({ regExp:"^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|localhost|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$", onError: "輸入格式不正確！" }); 
            
             10. 
             $("#time").formValidator({ onCorrect: "格式正確" }).functionValidator({fun:isDateTime, onError: "輸入格式，不對！" }); 
            
             11. 
             $("#txtcontent").formValidator({ onShow: "請輸入專家簡介！", onFocus: "輸入一個到一百個字符", onCorrect: "輸入正確，謝謝您的合作！" }).inputValidator({ min: 1, max: 100, onError: "輸入長度，不對！" }); 
            
             12. 
             });

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery formValidator表單驗證插件 jQuery formValidator表單驗證插件常見有關問題 (改進版)jQuery表單驗證插件formValidator jQuery formValidator表單驗證插件4.1.3提供下載 FormValidator表單驗證 jQuery Validate 插件[表單驗證屬性介紹] 強大的JavaScript表單驗證插件表單驗證插件----jquery validation jquery validate表單驗證插件 Validation-jQuery表單驗證插件使用方法