javascript 用面向对象自写前端验证工具
此验证工具需要自少传入两个dom对象 （验证input对象，错误消息显示位置对象）
也可以传入三个参数（验证input对象，错误消息显示位置对象，自定义错误消息）
也可以传入四个参数（验证input对象，错误消息显示位置对象，自定义验证正则表达式，自定义错误消息）
function Validata(){ var regName=/^[a-zA-Z]{4,6}$/; var errorName="帐号4~6之间"; var regIphone=/^1[358]\d{9}$/; var errorIphone="手机号码不正确"; var regEmail=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.(com|cn)$/; var errorEmail="邮箱不正确"; var regAddress=/^[\u4E00-\u9FA5]{4,8}$/; var errorAddress="地址需要在四位到八位"; if(!(Validata.iname)){ Validata.prototype.name=function(oObj,oP,sReg,sError){ if(sReg){ if(typeof(sReg)=="string"){ errorName=sReg; }else{ regName=sReg; } } if(sError){ errorName=sError; } if(!(regName.test(oObj.value))){ oP.innerHTML=errorName; Validata.iname="ss"; return true; } } Validata.iname="ss"; } if(!(Validata.iIphone)){ Validata.prototype.iphone=function(oObj,oP,sReg,sError){ if(sReg){ if(typeof(sReg)=="string"){ errorIphone=sReg; }else{ regIphone=sReg; } } if(sError){ errorIphone=sError; } if(!(regIphone.test(oObj.value))){ oP.innerHTML=errorIphone; Validata.iIphone="ss"; return true; } } Validata.iIphone="ss"; } if(!(Validata.iEmail)){ Validata.prototype.email=function(oObj,oP,sReg,sError){ if(sReg){ if(typeof(sReg)=="string"){ errorEmail=sReg; }else{ regEmail=sReg; } } if(sError){ errorEmail=sError; } if(!(regEmail.test(oObj.value))){ oP.innerHTML=errorEmail; Validata.iEmail="ss"; return true; } } Validata.iEmail="ss"; } if(!(Validata.iAddress)){ Validata.prototype.address=function(oObj,oP,sReg,sError){ if(sReg){ if(typeof(sReg)=="string"){ errorAddress=sReg; }else{ regAddress=sReg; } } if(sError){ errorAddress=sError; } if(!(regAddress.test(oObj.value))){ oP.innerHTML=errorAddress; Validata.iAddress="ss"; return true; } } Validata.iAddress="ss"; } }
使用例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'validata.jsp' starting page</title> <script type="text/javascript"> window.onload=function(){ var oForm=document.getElementById("f1"); var aP=document.getElementsByTagName("p"); var va= new Validata(); oForm.onsubmit=function(){ var op=document.getElementById("0"); if(va.name(op,aP[0],/^[A-Z]{3,4}$/,"hhhhhhhhhhhhhhhhh")){ return false; } var op=document.getElementById("1"); if(va.email(op,aP[1])){ return false; } var op=document.getElementById("2"); if(va.iphone(op,aP[2])){ return false; } var op=document.getElementById("3"); if(va.address(op,aP[3])){ return false; } return true; } } function Validata(){ var regName=/^[a-zA-Z]{4,6}$/; var errorName="帐号4~6之间"; var regIphone=/^1[358]\d{9}$/; var errorIphone="手机号码不正确"; var regEmail=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.(com|cn)$/; var errorEmail="邮箱不正确"; var regAddress=/^[\u4E00-\u9FA5]{4,8}$/; var errorAddress="地址需要在四位到八位"; if(!(Validata.iname)){ Validata.prototype.name=function(oObj,oP,sReg,sError){ if(sReg){ if(typeof(sReg)=="string"){ errorName=sReg; }else{ regName=sReg; } } if(sError){ errorName=sError; } if(!(regName.test(oObj.value))){ oP.innerHTML=errorName; Validata.iname="ss"; return true; } } Validata.iname="ss"; } if(!(Validata.iIphone)){ Validata.prototype.iphone=function(oObj,oP,sReg,sError){ if(sReg){ if(typeof(sReg)=="string"){ errorIphone=sReg; }else{ regIphone=sReg; } } if(sError){ errorIphone=sError; } if(!(regIphone.test(oObj.value))){ oP.innerHTML=errorIphone; Validata.iIphone="ss"; return true; } } Validata.iIphone="ss"; } if(!(Validata.iEmail)){ Validata.prototype.email=function(oObj,oP,sReg,sError){ if(sReg){ if(typeof(sReg)=="string"){ errorEmail=sReg; }else{ regEmail=sReg; } } if(sError){ errorEmail=sError; } if(!(regEmail.test(oObj.value))){ oP.innerHTML=errorEmail; Validata.iEmail="ss"; return true; } } Validata.iEmail="ss"; } if(!(Validata.iAddress)){ Validata.prototype.address=function(oObj,oP,sReg,sError){ if(sReg){ if(typeof(sReg)=="string"){ errorAddress=sReg; }else{ regAddress=sReg; } } if(sError){ errorAddress=sError; } if(!(regAddress.test(oObj.value))){ oP.innerHTML=errorAddress; Validata.iAddress="ss"; return true; } } Validata.iAddress="ss"; } } </script> </head> <body> <form id="f1" action="www.baidu.com"> 账号：<input type="text" id="0"><p></p><br> 邮箱：<input type="text" id="1"><p></p><br> 电话：<input type="text" id="2"><p></p><br> 地址：<input type="text" id="3"><p></p><br> <input type="submit" value="提交"><br> </form> </body> </html>
