**使用插件：formValidator**
**下載鏈接：[http://www.cnblogs.com/wzmaodong/archive/2008/01/11/1034901.html](http://www.cnblogs.com/wzmaodong/archive/2008/01/11/1034901.html)**
**使用步驟：**
**1.首先在項目中添加必備js與css**?
**2.代碼中添加引用（必備引用）**
~~~
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必須庫-->
<script src="formValidator1/formValidator-4.0.1.min.js" type="text/javascript"></script> <!--表單驗證必須庫-->
<script src="formValidator1/formValidatorRegex.js" type="text/javascript"></script> <!--表單驗證擴展庫-->
<link href="formValidator1/style/validator.css" rel="stylesheet" type="text/css" /><!--表單驗證樣式表-->
~~~
**3.中要驗證的標簽（做一些常用的演示）**
[](javascript:void(0); "復制代碼")
~~~
<table border="0px" style="font-size:12px">
<tr>
<td colpan="3"><input type="submit" name="button" id="button" value="提交" /></td>
</tr>
<tr>
<td align="right">身份證(正則表達式庫):</td>
<td><input name="sfz" type="text" id="sfz" /></td>
<td><div id="sfzTip" style="width:300px"></div></td> <!--必須注意這里提示驗證信息中的div的id值，跟要驗證控件中的id值多了一個Tip，下面的都是這樣。必須多的是Tip，也必須要多。-->
</tr>
<tr>
<td align="right">身份證(外部函數):</td>
<td><input type="text" id="sfz1" style="width:120px" /></td>
<td><div id="sfz1Tip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">整數:</td>
<td><input type="text" id="zs" style="width:120px" /></td>
<td><div id="zsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">正整數:</td>
<td><input type="text" id="zzs" style="width:120px" /></td>
<td><div id="zzsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">負整數:</td>
<td><input type="text" id="fzs" style="width:120px" /></td>
<td><div id="fzsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">數字:</td>
<td><input type="text" id="sz" style="width:120px" /></td>
<td><div id="szTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">正數（正整數 + 0）:</td>
<td><input type="text" id="zs1" style="width:120px" /></td>
<td><div id="zs1Tip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">負數（負整數 + 0）:</td>
<td><input type="text" id="fs" style="width:120px" /></td>
<td><div id="fsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">浮點數:</td>
<td><input type="text" id="fds" style="width:120px" /></td>
<td><div id="fdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">正浮點數:</td>
<td><input type="text" id="zfds" style="width:120px" /></td>
<td><div id="zfdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">負浮點數:</td>
<td><input type="text" id="ffds" style="width:120px" /></td>
<td><div id="ffdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">非負浮點數（正浮點數 + 0）:</td>
<td><input type="text" id="fffds" style="width:120px" /></td>
<td><div id="fffdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">非正浮點數（負浮點數 + 0）:</td>
<td><input type="text" id="fzfds" style="width:120px" /></td>
<td><div id="fzfdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">顏色:</td>
<td><input type="text" id="ys" style="width:120px" /></td>
<td><div id="ysTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">你的EMAIL:</td>
<td><input type="text" id="email" style="width:120px" /></td>
<td><div id="emailTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">手機:</td>
<td><input type="text" id="sj" style="width:120px" /></td>
<td><div id="sjTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">郵編:</td>
<td><input type="text" id="yb" style="width:120px" /></td>
<td><div id="ybTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">非空:</td>
<td><input type="text" id="fk" style="width:120px" /></td>
<td><div id="fkTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">圖片:</td>
<td><input type="text" id="tp" style="width:120px" /></td>
<td><div id="tpTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">壓縮文件:</td>
<td><input type="text" id="rar" style="width:120px" /></td>
<td><div id="rarTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">ip4:</td>
<td><input type="text" id="ip4" style="width:120px" /></td>
<td><div id="ip4Tip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">QQ號碼:</td>
<td><input type="text" id="qq" style="width:120px" /></td>
<td><div id="qqTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">國內電話:</td>
<td><input type="text" id="dh" style="width:120px" /></td>
<td><div id="dhTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">用戶名:</td>
<td><input type="text" id="yhm" style="width:120px" /></td>
<td><div id="yhmTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">字母:</td>
<td><input type="text" id="zm" style="width:120px" /></td>
<td><div id="zmTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">大寫字母:</td>
<td><input type="text" id="dxzm" style="width:120px" /></td>
<td><div id="dxzmTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">小寫字母:</td>
<td><input type="text" id="xxzm" style="width:120px" /></td>
<td><div id="xxzmTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">身份證:</td>
<td><input type="text" id="sfz" style="width:120px" /></td>
<td><div id="sfzTip" style="width:300px"></div></td>
</tr>
</table>
~~~
[](javascript:void(0); "復制代碼")
**4.中的代碼**
[](javascript:void(0); "復制代碼")
~~~
<script type="text/javascript">
$(document).ready(function () {
$.formValidator.initConfig({ formID: "form1", onError: function () { alert("校驗沒有通過，具體錯誤請看錯誤提示") } });
$("#sfz").formValidator({ onShow: "請輸入15或18位的身份證", onfocus: "輸入15或18位的身份證", onCorrect: "輸入正確" }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "你輸入的身份證格式不正確" }); ;
$("#sfz1").formValidator({ onShow: "請輸入15或18位的身份證", onfocus: "輸入15或18位的身份證", onCorrect: "輸入正確" }).functionValidator({ fun: isCardID });
$("#zs").formValidator({ onShow: "請輸入整數", onCorrect: "謝謝你的合作，你的整數正確" }).regexValidator({ regExp: "intege", dataType: "enum", onError: "整數格式不正確" });
$("#zzs").formValidator({ onShow: "請輸入正整數", onCorrect: "謝謝你的合作，你的正整數正確" }).regexValidator({ regExp: "intege1", dataType: "enum", onError: "正整數格式不正確" });
$("#fzs").formValidator({ onShow: "請輸入負整數", onCorrect: "謝謝你的合作，你的負整數正確" }).regexValidator({ regExp: "intege2", dataType: "enum", onError: "負整數格式不正確" });
$("#sz").formValidator({ onShow: "請輸入數字", onCorrect: "謝謝你的合作，你的數字正確" }).regexValidator({ regExp: "num", dataType: "enum", onError: "數字格式不正確" });
$("#zs1").formValidator({ onShow: "請輸入正數", onCorrect: "謝謝你的合作，你的正數正確" }).regexValidator({ regExp: "num1", dataType: "enum", onError: "正數格式不正確" });
$("#fs").formValidator({ onShow: "請輸入負數", onCorrect: "謝謝你的合作，你的負數正確" }).regexValidator({ regExp: "num2", dataType: "enum", onError: "負數格式不正確" });
$("#sj").formValidator({ onShow: "請輸入你的手機號碼", onfocus: "必須是13或15打頭哦", onCorrect: "謝謝你的合作，你的手機號碼正確" }).regexValidator({ regExp: "mobile", dataType: "enum", onError: "手機號碼格式不正確" });
//$("#").formValidator({onShow:"",onfocus:"請輸入",onCorrect:"謝謝你的合作，你的正確"}).regexValidator({regExp:"",dataType:"enum",onError:"格式不正確"});
$("#email").formValidator({ onShow: "請輸入你的email", onfocus: "請注意你輸入的email格式，例如:wzmaodong@126.com", onCorrect: "謝謝你的合作，你的email正確" }).regexValidator({ regExp: "email", dataType: "enum", onError: "email格式不正確" });
$("#fds").formValidator({ onShow: "請輸入浮點數", onCorrect: "謝謝你的合作，你的浮點數正確" }).regexValidator({ regExp: "decmal", dataType: "enum", onError: "浮點數格式不正確" });
$("#zfds").formValidator({ onShow: "請輸入正浮點數", onCorrect: "謝謝你的合作，你的正浮點數正確" }).regexValidator({ regExp: "decmal1", dataType: "enum", onError: "正浮點數格式不正確" });
$("#ffds").formValidator({ onShow: "請輸入負浮點數", onCorrect: "謝謝你的合作，你的負浮點數正確" }).regexValidator({ regExp: "decmal2", dataType: "enum", onError: "負浮點數格式不正確" });
$("#fffds").formValidator({ onShow: "請輸入非負浮點數", onCorrect: "謝謝你的合作，你的非負浮點數正確" }).regexValidator({ regExp: "decmal4", dataType: "enum", onError: "非負浮點數格式不正確" });
$("#fzfds").formValidator({ onShow: "請輸入非正浮點數", onCorrect: "謝謝你的合作，你的非正浮點數正確" }).regexValidator({ regExp: "decmal5", dataType: "enum", onError: "非正浮點數格式不正確" });
$("#ys").formValidator({ onShow: "請輸入16進制顏色", onCorrect: "謝謝你的合作，你的16進制顏色正確" }).regexValidator({ regExp: "color", dataType: "enum", onError: "16進制顏色格式不正確" });
$("#yb").formValidator({ onShow: "請輸入郵編", onfocus: "6位數字組成的哦", onCorrect: "謝謝你的合作，你的郵編正確" }).regexValidator({ regExp: "zipcode", dataType: "enum", onError: "郵編格式不正確" });
$("#ip4").formValidator({ onShow: "請輸入ip4", onfocus: "例如：172.16.201.18", onCorrect: "謝謝你的合作，你的ip4正確" }).regexValidator({ regExp: "ip4", dataType: "enum", onError: "ip4格式不正確" });
$("#fk").formValidator({ onShow: "請輸入非空字符", onCorrect: "謝謝你的合作，你的非空字符正確" }).regexValidator({ regExp: "notempty", dataType: "enum", onError: "非空字符格式不正確" });
$("#tp").formValidator({ onShow: "請輸入圖片名", onCorrect: "謝謝你的合作，你的圖片名正確" }).regexValidator({ regExp: "picture", dataType: "enum", onError: "圖片名格式不正確" });
$("#rar").formValidator({ onShow: "請輸入壓縮文件名", onCorrect: "謝謝你的合作，你的壓縮文件名正確" }).regexValidator({ regExp: "rar", dataType: "enum", onError: "壓縮文件名格式不正確" });
$("#qq").formValidator({ onShow: "請輸入QQ號碼", onCorrect: "謝謝你的合作，你的QQ號碼正確" }).regexValidator({ regExp: "qq", dataType: "enum", onError: "QQ號碼格式不正確" });
$("#dh").formValidator({ onShow: "請輸入國內電話", onfocus: "例如：0577-88888888或省略區號88888888", onCorrect: "謝謝你的合作，你的國內電話正確" }).regexValidator({ regExp: "tel", dataType: "enum", onError: "國內電話格式不正確" });
$("#yhm").formValidator({ onShow: "請輸入用戶名", onCorrect: "謝謝你的合作，你的用戶名正確" }).regexValidator({ regExp: "username", dataType: "enum", onError: "用戶名格式不正確" });
$("#zm").formValidator({ onShow: "請輸入字母", onCorrect: "謝謝你的合作，你的字母正確" }).regexValidator({ regExp: "letter", dataType: "enum", onError: "字母格式不正確" });
$("#dxzm").formValidator({ onShow: "請輸入大寫字母", onCorrect: "謝謝你的合作，你的大寫字母正確" }).regexValidator({ regExp: "letter_u", dataType: "enum", onError: "大寫字母格式不正確" });
$("#xxzm").formValidator({ onShow: "請輸入小寫字母", onCorrect: "謝謝你的合作，你的小寫字母正確" }).regexValidator({ regExp: "letter_l", dataType: "enum", onError: "小寫字母格式不正確" });
$("#sfz").formValidator({ onShow: "請輸入身份證", onCorrect: "謝謝你的合作，你的身份證正確" }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "身份證格式不正確" });
});
</script>
~~~
[](javascript:void(0); "復制代碼")
**5.效果圖：**
**5.中函數參數說明：**
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""要跟源目標進行比較的目標IDoperateor比較符號"="一共有如下幾種類型:=、!=、>、>=、<、<=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、texttimeout超時設置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號alertmessagefalse是否彈出窗口autotipfalse是否自動構建提示層errorfocustrue發生錯誤的時候，第一個出錯控件是否獲得焦點forcevalidtrue是否一直輸入正確為止才允許離開焦點widewordtrue是否把一個全角字符當做2個長度onsuccessnull該組校驗通過后的回調函數,返回false，阻止表單的提交submitoncefalse校驗通過后，是否灰掉所有的提交按鈕onerrornull該組校驗失敗后的回調函數， 有兩個參數 參數1一個校驗沒有通過的錯誤信息參數2一個校驗沒有通過的元素對象參數3所有的錯誤信息數組，你可以通過$.map來遍歷debugfalse是否處于調試模式。true:不提交表單$.formValidator.pageIsValid一個參數： 不是配置類型validatorgroup"1"你要針對哪個組進行驗證$.formValidator.isOneValid一個參數： 當時設置驗證的表單元素ID。返回是否校驗成功的信息。$.formValidator.setFailStatefunction("tipid","顯示的信息")在showword模式下，如果你的額外校驗沒有通過，你可以通過它來設置成失敗信息和狀態$.formValidator.getLengthfunction("表單元素id")checkbox或radiobutton表示(同組)選擇的個數。對select-one，選擇索引的值對select-multiple，inputValidator里的參數min和max表示選擇的個數其它input表示的表示字符長度。$.formValidator.retSetTipStatefunction(校驗組號) 來把該組的提示內容恢復到onshow狀態$.formValidator.reloadAutoTip重新定位自動構建的提示層
**6.添加修改說明：**
~~~
$.formValidator.reloadAutoTip(); //重新加載表單驗證樣式
if(!$.formValidator.pageIsValid('1')) return false; //如果不通過則不提交
~~~
[](javascript:void(0); "復制代碼")
~~~
$(document).ready(function () {
$.formValidator.initConfig({ formID: "form1", onError: function () { alert("校驗沒有通過，具體錯誤請看錯誤提示") } });
$("#name").formValidator({ onShow: "請輸入姓名！", onFocus: "輸入一個到十個字符", onCorrect: "輸入正確，謝謝您的合作！" }).inputValidator({ min: 1, max: 20, onError: "輸入長度，不對！" });
$("#timelong").formValidator({ onShow: "請輸入路演時長！", onFocus: "輸入格式為正整數！", onCorrect: "輸入正確，謝謝您的合作！" }).regexValidator({ regExp:"intege1",dataType: "enum", onError: "您輸入的時長格式不正確！" });
$("#address").formValidator({ onShow: "請輸入路演平臺名稱！", onFocus: "輸入一個到五十個字符", onCorrect: "輸入正確，謝謝您的合作！" }).inputValidator({ min: 1, max: 50, onError: "輸入長度，不對！" });
$("#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: "輸入格式不正確！" });
$("#time").formValidator({ onCorrect: "格式正確" }).functionValidator({fun:isDateTime, onError: "輸入格式，不對！" });
$("#txtcontent").formValidator({ onShow: "請輸入專家簡介！", onFocus: "輸入一個到一百個字符", onCorrect: "輸入正確，謝謝您的合作！" }).inputValidator({ min: 1, max: 100, onError: "輸入長度，不對！" });
});
~~~
[](javascript:void(0); "復制代碼")
?ajax驗證用戶是否存在
js代碼 (html中一定要設置name值，否則動態是獲取不到值的)
View Code
一般處理程序代碼
View Code
國內另外一款表單驗證js：[http://validform.rjboy.cn/](http://validform.rjboy.cn/)
