闲着无聊写JAVA快写吐血了,哎,换换口味吧,顺手就操起了很久都没看了JavaScript。写点儿什么好呢?感觉表单验证还是实在些(错了,是非常实用,试想下你每次判断用户输入是何等的繁琐)因为JavaScript也实在是干不了什么了(是我用它干不了什么),不过还得学好它,JavaScript很好很强大,而且进入初进公司听说掌握这个挺重要的,好了,废话少说,先看程序,很简单的,大牛可以自觉关闭
/* *通用表单验证1.0 * *作者:renyanwei *版本:1.0 *修改日期:2008-10-27 */ //用于放置验证失败的控件集合 var erritem=new Array(); //验证成功消息 var sucstr="√"; //错误信息集合,如果控件没指定错误信息容器 //将统一在警告框中显示 var errmsg=""; //各就各位 function fun(form) { var formobj=document.getElementById(form); //得到表单对象 var iarray=formobj.getElementsByTagName("input"); for(var i=0;i<iarray.length;i++) { var check=iarray[i].getAttribute("check"); switch(check){ case "charcount": erritem[i]=CharCount_fun(iarray[i]); break; case "numrange": erritem[i]=NumRange_fun(iarray[i]); break; case "comparison": erritem[i]=Comparison_fun(iarray[i]); break; case "regex": erritem[i]=Common_fun(iarray[i]); default: erritem[i]=true; break; } } if(errmsg!="") { alert(errmsg); errmsg=""; } return reform(); } /* *验证字符范围方法 *maxsize:最大个数 *minsize:最小个数 *errmsg:验证失败的错误信息 *msgdiv:用于显示错误信息容器,如果没有则弹出警告框 */ function CharCount_fun(inp) { var max=inp.getAttribute("maxsize"); var min=inp.getAttribute("minsize"); var msgdiv=document.getElementById(inp.getAttribute("msgdiv")); var errmsg=inp.getAttribute("errmsg"); var val=inp.value.replace(/^\s+|\s+$/,""); var leng=val.length; if(leng<min||leng>max) { return showmsg(msgdiv,errmsg,false); }else{ return showmsg(msgdiv,sucstr,true); } } /* *验证数字范围方法 *maxnum:最大值 *minnum:最小值 *errmsg:验证失败的错误信息 *msgdiv:用于显示错误信息容器,如果没有则弹出警告框 */ function NumRange_fun(inp) { var max=inp.getAttribute("maxnum"); var min=inp.getAttribute("minnum"); var msgdiv=document.getElementById(inp.getAttribute("msgdiv")); var errmsg=inp.getAttribute("errmsg"); var val=inp.value; if(isNaN(val)||val<min||val>max) { return showmsg(msgdiv,errmsg,false); }else{ return showmsg(msgdiv,sucstr,true); } } /* *比较验证方法,比较两个控件值 *to:要与之比较的控件ID *errmsg:验证失败的错误信息 *msgdiv:用于显示错误信息容器,如果没有则弹出警告框 */ function Comparison_fun(inp) { var msgdiv=document.getElementById(inp.getAttribute("msgdiv")); var errmsg=inp.getAttribute("errmsg"); var toid=document.getElementById(inp.getAttribute("to")); var val=inp.value; if(val!=toid.value||val=="") { return showmsg(msgdiv,errmsg,false); }else{ return showmsg(msgdiv,sucstr,true); } } /* *正则表达式验证方法 *regstr:正则表达式,无前后\\ *errmsg:验证失败的错误信息 *msgdiv:用于显示错误信息容器,如果没有则弹出警告框 */ function Common_fun(inp) { var msgdiv=document.getElementById(inp.getAttribute("msgdiv")); var reg=new RegExp(inp.getAttribute("regstr")); var errmsg=inp.getAttribute("errmsg"); var val=inp.value; if(!reg.test(val)) { return showmsg(msgdiv,errmsg,false); }else{ return showmsg(msgdiv,sucstr,true); } } //显示消息方法 function showmsg(msgdiv,msg,istrue) { if(msgdiv==null) { errmsg+=msg+"\n"; }else{ msgdiv.innerHTML=msgdiv.innerHTML+"<font color='red'>"+msg+"<font>"; } return istrue; } //总体验证方法,遍历所有控件是否同时通过验证 function reform() { for(var i=0;i<erritem.length;i++) { if(!erritem[i]) { return false; } } return true; }
有兴趣的可以看下实例
总结:这里主要是用到了HTML控件的自定义属性,重点应用了getAttribute方法,然后得到属性进行校验,哎 写个JS比写个java程序累多了,因为JavaScript实在是没什么好的调试工具,有的错误还莫名其妙,很是让人崩溃,总之不管好坏总是写出了个能运行的锥形,O(∩_∩)O哈哈~ ,挺高兴的,版本号暂定为1.0
还没解决的问题:根据校验类型自动注册onblue事件,光标进入后清除错误信息,还得靠事件驱动,这点儿确实很难为我,FF和IE还不一样,哎,不过没有真的不爽,等到2.0的时候一定得添加上去