欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery表單驗證使用插件formValidator

 更新時間：2012年11月10日 10:56:07   作者：  
jquery表單驗證使用插件formValidator，可供有需求的朋友參考
1.首先在項目中添加必備js與css

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

復(fù)制代碼 代碼如下:

<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> <!--表單驗證擴(kuò)展庫-->
<link href="formValidator1/style/validator.css" rel="stylesheet" type="text/css" /><!--表單驗證樣式表-->

3.<body>中要驗證的標(biāo)簽（做一些常用的演示）
復(fù)制代碼 代碼如下:

<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">身份證(正則表達(dá)式庫):</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">身份證(外部函數(shù)):</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">整數(shù):</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">正整數(shù):</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">負(fù)整數(shù):</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">數(shù)字:</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">正數(shù)（正整數(shù) + 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">負(fù)數(shù)（負(fù)整數(shù) + 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">浮點(diǎn)數(shù):</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">正浮點(diǎn)數(shù):</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">負(fù)浮點(diǎn)數(shù):</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">非負(fù)浮點(diǎn)數(shù)（正浮點(diǎn)數(shù) + 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">非正浮點(diǎn)數(shù)（負(fù)浮點(diǎn)數(shù) + 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">手機(jī):</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">國內(nèi)電話:</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>

4.<script>中的代碼
復(fù)制代碼 代碼如下:

