- 对非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
下载