- 對非ie的支持
- 增加了內置表達式和內置提示
- 增加了顯示方式(彈出式和頁面顯示式)
- 增加了顯示一條和顯示全部
- 進行了封裝(CLASS_CHECK)
- 支持外接函數或表達式(應用在密碼一致)
- 簡化了調用方式,所有操作只需要<script language='javascript' src='checkform.js'>,然后在HTML里定義各標簽驗證格式
- 對IE增加了對鍵盤輸入的限制(如:定義usage='int'時,輸入框只能輸入數字(非IE無效)
- 增加了對disabled的不驗證
- 自定義報警方式(重寫showMessageEx方法)
?
聲明:?對本程序可以任意復制傳播,但請保留聲明部分,對于內置的表達式有些沒有做到很嚴格,如果你有好的建議和意見,歡迎郵件和我聯系或者上我的博客留言?
簡介:
??? 本程序只需要對需要驗證的標簽設置三個屬性:usage,exp,tip
?
-
usage???? :?內置格式或表達式或函數
-
exp????????:?正則表達式(注意如果指定了usage則忽略exp)
-
tip????????? :?出錯提示(如果是內置格式可以不要此屬性,有缺省提示)
?
??? 調用時只需要引用<script language='javascript' src='checkform.js'></script>,然后為每個標記增加以上3個屬性(不一定需要全部) ,注意本js的默認編碼是gb2312,如果你的.net程序是utf-8,可以把js另存為utf-8格式的,或者該webconfig里編碼為gb2312
?
演示:
下載:
基本表達式演示代碼:
<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>基本表達式測試:?
<FORM?name=form1?>
????test:<INPUT?name=test>不驗證<BR>
????姓名:<INPUT?name=user?Tip="姓名不能為空"?Exp=""?disabled=true>Disabled不驗證<BR>
????賬號:<INPUT?name=id?Tip="賬號不能為空"?Exp="[^?]+">不能為空<BR>
????IP:<INPUT?name=iP?usage="ip4">ip<BR>
????數字<INPUT?name="nn"?usage="int"?tip="error">num<br>
????<INPUT?type=submit?value=提交FORM1查詢內容>
</form>
<form?name=form2>
????數字<INPUT?name="nn"?usage="int">num<br>
????密碼:<INPUT?type=password?id="password"?name=password?Tip="密碼六位以上"?Exp="\S{6,}">六位以上<BR>
????重復密碼<INPUT?type=password?id="rpassword"?name=rpassword?usage="test()"?tip="重復密碼不一致!"?>重復密碼<BR>
????電話:<INPUT?name=number?Tip="電話號碼含有非法字符"?Exp="^\d+$"><BR>
????相片上傳:<INPUT?type=file?name=pic?Tip="相片應該為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="請選擇所在省份"?Exp="^0$"><OPTION?value=""?selected>請選擇<OPTION?value=1>福建省<OPTION?value=2>湖北省</OPTION></SELECT>?<BR>
????選擇你喜歡的運動:<BR>游泳<INPUT?type=checkbox?name=c?Tip="請選擇2項或以上"?Exp="^0{2,}$"?disabled>?籃球<INPUT?type=checkbox?name=c>?足球<INPUT?type=checkbox?name=c>?排球<INPUT?type=checkbox?name=c>?<BR>
????你的學歷:?大學<INPUT?type=radio?name=r?Tip="請選擇一項學歷"?Exp="^0$">?中學<INPUT?type=radio?name=r>?小學<INPUT?type=radio?name=r>?<BR>
????個人介紹:?<TEXTAREA?name=txts?Tip="個人介紹不能為空,且不少于20字"?Exp="^[\s|\S]{20,}$"></TEXTAREA>20個字以上
????<INPUT?type=BUTTON?value=提交FORM2查詢內容?onclick="if(g_check.checkForm(this.form))alert();">
</FORM>
</BODY>
</HTML>
內置表達式演示代碼:
<HTML>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
<HEAD>
<SCRIPT?language=JavaScript?src="checkform.js"></script>
</HEAD>
<BODY>內置表達式測試:?
<FORM?name=form1?>
????賬號:<INPUT?name=id?usage="notempty">不能為空<BR>
????整數:<INPUT?usage="int"?>46<BR>
????正整數:<INPUT?usage="int+"?>13試試能不能輸入非數字<BR>
????負整數:<INPUT?usage="int-"?>-45<BR>
????浮點數:<INPUT?usage="float"?>56.4<BR>
????正浮點數:<INPUT?usage="float+"?>1.0<BR>
????負浮點數:<INPUT?usage="float-"?>-1.0<BR>
????數字:<INPUT?usage="num"?>345<BR>
????正數:<INPUT?usage="num+"?>+1<BR>
????負數:<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>
????手機:<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=提交查詢內容>
</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">
<!--
//彈出式報警
g_check.alert????=?true;
//單條報警
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>單條彈出式提示測試:?
<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
下載