<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: "請輸入整數(shù)", onCorrect: "謝謝你的合作，你的整數(shù)正確" }).regexValidator({ regExp: "intege", dataType: "enum", onError: "整數(shù)格式不正確" });
$("#zzs").formValidator({ onShow: "請輸入正整數(shù)", onCorrect: "謝謝你的合作，你的正整數(shù)正確" }).regexValidator({ regExp: "intege1", dataType: "enum", onError: "正整數(shù)格式不正確" });
$("#fzs").formValidator({ onShow: "請輸入負(fù)整數(shù)", onCorrect: "謝謝你的合作，你的負(fù)整數(shù)正確" }).regexValidator({ regExp: "intege2", dataType: "enum", onError: "負(fù)整數(shù)格式不正確" });
$("#sz").formValidator({ onShow: "請輸入數(shù)字", onCorrect: "謝謝你的合作，你的數(shù)字正確" }).regexValidator({ regExp: "num", dataType: "enum", onError: "數(shù)字格式不正確" });
$("#zs1").formValidator({ onShow: "請輸入正數(shù)", onCorrect: "謝謝你的合作，你的正數(shù)正確" }).regexValidator({ regExp: "num1", dataType: "enum", onError: "正數(shù)格式不正確" });
$("#fs").formValidator({ onShow: "請輸入負(fù)數(shù)", onCorrect: "謝謝你的合作，你的負(fù)數(shù)正確" }).regexValidator({ regExp: "num2", dataType: "enum", onError: "負(fù)數(shù)格式不正確" });
$("#sj").formValidator({ onShow: "請輸入你的手機(jī)號碼", onfocus: "必須是13或15打頭哦", onCorrect: "謝謝你的合作，你的手機(jī)號碼正確" }).regexValidator({ regExp: "mobile", dataType: "enum", onError: "手機(jī)號碼格式不正確" });
//$("#").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: "請輸入浮點(diǎn)數(shù)", onCorrect: "謝謝你的合作，你的浮點(diǎn)數(shù)正確" }).regexValidator({ regExp: "decmal", dataType: "enum", onError: "浮點(diǎn)數(shù)格式不正確" });
$("#zfds").formValidator({ onShow: "請輸入正浮點(diǎn)數(shù)", onCorrect: "謝謝你的合作，你的正浮點(diǎn)數(shù)正確" }).regexValidator({ regExp: "decmal1", dataType: "enum", onError: "正浮點(diǎn)數(shù)格式不正確" });
$("#ffds").formValidator({ onShow: "請輸入負(fù)浮點(diǎn)數(shù)", onCorrect: "謝謝你的合作，你的負(fù)浮點(diǎn)數(shù)正確" }).regexValidator({ regExp: "decmal2", dataType: "enum", onError: "負(fù)浮點(diǎn)數(shù)格式不正確" });
$("#fffds").formValidator({ onShow: "請輸入非負(fù)浮點(diǎn)數(shù)", onCorrect: "謝謝你的合作，你的非負(fù)浮點(diǎn)數(shù)正確" }).regexValidator({ regExp: "decmal4", dataType: "enum", onError: "非負(fù)浮點(diǎn)數(shù)格式不正確" });
$("#fzfds").formValidator({ onShow: "請輸入非正浮點(diǎn)數(shù)", onCorrect: "謝謝你的合作，你的非正浮點(diǎn)數(shù)正確" }).regexValidator({ regExp: "decmal5", dataType: "enum", onError: "非正浮點(diǎn)數(shù)格式不正確" });
$("#ys").formValidator({ onShow: "請輸入16進(jìn)制顏色", onCorrect: "謝謝你的合作，你的16進(jìn)制顏色正確" }).regexValidator({ regExp: "color", dataType: "enum", onError: "16進(jìn)制顏色格式不正確" });
$("#yb").formValidator({ onShow: "請輸入郵編", onfocus: "6位數(shù)字組成的哦", 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: "請輸入國內(nèi)電話", onfocus: "例如：0577-88888888或省略區(qū)號88888888", onCorrect: "謝謝你的合作，你的國內(nèi)電話正確" }).regexValidator({ regExp: "tel", dataType: "enum", onError: "國內(nèi)電話格式不正確" });
$("#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>

5.效果圖：

 
6.<script>中函數(shù)參數(shù)說明：

formValidator: 用來做初始化的類型，必須先執(zhí)行。（"√"為showalert可用參數(shù)）
屬性 屬性名稱 默認(rèn)值 showalert 詳細(xì)解釋
validatorgroup 校驗組 "1" √ 一個頁面的控件可以分成多個組，分開校驗
empty 是否可以為空 false √  
automodify 輸入錯誤離開焦點(diǎn)的時候，自動修復(fù)錯誤 true √ 先給出提示然后，自動修復(fù)，目前只支持text、file、textarea三種類型
onempty 空時候的提示 "輸入內(nèi)容為空"   可以為空，為空時候的提示。為空者不顯示
onshow 顯示時候的提示 "請輸入內(nèi)容"   為空者不顯示
onfocus 獲得焦點(diǎn)的提示 "請輸入內(nèi)容"   為空者不顯示
oncorrect 輸入正確后的提示 "輸入正確"   當(dāng)你焦點(diǎn)離開控件的時候，如果輸入正確將出現(xiàn)該提示。為空者不顯示
tipid 顯示錯誤的容器ID 表單ID+"Tip"   如果不自動構(gòu)建提示層，表示提示成的ID號
如果自動構(gòu)建提示層，表示提示層相對的目標(biāo)控件
tipcss 自動構(gòu)建的提示層的樣式 "left":"10px",
"top":"1px",
"height":"20px",
"width":"250px"		   主要用于定位自動構(gòu)建的提示層
forcevalid 強(qiáng)制輸入的值必須有效 true √ 是否把一個全角字符當(dāng)做2個長度的參數(shù)
ajax 提交服務(wù)器 true √ ajaxValidator是否把該表單提交給服務(wù)器
defaultvalue 默認(rèn)值 null √ 所有input和select表單。如果你不設(shè)置就保持原值，一旦設(shè)置就設(shè)為默認(rèn)值。
triggerevent 默認(rèn)值 blur √ 當(dāng)前支持2種屬性值:
blur:失去焦點(diǎn)的時候觸發(fā)
change:當(dāng)輸入框里的值發(fā)生改變的時候觸發(fā)
       
inputValidator：  
屬性 屬性名稱 默認(rèn)值 詳細(xì)解釋
type 比較類型 "size" (對select無效)
"size":表示比較長度 ，默認(rèn)值
"number":數(shù)值型比較
"string":字符型比較
"date":短日期類型
"datetime":長日期類型
min 最小長度/值 0 默認(rèn)數(shù)值型。如果進(jìn)行字符比較，請收入字符型
對select-one而言inputValidator里的參數(shù)min和max表示選擇的索引號范圍
對select-multiple而言inputValidator里的參數(shù)min和max表示選擇的個數(shù)
max 最大長度/值 99999999999 同上
onerror 發(fā)生錯誤的提示 "輸入錯誤" 為空者不顯示。
onerrormin 比min屬性小的提示 null 當(dāng)用戶輸入的值比min屬性小的時候的錯誤提示
onerrormax 比max屬性大的提示 null 當(dāng)用戶輸入的值比max屬性大的時候的錯誤提示
empty 控件文本值是否允許兩邊為空 兩邊都允許出現(xiàn)空 默認(rèn)值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左邊是否允許為空
rightempty:表示右邊是否允許為空
emptyerror：出現(xiàn)該錯誤的時候的提示，如果為null，則利用onerror屬性來提示錯誤。
       
compareValidator：  
屬性 屬性名稱 默認(rèn)值 詳細(xì)解釋
desid 要比較控件的ID "" 要跟源目標(biāo)進(jìn)行比較的目標(biāo)ID
operateor 比較符號 "=" 一共有如下幾種類型:=、!=、>、>=、<、<=
datatype 數(shù)據(jù)類型 "string" 目前只支持2種:"string"、"number","datetime","date"
onerror 發(fā)生錯誤的提示 "輸入錯誤" 為空者不顯示。
       
regexValidator:  
屬性 屬性名稱 默認(rèn)值 詳細(xì)解釋
regexp 正則表達(dá)式或表達(dá)式數(shù)組 "" 采用的是顯式構(gòu)造函數(shù)new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作轉(zhuǎn)義字符，所以在使用顯示構(gòu)造函數(shù)構(gòu)造實(shí)例對象的時候，需要使用'\\' 代替'\'
param 附加參數(shù) "i" g：代表可以進(jìn)行全局匹配。
i：代表不區(qū)分大小寫匹配。
m：代表可以進(jìn)行多行匹配。
可以任意組合,當(dāng)然也可以不加參數(shù)
comparetype 比較類型 "||" "||"或的關(guān)系   "&&"并列
datatype 數(shù)據(jù)類型 "string" "string":自己寫的表達(dá)式，"enum":枚舉名。具體請見demo3.htm
你可以自己修改、添加formValidatorRegex.js里的枚舉項目名和表達(dá)式。
onerror: 發(fā)生錯誤的提示 "輸入錯誤" 為空者不顯示。
       
ajaxValidator: 幾乎所有的屬性跟$.ajax()的屬性一樣，請參考$.ajax()函數(shù)的幫助
屬性 屬性名稱 默認(rèn)值 詳細(xì)解釋
type 請求的類型 "GET" "POST" 或 "GET"
url 發(fā)送到的URL地址 "" 在服務(wù)器端，你可以通過name為clientid獲取觸發(fā)驗證的控件ID名
datatype 返回的數(shù)據(jù)類型 "html" xml、html、script、json、text
timeout 超時設(shè)置 999  
data 數(shù)據(jù) ""  
async 是否以異步的方式發(fā)送 true  
success 當(dāng)請求成功時調(diào)用的函數(shù) null  
processdata 自動處理返回的數(shù)據(jù)為字符串 true 在默認(rèn)的情況下，如果data選項傳進(jìn)的數(shù)據(jù)是一個對象而不是字符串，將會自動地被處理和轉(zhuǎn)換成一個查詢字符串
complete 當(dāng)請求完成時調(diào)用的函數(shù) null  
beforesend 當(dāng)請求前時調(diào)用的函數(shù) null 有個一個參數(shù)，根$.ajax里的beforeSend參數(shù)一樣。
buttons 你點(diǎn)提交的按鈕(組)jQuery對象 null 當(dāng)你觸發(fā)了ajax校驗，buttons里對應(yīng)的按鈕（組）就會灰掉，一直等待服務(wù)器返回數(shù)據(jù)為止
error 當(dāng)請求失敗時調(diào)用的函數(shù) "請求失敗" 你可以自己定義這個錯誤，在error里自動打出。為空者不顯示。
 
functionValidator
屬性 屬性名稱 默認(rèn)值 返回值的解釋
fun 外部函數(shù)名()
參數(shù)1:元素的值,
參數(shù)2:元素對象		 默認(rèn)當(dāng)作處理過程
true/false 校驗成功/失敗
字符串 校驗失敗，返回值當(dāng)作自定義錯誤
無 處理過程
onerror 發(fā)生錯誤的提示 "輸入錯誤" 函數(shù)return false的時候，顯示該錯誤信息
   
公共函數(shù): 主要是設(shè)置全局參數(shù)和判斷是否通過校驗
函數(shù)名 函數(shù)說明
$.formValidator.initConfig 參數(shù)：配置類型
屬性 默認(rèn)值 說明
validatorgroup "1" 你要針對哪個組進(jìn)行配置
formid "" 要自動注冊pageIsValid函數(shù)的表單ID號
alertmessage false 是否彈出窗口
autotip false 是否自動構(gòu)建提示層
errorfocus true 發(fā)生錯誤的時候，第一個出錯控件是否獲得焦點(diǎn)
forcevalid true 是否一直輸入正確為止才允許離開焦點(diǎn)
wideword true 是否把一個全角字符當(dāng)做2個長度
onsuccess null 該組校驗通過后的回調(diào)函數(shù),返回false，阻止表單的提交
submitonce false 校驗通過后，是否灰掉所有的提交按鈕
onerror null 該組校驗失敗后的回調(diào)函數(shù)， 有兩個參數(shù)
參數(shù)1 一個校驗沒有通過的錯誤信息
參數(shù)2 一個校驗沒有通過的元素對象
參數(shù)3 所有的錯誤信息數(shù)組，你可以通過$.map來遍歷
debug false 是否處于調(diào)試模式。true:不提交表單
$.formValidator.pageIsValid 一個參數(shù)： 不是配置類型
validatorgroup "1" 你要針對哪個組進(jìn)行驗證
$.formValidator.isOneValid 一個參數(shù)： 當(dāng)時設(shè)置驗證的表單元素ID。
返回是否校驗成功的信息。
$.formValidator.setFailState function("tipid","顯示的信息")
在showword模式下，如果你的額外校驗沒有通過，你可以通過它來設(shè)置成失敗信息和狀態(tài)
$.formValidator.getLength function("表單元素id")
checkbox或radiobutton表示(同組)選擇的個數(shù)。
對select-one，選擇索引的值
對select-multiple，inputValidator里的參數(shù)min和max表示選擇的個數(shù)
其它input表示的表示字符長度。
$.formValidator.retSetTipState function(校驗組號) 來把該組的提示內(nèi)容恢復(fù)到onshow狀態(tài)
$.formValidator.reloadAutoTip 重新定位自動構(gòu)建的提示層
formValidator: 用來做初始化的類型，必須先執(zhí)行。（"√"為showalert可用參數(shù)）
屬性 屬性名稱 默認(rèn)值 showalert 詳細(xì)解釋
validatorgroup 校驗組 "1" √ 一個頁面的控件可以分成多個組，分開校驗
empty 是否可以為空 false √  
automodify 輸入錯誤離開焦點(diǎn)的時候，自動修復(fù)錯誤 true √ 先給出提示然后，自動修復(fù)，目前只支持text、file、textarea三種類型
onempty 空時候的提示 "輸入內(nèi)容為空"   可以為空，為空時候的提示。為空者不顯示
onshow 顯示時候的提示 "請輸入內(nèi)容"   為空者不顯示
onfocus 獲得焦點(diǎn)的提示 "請輸入內(nèi)容"   為空者不顯示
oncorrect 輸入正確后的提示 "輸入正確"   當(dāng)你焦點(diǎn)離開控件的時候，如果輸入正確將出現(xiàn)該提示。為空者不顯示
tipid 顯示錯誤的容器ID 表單ID+"Tip"   如果不自動構(gòu)建提示層，表示提示成的ID號
如果自動構(gòu)建提示層，表示提示層相對的目標(biāo)控件
tipcss 自動構(gòu)建的提示層的樣式 "left":"10px",
"top":"1px",
"height":"20px",
"width":"250px"		   主要用于定位自動構(gòu)建的提示層
forcevalid 強(qiáng)制輸入的值必須有效 true √ 是否把一個全角字符當(dāng)做2個長度的參數(shù)
ajax 提交服務(wù)器 true √ ajaxValidator是否把該表單提交給服務(wù)器
defaultvalue 默認(rèn)值 null √ 所有input和select表單。如果你不設(shè)置就保持原值，一旦設(shè)置就設(shè)為默認(rèn)值。
triggerevent 默認(rèn)值 blur √ 當(dāng)前支持2種屬性值:
blur:失去焦點(diǎn)的時候觸發(fā)
change:當(dāng)輸入框里的值發(fā)生改變的時候觸發(fā)
       
inputValidator：  
屬性 屬性名稱 默認(rèn)值 詳細(xì)解釋
type 比較類型 "size" (對select無效)
"size":表示比較長度 ，默認(rèn)值
"number":數(shù)值型比較
"string":字符型比較
"date":短日期類型
"datetime":長日期類型
min 最小長度/值 0 默認(rèn)數(shù)值型。如果進(jìn)行字符比較，請收入字符型
對select-one而言inputValidator里的參數(shù)min和max表示選擇的索引號范圍
對select-multiple而言inputValidator里的參數(shù)min和max表示選擇的個數(shù)
max 最大長度/值 99999999999 同上
onerror 發(fā)生錯誤的提示 "輸入錯誤" 為空者不顯示。
onerrormin 比min屬性小的提示 null 當(dāng)用戶輸入的值比min屬性小的時候的錯誤提示
onerrormax 比max屬性大的提示 null 當(dāng)用戶輸入的值比max屬性大的時候的錯誤提示
empty 控件文本值是否允許兩邊為空 兩邊都允許出現(xiàn)空 默認(rèn)值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左邊是否允許為空
rightempty:表示右邊是否允許為空
emptyerror：出現(xiàn)該錯誤的時候的提示，如果為null，則利用onerror屬性來提示錯誤。
       
compareValidator：  
屬性 屬性名稱 默認(rèn)值 詳細(xì)解釋
desid 要比較控件的ID "" 要跟源目標(biāo)進(jìn)行比較的目標(biāo)ID
operateor 比較符號 "=" 一共有如下幾種類型:=、!=、>、>=、<、<=
datatype 數(shù)據(jù)類型 "string" 目前只支持2種:"string"、"number","datetime","date"
onerror 發(fā)生錯誤的提示 "輸入錯誤" 為空者不顯示。
       
regexValidator:  
屬性 屬性名稱 默認(rèn)值 詳細(xì)解釋
regexp 正則表達(dá)式或表達(dá)式數(shù)組 "" 采用的是顯式構(gòu)造函數(shù)new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作轉(zhuǎn)義字符，所以在使用顯示構(gòu)造函數(shù)構(gòu)造實(shí)例對象的時候，需要使用'\\' 代替'\'
param 附加參數(shù) "i" g：代表可以進(jìn)行全局匹配。
i：代表不區(qū)分大小寫匹配。
m：代表可以進(jìn)行多行匹配。
可以任意組合,當(dāng)然也可以不加參數(shù)
comparetype 比較類型 "||" "||"或的關(guān)系   "&&"并列
datatype 數(shù)據(jù)類型 "string" "string":自己寫的表達(dá)式，"enum":枚舉名。具體請見demo3.htm
你可以自己修改、添加formValidatorRegex.js里的枚舉項目名和表達(dá)式。
onerror: 發(fā)生錯誤的提示 "輸入錯誤" 為空者不顯示。
       
ajaxValidator: 幾乎所有的屬性跟$.ajax()的屬性一樣，請參考$.ajax()函數(shù)的幫助
屬性 屬性名稱 默認(rèn)值 詳細(xì)解釋
type 請求的類型 "GET" "POST" 或 "GET"
url 發(fā)送到的URL地址 "" 在服務(wù)器端，你可以通過name為clientid獲取觸發(fā)驗證的控件ID名
datatype 返回的數(shù)據(jù)類型 "html" xml、html、script、json、text
timeout 超時設(shè)置 999  
data 數(shù)據(jù) ""  
async 是否以異步的方式發(fā)送 true  
success 當(dāng)請求成功時調(diào)用的函數(shù) null  
processdata 自動處理返回的數(shù)據(jù)為字符串 true 在默認(rèn)的情況下，如果data選項傳進(jìn)的數(shù)據(jù)是一個對象而不是字符串，將會自動地被處理和轉(zhuǎn)換成一個查詢字符串
complete 當(dāng)請求完成時調(diào)用的函數(shù) null  
beforesend 當(dāng)請求前時調(diào)用的函數(shù) null 有個一個參數(shù)，根$.ajax里的beforeSend參數(shù)一樣。
buttons 你點(diǎn)提交的按鈕(組)jQuery對象 null 當(dāng)你觸發(fā)了ajax校驗，buttons里對應(yīng)的按鈕（組）就會灰掉，一直等待服務(wù)器返回數(shù)據(jù)為止
error 當(dāng)請求失敗時調(diào)用的函數(shù) "請求失敗" 你可以自己定義這個錯誤，在error里自動打出。為空者不顯示。
 
functionValidator
屬性 屬性名稱 默認(rèn)值 返回值的解釋
fun 外部函數(shù)名()
參數(shù)1:元素的值,
參數(shù)2:元素對象		 默認(rèn)當(dāng)作處理過程
true/false 校驗成功/失敗
字符串 校驗失敗，返回值當(dāng)作自定義錯誤
無 處理過程
onerror 發(fā)生錯誤的提示 "輸入錯誤" 函數(shù)return false的時候，顯示該錯誤信息
   
公共函數(shù): 主要是設(shè)置全局參數(shù)和判斷是否通過校驗
函數(shù)名 函數(shù)說明
$.formValidator.initConfig 參數(shù)：配置類型
屬性 默認(rèn)值 說明
validatorgroup "1" 你要針對哪個組進(jìn)行配置
formid "" 要自動注冊pageIsValid函數(shù)的表單ID號
alertmessage false 是否彈出窗口
autotip false 是否自動構(gòu)建提示層
errorfocus true 發(fā)生錯誤的時候，第一個出錯控件是否獲得焦點(diǎn)
forcevalid true 是否一直輸入正確為止才允許離開焦點(diǎn)
wideword true 是否把一個全角字符當(dāng)做2個長度
onsuccess null 該組校驗通過后的回調(diào)函數(shù),返回false，阻止表單的提交
submitonce false 校驗通過后，是否灰掉所有的提交按鈕
onerror null 該組校驗失敗后的回調(diào)函數(shù)， 有兩個參數(shù)
參數(shù)1 一個校驗沒有通過的錯誤信息
參數(shù)2 一個校驗沒有通過的元素對象
參數(shù)3 所有的錯誤信息數(shù)組，你可以通過$.map來遍歷
debug false 是否處于調(diào)試模式。true:不提交表單
$.formValidator.pageIsValid 一個參數(shù)： 不是配置類型
validatorgroup "1" 你要針對哪個組進(jìn)行驗證
$.formValidator.isOneValid 一個參數(shù)： 當(dāng)時設(shè)置驗證的表單元素ID。
返回是否校驗成功的信息。
$.formValidator.setFailState function("tipid","顯示的信息")
在showword模式下，如果你的額外校驗沒有通過，你可以通過它來設(shè)置成失敗信息和狀態(tài)
$.formValidator.getLength function("表單元素id")
checkbox或radiobutton表示(同組)選擇的個數(shù)。
對select-one，選擇索引的值
對select-multiple，inputValidator里的參數(shù)min和max表示選擇的個數(shù)
其它input表示的表示字符長度。
$.formValidator.retSetTipState function(校驗組號) 來把該組的提示內(nèi)容恢復(fù)到onshow狀態(tài)
$.formValidator.reloadAutoTip 重新定位自動構(gòu)建的提示層
formValidator: 用來做初始化的類型，必須先執(zhí)行。（"√"為showalert可用參數(shù)）
屬性 屬性名稱 默認(rèn)值 showalert 詳細(xì)解釋
validatorgroup 校驗組 "1" √ 一個頁面的控件可以分成多個組，分開校驗
empty 是否可以為空 false √  
automodify 輸入錯誤離開焦點(diǎn)的時候，自動修復(fù)錯誤 true √ 先給出提示然后，自動修復(fù)，目前只支持text、file、textarea三種類型
onempty 空時候的提示 "輸入內(nèi)容為空"   可以為空，為空時候的提示。為空者不顯示
onshow 顯示時候的提示 "請輸入內(nèi)容"   為空者不顯示
onfocus 獲得焦點(diǎn)的提示 "請輸入內(nèi)容"   為空者不顯示
oncorrect 輸入正確后的提示 "輸入正確"   當(dāng)你焦點(diǎn)離開控件的時候，如果輸入正確將出現(xiàn)該提示。為空者不顯示
tipid 顯示錯誤的容器ID 表單ID+"Tip"   如果不自動構(gòu)建提示層，表示提示成的ID號
如果自動構(gòu)建提示層，表示提示層相對的目標(biāo)控件
tipcss 自動構(gòu)建的提示層的樣式 "left":"10px",
"top":"1px",
"height":"20px",
"width":"250px"		   主要用于定位自動構(gòu)建的提示層
forcevalid 強(qiáng)制輸入的值必須有效 true √ 是否把一個全角字符當(dāng)做2個長度的參數(shù)
ajax 提交服務(wù)器 true √ ajaxValidator是否把該表單提交給服務(wù)器
defaultvalue 默認(rèn)值 null √ 所有input和select表單。如果你不設(shè)置就保持原值，一旦設(shè)置就設(shè)為默認(rèn)值。
triggerevent 默認(rèn)值 blur √ 當(dāng)前支持2種屬性值:
blur:失去焦點(diǎn)的時候觸發(fā)
change:當(dāng)輸入框里的值發(fā)生改變的時候觸發(fā)
       
inputValidator：  
屬性 屬性名稱 默認(rèn)值 詳細(xì)解釋
type 比較類型 "size" (對select無效)
"size":表示比較長度 ，默認(rèn)值
"number":數(shù)值型比較
"string":字符型比較
"date":短日期類型
"datetime":長日期類型
min 最小長度/值 0 默認(rèn)數(shù)值型。如果進(jìn)行字符比較，請收入字符型
對select-one而言inputValidator里的參數(shù)min和max表示選擇的索引號范圍
對select-multiple而言inputValidator里的參數(shù)min和max表示選擇的個數(shù)
max 最大長度/值 99999999999 同上
onerror 發(fā)生錯誤的提示 "輸入錯誤" 為空者不顯示。
onerrormin 比min屬性小的提示 null 當(dāng)用戶輸入的值比min屬性小的時候的錯誤提示
onerrormax 比max屬性大的提示 null 當(dāng)用戶輸入的值比max屬性大的時候的錯誤提示
empty 控件文本值是否允許兩邊為空 兩邊都允許出現(xiàn)空 默認(rèn)值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左邊是否允許為空
rightempty:表示右邊是否允許為空
emptyerror：出現(xiàn)該錯誤的時候的提示，如果為null，則利用onerror屬性來提示錯誤。
       
compareValidator：  
屬性 屬性名稱 默認(rèn)值 詳細(xì)解釋
desid 要比較控件的ID "" 要跟源目標(biāo)進(jìn)行比較的目標(biāo)ID
operateor 比較符號 "=" 一共有如下幾種類型:=、!=、>、>=、<、<=
datatype 數(shù)據(jù)類型 "string" 目前只支持2種:"string"、"number","datetime","date"
onerror 發(fā)生錯誤的提示 "輸入錯誤" 為空者不顯示。
       
regexValidator:  
屬性 屬性名稱 默認(rèn)值 詳細(xì)解釋
regexp 正則表達(dá)式或表達(dá)式數(shù)組 "" 采用的是顯式構(gòu)造函數(shù)new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作轉(zhuǎn)義字符，所以在使用顯示構(gòu)造函數(shù)構(gòu)造實(shí)例對象的時候，需要使用'\\' 代替'\'
param 附加參數(shù) "i" g：代表可以進(jìn)行全局匹配。
i：代表不區(qū)分大小寫匹配。
m：代表可以進(jìn)行多行匹配。
可以任意組合,當(dāng)然也可以不加參數(shù)
comparetype 比較類型 "||" "||"或的關(guān)系   "&&"并列
datatype 數(shù)據(jù)類型 "string" "string":自己寫的表達(dá)式，"enum":枚舉名。具體請見demo3.htm
你可以自己修改、添加formValidatorRegex.js里的枚舉項目名和表達(dá)式。
onerror: 發(fā)生錯誤的提示 "輸入錯誤" 為空者不顯示。
       
ajaxValidator: 幾乎所有的屬性跟$.ajax()的屬性一樣，請參考$.ajax()函數(shù)的幫助
屬性 屬性名稱 默認(rèn)值 詳細(xì)解釋
type 請求的類型 "GET" "POST" 或 "GET"
url 發(fā)送到的URL地址 "" 在服務(wù)器端，你可以通過name為clientid獲取觸發(fā)驗證的控件ID名
datatype 返回的數(shù)據(jù)類型 "html" xml、html、script、json、text
timeout 超時設(shè)置 999  
data 數(shù)據(jù) ""  
async 是否以異步的方式發(fā)送 true  
success 當(dāng)請求成功時調(diào)用的函數(shù) null  
processdata 自動處理返回的數(shù)據(jù)為字符串 true 在默認(rèn)的情況下，如果data選項傳進(jìn)的數(shù)據(jù)是一個對象而不是字符串，將會自動地被處理和轉(zhuǎn)換成一個查詢字符串
complete 當(dāng)請求完成時調(diào)用的函數(shù) null  
beforesend 當(dāng)請求前時調(diào)用的函數(shù) null 有個一個參數(shù)，根$.ajax里的beforeSend參數(shù)一樣。
buttons 你點(diǎn)提交的按鈕(組)jQuery對象 null 當(dāng)你觸發(fā)了ajax校驗，buttons里對應(yīng)的按鈕（組）就會灰掉，一直等待服務(wù)器返回數(shù)據(jù)為止
error 當(dāng)請求失敗時調(diào)用的函數(shù) "請求失敗" 你可以自己定義這個錯誤，在error里自動打出。為空者不顯示。
 
functionValidator
屬性 屬性名稱 默認(rèn)值 返回值的解釋
fun 外部函數(shù)名()
參數(shù)1:元素的值,
參數(shù)2:元素對象		 默認(rèn)當(dāng)作處理過程
true/false 校驗成功/失敗
字符串 校驗失敗，返回值當(dāng)作自定義錯誤
無 處理過程
onerror 發(fā)生錯誤的提示 "輸入錯誤" 函數(shù)return false的時候，顯示該錯誤信息
   
公共函數(shù): 主要是設(shè)置全局參數(shù)和判斷是否通過校驗
函數(shù)名 函數(shù)說明
$.formValidator.initConfig 參數(shù)：配置類型
屬性 默認(rèn)值 說明
validatorgroup "1" 你要針對哪個組進(jìn)行配置
formid "" 要自動注冊pageIsValid函數(shù)的表單ID號
alertmessage false 是否彈出窗口
autotip false 是否自動構(gòu)建提示層
errorfocus true 發(fā)生錯誤的時候，第一個出錯控件是否獲得焦點(diǎn)
forcevalid true 是否一直輸入正確為止才允許離開焦點(diǎn)
wideword true 是否把一個全角字符當(dāng)做2個長度
onsuccess null 該組校驗通過后的回調(diào)函數(shù),返回false，阻止表單的提交
submitonce false 校驗通過后，是否灰掉所有的提交按鈕
onerror null 該組校驗失敗后的回調(diào)函數(shù)， 有兩個參數(shù)
參數(shù)1 一個校驗沒有通過的錯誤信息
參數(shù)2 一個校驗沒有通過的元素對象
參數(shù)3 所有的錯誤信息數(shù)組，你可以通過$.map來遍歷
debug false 是否處于調(diào)試模式。true:不提交表單
$.formValidator.pageIsValid 一個參數(shù)： 不是配置類型
validatorgroup "1" 你要針對哪個組進(jìn)行驗證
$.formValidator.isOneValid 一個參數(shù)： 當(dāng)時設(shè)置驗證的表單元素ID。
返回是否校驗成功的信息。
$.formValidator.setFailState function("tipid","顯示的信息")
在showword模式下，如果你的額外校驗沒有通過，你可以通過它來設(shè)置成失敗信息和狀態(tài)
$.formValidator.getLength function("表單元素id")
checkbox或radiobutton表示(同組)選擇的個數(shù)。
對select-one，選擇索引的值
對select-multiple，inputValidator里的參數(shù)min和max表示選擇的個數(shù)
其它input表示的表示字符長度。
$.formValidator.retSetTipState function(校驗組號) 來把該組的提示內(nèi)容恢復(fù)到onshow狀態(tài)
$.formValidator.reloadAutoTip 重新定位自動構(gòu)建的提示層

6.添加修改說明：
復(fù)制代碼 代碼如下:

$.formValidator.reloadAutoTip(); //重新加載表單驗證樣式
if(!$.formValidator.pageIsValid('1')) return false; //如果不通過則不提交

復(fù)制代碼 代碼如下:

$(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: "輸入格式為正整數(shù)！", 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\.&amp;%\$\-]+)*@)*((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\.\,\?\'\\\+&amp;%\$#\=~_\-]+))*$", onError: "輸入格式不正確！" });
$("#time").formValidator({ onCorrect: "格式正確" }).functionValidator({fun:isDateTime, onError: "輸入格式，不對！" });
$("#txtcontent").formValidator({ onShow: "請輸入專家簡介！", onFocus: "輸入一個到一百個字符", onCorrect: "輸入正確，謝謝您的合作！" }).inputValidator({ min: 1, max: 100, onError: "輸入長度，不對！" });
});

相關(guān)文章

最新評論