- 对非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();
|