在Web应用开发中,对于页面的表单输入,常常要求合法性检查,比如检查输入是否是整数,是否是有效的邮件地址等等。通常的做法是对要验证的输入域写独立的处理函数进行检查,这无形中增加了工作量,并且代码不重用。下面介绍用正则表达式来实现输入域验证,无需在HTML页面中书写Javas
Javas |
// 使用举例 /** * 统一验证方法 * 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 = "msm@hotmail.com"; } 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' act <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> |