WEB开发中HTML页面表单(FORM)域输入合法性的客户端验证

// 使用举例
/**
* 统一验证方法
* Form 元素中输入相关标记
* vmode: ['not null']
* vdisp: 显示信息
* vtype: 校验类型 ['none','string','tabledefine','integer','datetime','date','time','postcode','float','email','phone','mobiletel','ip']
* 例子： <input type="text" name="IPAddress" vmode="not null" vdisp="输入的IP地址" vtype="ip" >
*/

// 正则表达式定义

var validrule = new Object();
validrule.string = /^([^'<>]+)?$/; 
validrule.tabledefine = /^([A-Za-z][A-Za-z0-9|_]{1,18})?$/; 
validrule.integer = /^(\d*)$/; 
validrule.date = /^((([1-9]\d{3})|([1-9]\d{1}))-(0[1-9]|1[0-2])-(0[1-9]|[1-2]\d|3[0-1]))?$/; 
validrule.time = /^((0[1-9]|1[0-9]|2[0-4]):([0-5][0-9]):([0-5][0-9]))?$/; 
validrule.datetime = /^((([1-9]\d{3})|([1-9]\d{1}))-(0[1-9]|1[0-2])-(0[1-9]|[1-2]\d|3[0-1]) (0[1-9]|1[0-9]|2[0-4]):([0-5][0-9]):([0-5][0-9]))?$/; 
validrule.postcode = /^(\d{6})?$/; 
validrule.float = /^(([0-9]\d?)($|(\.\d+$)))?$/; 
validrule.email = /^(.+\@.+\..+)?$/; 
validrule.phone = /^(\(\d{3}\))?(\(?(\d{3}|\d{4}|\d{5})\)?(-?)(\d+))?((-?)(\d+))?$/; 
validrule.mobiletel = /^(13(\d{9}))?$/; 
validrule.ip = /^(([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-5][0-5])\.([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-5][0-5])\.([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-5][0-5])\.([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-5][0-5]))?$/; 

function doValidate( vform ) {var elems = vform.elements;var frmLen = elems.length;var thePat = "";var strFormatInfo = "";//对于每一个FROM元素for(var i=0;i<frmLen;i++) {var _elem = elems[i];//为空检查 if(_elem.vmode != null && _elem.vmode == "not null") {if(_elem.value.length == 0) {alert(_elem.vdisp+"不能为空!")_elem.focus();return false;}} //类型检查 if(_elem.vtype == null) {continue;}if(_elem.vtype=="none"){ thePat = "";strFormatInfo = "";}if(_elem.vtype=="string"){ thePat = validrule.string;strFormatInfo = "asd";}if(_elem.vtype=="tabledefine") { thePat = validrule.tabledefine;strFormatInfo = "p_tablename";}if(_elem.vtype=="integer") { thePat = validrule.integer;strFormatInfo = "123456";}if(_elem.vtype=="datetime") { thePat = validrule.datetime;strFormatInfo = "2004-08-12 08:37:29";}if(_elem.vtype=="date") { thePat = validrule.date;strFormatInfo = "2004-08-12";}if(_elem.vtype=="time") { thePat = validrule.time;strFormatInfo = "08:37:29";}if(_elem.vtype=="postcode") { thePat = validrule.postcode;strFormatInfo = "100001";}if(_elem.vtype=="float") { thePat = validrule.float;strFormatInfo = "356.32";}if(_elem.vtype=="email") { thePat = validrule.email;strFormatInfo = "[e-mail]";}if(_elem.vtype=="phone") { thePat = validrule.phone;strFormatInfo = "010-67891234";}if(_elem.vtype=="mobiletel") { thePat = validrule.mobiletel;strFormatInfo = "13867891234";}if(_elem.vtype=="ip") { thePat = validrule.ip;strFormatInfo = "172.22.169.11";}var gotIt = null; if(thePat!=""){gotIt = thePat.exec(_elem.value);} if(gotIt == null) {alert(_elem.vdisp+"输入不合法,格式应为："+strFormatInfo);_elem.focus();return false;}} return true;}

表单

<table class='table1' cellspacing=1 cellpadding=1 width="95%" align=center border=0><tbody> <form name='form1' method='post' action='xxx.jsp' target='_self' onsubmit='return doValidate(form1)'><input name='_tablename' type='hidden' value='p_example'> <tr><td width='50%'>用户编号<input type='text' name='UserID' class='text1' size='30' maxlength='23' vmode='not null' vdisp='用户编号' vtype='string'></td><td width='50%'>用户名称<input type='text' name='UserName' class='text1' size='30' maxlength='20' vmode='not null' vdisp='用户名称' vtype='string'></td></tr><tr><td width='50%'>用户性别<select name='Sex' class='select1' size='1' maxlength='10' vmode='' vdisp='用户性别' vtype='string'> <option value='male'>男</option><option value='female'>女</option></select></td><td width='50%'>出生日期<input type='text' name='Birthday' class='text1' size='30' maxlength='10' vmode='not null' vdisp='出生日期' vtype='date' ></td></tr><tr><td width='50%'>固定电话<input type='text' name='Phone' class='text1' size='0' maxlength='20' vmode='' vdisp='固定电话' vtype='phone'></td><td width='50%'>邮件地址<input type='text' name='Email' class='text1' size='30' maxlength='250' vmode='not null' vdisp='邮件地址' vtype='email'></td></tr><tr><td width='50%'>机器地址<input type='text' name='IPAddress' class='text1' size='30' maxlength='20' vmode='not null' vdisp='机器地址' vtype='ip'></td><td width='50%'></td></tr><tr><td width='50%'>入职日期<input type='text' name='DateTime' class='text1' size='30' maxlength='10' vmode='not null' vdisp='入职日期' vtype='date' ></td><td width='50%'></td></tr> </form> </tbody></table>

ps:写于2010-08-24 16:47