- 對(duì)非ie的支持
- 增加了內(nèi)置表達(dá)式和內(nèi)置提示
- 增加了顯示方式(彈出式和頁(yè)面顯示式)
- 增加了顯示一條和顯示全部
- 進(jìn)行了封裝(CLASS_CHECK)
- 支持外接函數(shù)或表達(dá)式(應(yīng)用在密碼一致)
- 簡(jiǎn)化了調(diào)用方式,所有操作只需要<script language='javascript' src='checkform.js'>,然后在HTML里定義各標(biāo)簽驗(yàn)證格式
- 對(duì)IE增加了對(duì)鍵盤(pán)輸入的限制(如:定義usage='int'時(shí),輸入框只能輸入數(shù)字(非IE無(wú)效)
- 增加了對(duì)disabled的不驗(yàn)證
- 自定義報(bào)警方式(重寫(xiě)showMessageEx方法)
?
聲明:?對(duì)本程序可以任意復(fù)制傳播,但請(qǐng)保留聲明部分,對(duì)于內(nèi)置的表達(dá)式有些沒(méi)有做到很?chē)?yán)格,如果你有好的建議和意見(jiàn),歡迎郵件和我聯(lián)系或者上我的博客留言?
簡(jiǎn)介:
??? 本程序只需要對(duì)需要驗(yàn)證的標(biāo)簽設(shè)置三個(gè)屬性:usage,exp,tip
?
-
usage???? :?內(nèi)置格式或表達(dá)式或函數(shù)
-
exp????????:?正則表達(dá)式(注意如果指定了usage則忽略exp)
-
tip????????? :?出錯(cuò)提示(如果是內(nèi)置格式可以不要此屬性,有缺省提示)
?
??? 調(diào)用時(shí)只需要引用<script language='javascript' src='checkform.js'></script>,然后為每個(gè)標(biāo)記增加以上3個(gè)屬性(不一定需要全部) ,注意本js的默認(rèn)編碼是gb2312,如果你的.net程序是utf-8,可以把js另存為utf-8格式的,或者該webconfig里編碼為gb2312
?
演示:
下載:
基本表達(dá)式演示代碼:
<HTML>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
<HEAD>
<SCRIPT?language=JavaScript?src="checkform.js"></script>
<SCRIPT?language=JavaScript>
function?test()
{
????return?document.getElementById('password').value==document.getElementById('rpassword').value;
}
</SCRIPT>
</HEAD>
<BODY>基本表達(dá)式測(cè)試:?
<FORM?name=form1?>
????test:<INPUT?name=test>不驗(yàn)證<BR>
????姓名:<INPUT?name=user?Tip="姓名不能為空"?Exp=""?disabled=true>Disabled不驗(yàn)證<BR>
????賬號(hào):<INPUT?name=id?Tip="賬號(hào)不能為空"?Exp="[^?]+">不能為空<BR>
????IP:<INPUT?name=iP?usage="ip4">ip<BR>
????數(shù)字<INPUT?name="nn"?usage="int"?tip="error">num<br>
????<INPUT?type=submit?value=提交FORM1查詢(xún)內(nèi)容>
</form>
<form?name=form2>
????數(shù)字<INPUT?name="nn"?usage="int">num<br>
????密碼:<INPUT?type=password?id="password"?name=password?Tip="密碼六位以上"?Exp="\S{6,}">六位以上<BR>
????重復(fù)密碼<INPUT?type=password?id="rpassword"?name=rpassword?usage="test()"?tip="重復(fù)密碼不一致!"?>重復(fù)密碼<BR>
????電話(huà):<INPUT?name=number?Tip="電話(huà)號(hào)碼含有非法字符"?Exp="^\d+$"><BR>
????相片上傳:<INPUT?type=file?name=pic?Tip="相片應(yīng)該為JPG,BMP格式的"?Exp="(.*)(\.jpg|\.bmp)$"><BR>
????出生日期:<INPUT?name=dt?Tip="日期格式2004-08-10"?Exp="^\d{4}\-\d{1,2}-\d{1,2}$">日期格式2004-08-10<BR>
????省份:?<SELECT?name=sel?Tip="請(qǐng)選擇所在省份"?Exp="^0$"><OPTION?value=""?selected>請(qǐng)選擇<OPTION?value=1>福建省<OPTION?value=2>湖北省</OPTION></SELECT>?<BR>
????選擇你喜歡的運(yùn)動(dòng):<BR>游泳<INPUT?type=checkbox?name=c?Tip="請(qǐng)選擇2項(xiàng)或以上"?Exp="^0{2,}$"?disabled>?籃球<INPUT?type=checkbox?name=c>?足球<INPUT?type=checkbox?name=c>?排球<INPUT?type=checkbox?name=c>?<BR>
????你的學(xué)歷:?大學(xué)<INPUT?type=radio?name=r?Tip="請(qǐng)選擇一項(xiàng)學(xué)歷"?Exp="^0$">?中學(xué)<INPUT?type=radio?name=r>?小學(xué)<INPUT?type=radio?name=r>?<BR>
????個(gè)人介紹:?<TEXTAREA?name=txts?Tip="個(gè)人介紹不能為空,且不少于20字"?Exp="^[\s|\S]{20,}$"></TEXTAREA>20個(gè)字以上
????<INPUT?type=BUTTON?value=提交FORM2查詢(xún)內(nèi)容?onclick="if(g_check.checkForm(this.form))alert();">
</FORM>
</BODY>
</HTML>
內(nèi)置表達(dá)式演示代碼:
<HTML>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
<HEAD>
<SCRIPT?language=JavaScript?src="checkform.js"></script>
</HEAD>
<BODY>內(nèi)置表達(dá)式測(cè)試:?
<FORM?name=form1?>
????賬號(hào):<INPUT?name=id?usage="notempty">不能為空<BR>
????整數(shù):<INPUT?usage="int"?>46<BR>
????正整數(shù):<INPUT?usage="int+"?>13試試能不能輸入非數(shù)字<BR>
????負(fù)整數(shù):<INPUT?usage="int-"?>-45<BR>
????浮點(diǎn)數(shù):<INPUT?usage="float"?>56.4<BR>
????正浮點(diǎn)數(shù):<INPUT?usage="float+"?>1.0<BR>
????負(fù)浮點(diǎn)數(shù):<INPUT?usage="float-"?>-1.0<BR>
????數(shù)字:<INPUT?usage="num"?>345<BR>
????正數(shù):<INPUT?usage="num+"?>+1<BR>
????負(fù)數(shù):<INPUT?usage="num-"?>-1.0<BR>????
????郵箱:<INPUT??usage="email">ttyp@21cn.com<BR>
????顏色:<INPUT??usage="color">#f0f0f0<BR>
????連接:<INPUT??usage="url">http://www.cnblogs.com/ttyp<BR>
????中文:<INPUT??usage="chinese">只能中文<BR>
????ascii:<INPUT??usage="ascii">只能abc<BR>
????郵編:<INPUT??usage="zipcode">200083<BR>
????手機(jī):<INPUT??usage="mobile">13678452345<BR>????
????IP:<INPUT??usage="ip4">192.168.0.1<BR>
????圖片:<INPUT?type=file?usage="picture">c:\a.jpg<BR>
????壓縮文件:<INPUT?type=file?usage="rar">c:\a.rar<BR>
????日期:<INPUT?usage="date">2005-04-12<BR>
????<INPUT?type=submit?value=提交查詢(xún)內(nèi)容>
</FORM>
</BODY>
</HTML>
單條彈出式提示:
<HTML>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
<HEAD>
<SCRIPT?language=JavaScript?src="checkform.js"></script>
<SCRIPT?LANGUAGE="JavaScript">
<!--
//彈出式報(bào)警
g_check.alert????=?true;
//單條報(bào)警
g_check.showAll?=?false;
function?test()
{
????try
????{
????????var?aa?=?document.getElementById("a").value;
????????var?bb?=?document.getElementById("b").value;
????????var?cc?=?document.getElementById("c").value;
????????if(!isNaN(aa)&&!isNaN(bb)&&!isNaN(cc)&&aa.length>0&&bb.length>0&&cc.length>0)
????????{
????????????return?aa*1+bb*1>cc*1;
????????}
????????else
????????{
????????????return?false;
????????}
????}catch(e){alert();return?false;}
}
function?submitme(f){
????if(g_check.checkForm(f))f.submit();
}
//-->
</SCRIPT>
</HEAD>
<BODY>單條彈出式提示測(cè)試:?
<FORM?name=form1?>
????a:<INPUT?id=a?usage="num"><BR>
????b:<INPUT?id=b?usage="num"?><BR>
????c:<INPUT?id=c?usage="test()"?tip="a+b>c">a+b>c<BR>
????
????<INPUT?type=button?value=普通按鈕提交?onclick="submitme(this.form)">
</FORM>
</BODY>
</HTML>
checkForm.js
下載