通用表单验证函数

尽管是动静网站,仍旧其它b/s构造的体例,都离不开表单表单做为存户端向效劳器提交数据的载体接受十分要害的脚色.这就引出了一个题目,提交的数据正当吗?摆在咱们眼前的题目即是考证那些数据保护所提交的数据是正当的.以是,咱们写了一个大堆的考证因变量.当咱们发端新的一个项手段开拓时,咱们又得写第一次全国代表大会堆的考证因变量,而后再调节和测试这第一次全国代表大会堆的因变量... 正文将引见一种本领来普及我的代码的可重用性,普及咱们的开拓功效.

部分觉得表单的考证该当包括两局部:第一,确定用户输出的数据能否正当.第二,提醒用户你的数据干什么是不对法的.

以是,咱们的通用表单验证函数要实行的功效即是:第一,博得用户输出的数据getvalue(el)第二,考证用户的数据checkform(oform)ie扶助自设置属性,这即是这个通用因变量实行的普通咱们不妨在表单位素上介入刻画自己消息的属性.有点像xml吧.check属性:该属性用来保存数据正当性的正则表白式.warning属性:该性性用来保存堕落误提醒消息.第三,归来有误的表单提醒goback(el)这三个办法的触发事变是onsubmit,记取是return checkform(this)搞错了就全功尽弃了 :)<form onsubmit="return checkform(this)">

写到这边,完全框架就出来了,经过博得表单位素的check属性,博得字符串,建立正则表白式.再考证其值.即使经过考证就提交,如是数据不对规则博得表单位素的warning属性,爆发提醒消息.并归来到该表单位素.所有的框架也比拟大略.咱们要做的即是写好正则表白式!

接下来咱们来领会一下一切的表单位素按其个性,咱们将它们分为二类每类表单的特性不一律,咱们的目的即是写出通用的.

1.文输出框text<input type="text" name="txt"><input type="password" name="pwd"><input type="hidden" name="hid"><input type="file" name="myfile"><textarea name="txts"></textarea>2.单多选框choose<input type="checkbox" name="c"><input type="checkbox" name="c"><input type="radio" name="r"><input type="radio" name="r">3.单多下拉菜单select<select name="sel"></select><select name="sels" multiple></select>

讲了一堆"大路理"太笼统了,代码更有压服力!

<script language="javascript"><!--/////////////////////////////////////////////////////////////////////////////////**--------------- 存户端表单通用考证checkform(oform) -----------------* 功效:通用考证一切的表单位素.* 运用:* <form name="form1" onsubmit="return checkform(this)">* <input type="text" name="id" check="^\s+$" warning="id不许为空,且不许含有空格">* <input type="submit">* </form>* 提防:写正则表白式时确定要提防.不要让"蓄意人"有空子钻.* 已实行功效:* 对text,password,hidden,file,textarea,select,radio,checkbox举行正当性考证* 待实行功效:把正则表式写成个库.*--------------- 存户端表单通用考证checkform(oform) -----------------*/////////////////////////////////////////////////////////////////////////////////

//主因变量function checkform(oform){var els = oform.elements;//遍历一切表元素for(var i=0;i<els.length;i++){//能否须要考证if(els[i].check){//博得考证的正则字符串var sreg = els[i].check;//博得表单的值,用通用取值因变量var sval = getvalue(els[i]);//字符串->正则表白式,不辨别巨细写var reg = new regexp(sreg,"i");if(!reg.test(sval)){//考证不经过,弹出提醒warningalert(els[i].warning);//该表单位素博得中心,用通用归来因变量goback(els[i])return false;}}}}

//通用取值因变量分二类举行取值//文本输出框,径直取值el.value//单多选,遍历一切选项博得被选中的个数归来截止"00"表白选中两个//单多下拉菜单,遍历一切选项博得被选中的个数归来截止"0"表白选中一个function getvalue(el){//博得表单位素的典型var stype = el.type;switch(stype){case "text":case "hidden":case "password":case "file":case "textarea": return el.value;case "checkbox":case "radio": return getvaluechoose(el);case "select-one":case "select-multiple": return getvaluesel(el);}//博得radio,checkbox的选中数,用"0"来表白选中的个数,咱们写正则的功夫就不妨经过0{1,}来表白选中个数function getvaluechoose(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 getvaluesel(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 goback(el){//博得表单位素的典型var stype = el.type;switch(stype){case "text":case "hidden":case "password":case "file":case "textarea": el.focus();var rng = el.createtextrange(); rng.collapse(false); rng.select();case "checkbox":case "radio": var els = document.getelementsbyname(el.name);els[0].focus();case "select-one":case "select-multiple":el.focus();}}

//--></script><form name="form1" onsubmit="return checkform(this)">test:<input type="text" name="test">不考证<br/>账号:<input type="text" check="^\s+$" warning="账号不许为空,且不许含有空格" name="id">不许为空<br/>暗号:<input type="password" check="\s{6,}" warning="暗号六位之上" name="id">六位之上<br/>电话:<input type="text" check="^\d+$" warning="电话号子含有不法字符" name="number" value=""><br/>相片上传:<input type="file" check="(.*)(\.jpg|\.bmp)$" warning="相片该当为jpg,bmp方法的" name="pic" value="1"><br/>出华诞期:<input type="text" check="^\d{4}\-\d{1,2}-\d{1,2}$" warning="日子方法2004-08-10" name="dt" value="">日子方法2004-08-10<br/>省份:<select name="sel" check="^0$" warning="请采用地方省份"><option value="">请采用<option value="1">福建省<option value="2">湖北省</select><br/>采用你爱好的疏通:<br/>泅水<input type="checkbox" name="c" check="^0{2,}$" warning="请采用2项或之上">排球<input type="checkbox" name="c">足球<input type="checkbox" name="c">排球<input type="checkbox" name="c"><br/>你的学力:大学<input type="radio" name="r" check="^0$" warning="请采用一项学力">国学<input type="radio" name="r">小学<input type="radio" name="r"><br/>部分引见:<textarea name="txts" check="^[\s|\s]{20,}$" warning="部分引见不许为空,且不少于20字"></textarea>20个字之上<input type="submit"></form>