- 对非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 下载js 代码如下 ////////////////////////////////////////////////////////////////////////////////
 /**//*
*--------------- 客户端表单通用验证checkForm(oForm) -----------------
* 本程序最初是由wanghr100(灰豆宝宝.net)的checkForm基础上进行修改的,增加了很多功能,如下:
* 1.对非ie的支持
* 2.增加了内置表达式和内置提示
* 3.增加了显示方式(弹出式和页面显示式)
* 4.增加了显示一条和显示全部
* 5.进行了封装(CLASS_CHECK)
* 6.支持外接函数或表达式(应用在密码一致)
* 7.简化了调用方式,所有操作只需要<script language='javascript' src='checkform.js'>,
然后在HTML里定义各标签验证格式
* 8.对IE增加了对键盘输入的限制(如:定义usage='int'时,输入框只能输入数字(非IE无效)
* 9.增加了对disabled的不验证
* 10.自定义报警方式(重写showMessageEx方法)
* 11.能对多FORM验证,还有针对普通按钮(非submit)下的验证

*-----------------------------申明信息-----------------------------
* 版本: 0.13
* 作者: ttyp
* 邮箱: ttyp@21cn.com
* 博客: http://www.cnblogs.com/ttyp/
* 声明: 对本程序可以任意复制传播,但请保留这些声明,对于内置的表达式有些没有做到很严格,如果你
有好的建议和意见,欢迎邮件和我联系或者上我的博客留言
* 日期: 2005-9-20
* 简介:
本程序只需要对需要验证的标签设置三个属性:usage,exp,tip

usage : 内置格式或表达式或函数
exp : 正则表达式(注意如果指定了usage则忽略exp)
tip : 出错提示(如果是内置格式可以不要此属性,有缺省提示)

调用时只需要引用<script language='javascript' src='checkform.js'>,然后为每个标记
增加以上3个属性(不一定需要全部)

* 原作者: wanghr100(灰豆宝宝.net)
* email: wanghr100@126.com
*
*--------------- 客户端表单通用验证checkForm(oForm) -----------------
*/
////////////////////////////////////////////////////////////////////////////////


 function CLASS_CHECK() {
this.pass = true; //是否通过验证
this.showAll = true; //是否显示所有的验证错误
this.alert = false; //报警方式(默认alert报警)
this.message = ""; //错误内容
this.first = null; //在显示全部验证错误时的第一个错误控件(用于回到焦点)
this.cancel = false;

//定义内置格式
 var aUsage = {
"int":"^([+-]?)\\d+$", //整数
"int+":"^([+]?)\\d+$", //正整数
"int-":"^-\\d+$", //负整数
"num":"^([+-]?)\\d*\\.?\\d+$", //数字
"num+":"^([+]?)\\d*\\.?\\d+$", //正数
"num-":"^-\\d*\\.?\\d+$", //负数
"float":"^([+-]?)\\d*\\.\\d+$", //浮点数
"float+":"^([+]?)\\d*\\.\\d+$", //正浮点数
"float-":"^-\\d*\\.\\d+$", //负浮点数
//邮件
"email":"^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$",
"color":"^#[a-fA-F0-9]{6}", //颜色
"url":"^http[s]?:\\/\\/([\\w-]+\\.)+[\\w-]+([\\w-./?%&=]*)?$", //联接
"chinese":"^[\\u4E00-\\u9FA5\\uF900-\\uFA2D]+$", //仅中文
"ascii":"^[\\x00-\\xFF]+$", //仅ACSII字符
"zipcode":"^\\d{6}$", //邮编
"mobile":"^0{0,1}13[0-9]{9}$", //手机
"ip4":"^\(([0-1]?\\d{0,2})|(2[0-5]{0,2}))\\.(([0-1]?\\d{0,2})|(2[0-5]{0,2}))\\.(([0-1]?\\d{0,2})|(2[0-5]{0,2}))\\.(([0-1]?\\d{0,2})|(2[0-5]{0,2}))$", //ip地址
"notempty":"^[^ ]+$", //非空
"picture":"(.*)\\.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$", //图片
"rar":"(.*)\\.(rar|zip|7zip|tgz)$", //压缩文件
"date":"^\\d{4}(\\-|\\/|\.)\\d{1,2}\\1\\d{1,2}$" //日期
};

//缺省消息
 var aMessage = {
"int" :"请输入整数", //整数
"int+" :"请输入正整数", //正整数
"int-" :"请输入负整数", //负整数
"num" :"请输入数字", //数字
"num+" :"请输入正数", //正数
"num-" :"请输入负整数", //负数
"float" :"请输入浮点数", //浮点数
"float+":"请输入正浮点数", //正浮点数
"float-":"请输入负浮点数", //负浮点数
"email" :"请输入正确的邮箱地址", //邮件
"color" :"请输入正确的颜色", //颜色
"url" :"请输入正确的连接地址", //联接
"chinese":"请输入中文", //中文
"ascii" :"请输入ascii字符", //仅ACSII字符
"zipcode":"请输入正确的邮政编码", //邮编
"mobile":"请输入正确的手机号码", //手机
"ip4" :"请输入正确的IP地址", //ip地址
"notempty":"不能为空", //非空
"picture":"请选择图片", //图片
"rar" :"请输入压缩文件", //压缩文件
"date" :"请输入正确的日期" //日期
}

var me = this;

 me.checkForm = function(oForm) {
me.pass = true;
me.message = "";
me.first = null;
 if(me.cancel==true) {
return true;
}
var els = oForm.elements;
//遍历所有表元素
 for(var i=0;i<els.length;i++) {
//取得格式
var sUsage = els[i].getAttribute("Usage");
var sReg = "";
//如果设置Usage,则使用内置正则表达式,忽略Exp
 if(typeof(sUsage)!="undefined"&&sUsage!=null) {
//如果Usage在表达室里找到,则使用内置表达式,无则认为是表达式;表达式可以是函数;
 if(aUsage[sUsage]!=null) {
sReg = aUsage[sUsage];
 } else {
 try {
 if(eval(sUsage)==false) {
me.pass = false;
 if(me.first==null) {
me.first = els[i];
}

addMessage(getMessage(els[i]));

 if(me.showAll==false) {
setFocus(els[i]);
break;
}
}
 } catch(e) {
alert("表达式[" + sUsage +"]错误:" + e.description)
return false;
}
}
 } else {
sReg = els[i].getAttribute("Exp");
}

 if(typeof(sReg)!="undefined"&&sReg!=null) {
//对于失效状态不验证
 if(isDisabled(els[i])==true) {
continue;
}

//取得表单的值,用通用取值函数
var sVal = getValue(els[i]);
//字符串->正则表达式,不区分大小写
var reg = new RegExp(sReg,"i");
 if(!reg.test(sVal)) {
me.pass = false;
 if(me.first==null) {
me.first = els[i];
}

//alert(reg);
//验证不通过,弹出提示warning
var sTip = getMessage(els[i]);
 if(sTip.length==0&&typeof(sUsage)!="undefined"&&sUsage!=null&&aMessage[sUsage]!=null) {
sTip = aMessage[sUsage];
}
addMessage(sTip);

 if(me.showAll==false) {
//该表单元素取得焦点,用通用返回函数
setFocus(els[i]);
break;
}
}
}
}

 if(me.pass==false) {
showMessage();

 if(me.first!=null&&me.showAll==true) {
setFocus(me.first);
}
}

return me.pass;
}

 /**//*
* 添加错误信息
*/
 function addMessage(msg) {
 if(me.alert==true) {
me.message += msg + "\n";
 } else {
me.message += msg + "<br>";
}
}

 /**//*
* 显示错误
*/
 function getMessage(els) {
var sTip = els.getAttribute("tip");
 if(typeof(sTip)!="undefined"&&sTip!=null) {
return sTip;
 } else {
return "";
}
}


 /**//*
* 显示错误
*/
 function showMessage() {
//外接显示错误函数
 if(typeof(me.showMessageEx)=="function") {
return me.showMessageEx(me.message);
}

 if(me.alert==true) {
alert(me.message);
 } else {
var divTip;
divTip = document.getElementById("divErrorMessage");
 try {
 if(typeof(divTip)=="undefined"||divTip==null) {
divTip = document.createElement("div");
divTip.id = "divErrorMessage";
divTip.name = "divErrorMessage";
divTip.style.color = "red";
document.body.appendChild(divTip);
}

divTip.innerHTML = me.message;
 }catch(e) {}
}
}

 /**//*
* 获得元素是否失效(失效的元素不做判断)
*/
 function isDisabled(el) {
//对于radio,checkbox元素,只要其中有一个非失效元素就验证
 if(el.type=="radio"||el.type=="checkbox") {
//取得第一个元素的name,搜索这个元素组
var tmpels = document.getElementsByName(el.name);
 for(var i=0;i<tmpels.length;i++) {
 if(tmpels[i].disabled==false) {
return false;
}
}
return true;
 }else {
return el.disabled;
}
}


 /**//*
* 取得对象的值(对于单选多选框把其选择的个数作为需要验证的值)
*/
 function getValue(el) {
//取得表单元素的类型
var sType = el.type;
 switch(sType) {
//文本输入框,直接取值el.value
case "text":
case "hidden":
case "password":
case "file":
case "textarea": return el.value;
//单多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个,"00"表示选中两个
case "checkbox":
case "radio": return getRadioValue(el);
case "select-one":
case "select-multiple": return getSelectValue(el);
}
//取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
 function getRadioValue(el) {
var sValue = "";
//取得第一个元素的name,搜索这个元素组
var tmpels = document.getElementsByName(el.name);
 for(var i=0;i<tmpels.length;i++) {
 if(tmpels[i].checked) {
sValue += "0";
}
}
return sValue;
}
//取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
 function getSelectValue(el) {
var sValue = "";
 for(var i=0;i<el.options.length;i++) {
//单选下拉框提示选项设置为value=""
 if(el.options[i].selected && el.options[i].value!="") {
sValue += "0";
}
}
return sValue;
}
}

 /**//*
* 对没有通过验证的元素设置焦点
*/
 function setFocus(el) {
//取得表单元素的类型
var sType = el.type;
 switch(sType) {
//文本输入框,光标定位在文本输入框的末尾
case "text":
case "hidden":
case "password":
case "file":
case "textarea":
 try {el.focus();var rng = el.createTextRange(); rng.collapse(false); rng.select();}catch(e) {};
break;
//单多选,第一选项非失效控件取得焦点
case "checkbox":
case "radio":
var els = document.getElementsByName(el.name);
 for(var i=0;i<els.length;i++) {
 if(els[i].disabled == false) {
els[i].focus();
break;
}
}
break;
case "select-one":
case "select-multiple":
el.focus();
break;
}
}

//自动绑定到所有form的onsubmit事件
 if(window.attachEvent) {
window.attachEvent("onload",function()
 {
 for(var i=0;i<document.forms.length;i++) {
var theFrom = document.forms[i];
 function mapping(f) {
 f.attachEvent("onsubmit",function() {return me.checkForm(f);});
}

 if(theFrom) {
mapping(theFrom);
 theFrom.attachEvent("onclick",function() {
var o = event.srcElement;
 if(typeof(o.type)!="undefined") {
var check = o.getAttribute("check");
 if(typeof(check)!="undefined"&&check!=null&&check.toLowerCase()=="false") {
me.cancel = true;
}
}
}
);
}
}
}
);
}
else
 {
 window.onsubmit = function(e) {var theFrom = e.target;if(theFrom) {return me.checkForm(theFrom);}}
 window.addEventListener("click",function(e) {var o = e.target;
 if(typeof(o.type)!="undefined") {
var check = o.getAttribute("check");
 if(typeof(check)!="undefined"&&check!=null&&check.toLowerCase()=="false") {me.cancel = true;}
}
}
,false);
}

 this.keyCheck = function() {
 if(window.attachEvent) {
 window.attachEvent("onload",function() {for(var i=0;i<document.forms.length;i++) {var theFrom = document.forms[i]; if(theFrom) {myKeyCheck(theFrom);}}});
 }else {
 window.addEventListener("load",function(e) {for(var i=0;i<document.forms.length;i++) {var theFrom = document.forms[i]; if(theFrom) {myKeyCheck(theFrom);}}},false);
}

 function myKeyCheck(oForm) {
var els = oForm.elements;
//遍历所有表元素
 for(var i=0;i<els.length;i++) {
//取得格式
var sUsage = els[i].getAttribute("Usage");
//如果设置Usage,则使用内置正则表达式,忽略Exp
 if(typeof(sUsage)!="undefined"&&sUsage!=null) {
 switch(sUsage.toLowerCase ()) {
case "zipcode":
case "int":
 els[i].onkeypress = function(e) {var chr;if(e)chr=e.charCode; else chr=window.event.keyCode;if(chr==0)return true; else return /\d/.test(String.fromCharCode(chr))||(this.value.indexOf('+')<0?String.fromCharCode(chr)=="+":false)||(this.value.indexOf('-')<0?String.fromCharCode(chr)=="-":false);}
 els[i].onpaste = function(e) {if(e==null)return !clipboardData.getData('text').match(/\D/); else return false;}
 els[i].ondragenter = function(e) {return false;}
els[i].style.imeMode= "disabled";
break;
case "mobile":
case "int+":
 els[i].onkeypress = function(e) {var chr;if(e)chr=e.charCode; else chr=window.event.keyCode;if(chr==0)return true; else return /\d/.test(String.fromCharCode(chr))||(this.value.indexOf('+')<0?String.fromCharCode(chr)=="+":false);}
 els[i].onpaste = function(e) {if(e==null)if(e==null)return !clipboardData.getData('text').match(/[^\d\+]/); else return false; else return false;}
 els[i].ondragenter = function(e) {return false;}
els[i].style.imeMode= "disabled";
break;
case "int-":
 els[i].onkeypress = function(e) {var chr;if(e)chr=e.charCode; else chr=window.event.keyCode;if(chr==0)return true; else return /\d/.test(String.fromCharCode(chr))||(this.value.indexOf('-')<0?String.fromCharCode(chr)=="-":false);}
 els[i].onpaste = function(e) {if(e==null)return !clipboardData.getData('text').match(/[^\d\-]/); else return false;}
 els[i].ondragenter = function(e) {return false;}
els[i].style.imeMode= "disabled";
break;
case "float":
case "num":
 els[i].onkeypress = function(e) {var chr;if(e)chr=e.charCode; else chr=window.event.keyCode;if(chr==0)return true; else return /[\+\-\.]|\d/.test(String.fromCharCode(chr));}
 els[i].onpaste = function(e) {if(e==null)return !clipboardData.getData('text').match(/[^\d\.\+\-]/); else return false;}
 els[i].ondragenter = function(e) {return false;}
els[i].style.imeMode= "disabled";
break;
case "float+":
case "num+":
 els[i].onkeypress = function(e) {var chr;if(e)chr=e.charCode; else chr=window.event.keyCode;if(chr==0)return true; else return /[\+\.]|\d/.test(String.fromCharCode(chr));}
 els[i].onpaste = function(e) {if(e==null)return !clipboardData.getData('text').match(/[^\d\.\+]/); else return false;}
 els[i].ondragenter = function(e) {return false;}
els[i].style.imeMode= "disabled";
break;
case "float-":
case "num-":
 els[i].onkeypress = function(e) {var chr;if(e)chr=e.charCode; else chr=window.event.keyCode;if(chr==0)return true; else return /[\-\.]|\d/.test(String.fromCharCode(chr));}
 els[i].onpaste = function(e) {if(e==null)return !clipboardData.getData('text').match(/[^\d\.\-]/); else return false;}
 els[i].ondragenter = function(e) {return false;}
els[i].style.imeMode= "disabled";
break;
case "ascii":
els[i].style.imeMode= "disabled";
break;
case "ip4":
 els[i].onkeypress = function(e) {var chr;if(e)chr=e.charCode; else chr=window.event.keyCode;if(chr==0)return true; else return /[\.]|\d/.test(String.fromCharCode(chr));}
 els[i].onpaste = function(e) {if(e==null)return !clipboardData.getData('text').match(/[^\d\.]/); else return false;}
 els[i].ondragenter = function(e) {return false;}
els[i].style.imeMode= "disabled";
els[i].maxLength = 15;
break;
case "color":
 els[i].onkeypress = function(e) {var chr;if(e)chr=e.charCode; else chr=window.event.keyCode;if(chr==0)return true; else return /[a-fA-Z]|\d/.test(String.fromCharCode(chr))||(this.value.indexOf('#')<0?String.fromCharCode(chr)=="#":false);}
 els[i].onpaste = function(e) {if(e==null)return !clipboardData.getData('text').match(/[^\d\#]/); else return false;}
 els[i].ondragenter = function(e) {return false;}
els[i].maxLength = 7;
els[i].style.imeMode= "disabled";
break;
case "date":
 els[i].onkeypress = function(e) {var chr;if(e)chr=e.charCode; else chr=window.event.keyCode;if(chr==0)return true; else return /[\/\-\.]|\d/.test(String.fromCharCode(chr));}
 els[i].onpaste = function(e) {if(e==null)return !clipboardData.getData('text').match(/[^\d\.\-]/); else return false;}
 els[i].ondragenter = function(e) {return false;}
els[i].style.imeMode= "disabled";
break;
}
}
}
}
}

}

//初始化
var g_check = new CLASS_CHECK();
g_check.keyCheck();

|