用正则表达式和javascript对表单进行全面验证（js正则表达式验证中文）

使用时请将下面的javascript代码存到一个单一的js文件中。

1、表单要求

将对表单中的所有以下类型的域依次验证，所有验证是去除了前导和后缀空格的，要注意是区分大小写的。

2、空值验证

表单中任意域加上emptyInfo属性将对此域是否为空进行验证（可以和最大长度验证\一般验证方式同时使用）。

无此属性视为此域允许空值。

如：

3、最大长度验证（可以和空值验证、一般验证方式同时使用）：

或,</p><p>3、一般验证方式(不对空值做验证）:</p><p>如：<input type="text" validator="^(19|20)[0-9]{2}$" errorInfo="不正确的年份!" ></p><p>4、标准验证(不与其它验证方式同时使用）：</p><p>全部通过<input type="hidden">来实现，并且不需要name属性以免提交到服务器。</p><p>4.1、合法日期验证：</p><p><input type="text" name="yearfieldName" value="2004">注：这里也可以是<select name="yearfieldName"></select>，以下同</p><p><input type="text" name="monthfieldName" value="02"></p><p><input type="text" name="dayfieldName" value="03"></p><p><input type="hidden" validatorType="DateGroup" year="yearfieldName" month="monthfieldName" day="dayfieldName" errorInfo="不正确的日期!"></p><p>yearfieldName、monthfieldName、dayfieldName分别为年月日字段，月和日可以是两位(MM)或一位格式(M)，</p><p>此处不对每个字段分别检验(如果要检验，请在年月日三个域分别使用前面的一般验证方式），只对日期的最大值是否合法检查;</p><p>4.2、日期格式验证(请注意，此验证不对日期是否有效进行验证，还未找到从格式中得到年月日数据的方法^_^)：</p><p><input type="text" name="datefieldName" value="2003-01-03 21:31:00"></p><p><input type="hidden" validatorType="Date" fieldName="datefieldName"; format="yyyy-MM-dd HH:mm:ss" errorInfo="不正确的日期!"></p><p>其中格式仅对y、M、d、H、m、s进行支持(其它字符视为非时间的字符)</p><p>4.3、列表验证：</p><p>检验列表(checkbox、redio、select)是否至少选中了一条记录(对select主要用于多项选择)</p><p><input type="checkbox" name="checkbox1"></p><p><input type="hidden" validatorType="Checkbox" fieldName="checkbox1" errorInfo="请至少选中一条记录!"></p><p>其中validatorType可以是Checkbox、R、Select;</p><p>对于一个select表单，如果要求选择一条不能是第一条的记录，请用下列方式:</p><p><select name="select1" emptyInfo="请选择一个选项!"></p><p><option value="">==请选择==</option></p><p><option value="1">1</option></p><p><select></p><p>4.4、Email验证：</p><p><input type="text" name="email"></p><p><input type="hidden" fieldName="email" validatorType="Email" separator="," errorInfo="不正确的Email!"></p><p>其中separator为可选项，表示输入多个email时的分隔符(无此选项只能是一个地址）</p><p>4.5、加入其它javascript操作：</p><p><script type="text/javascript"></p><p>function functionname(){</p><p>自定义方法</p><p>}</p><p></script></p><p>表单中加入<input type="hidden" validatorType="javascript" functionName="functionname">（此时emptyInfo等属性无效）</p><p>时将调用function属性中指定的javascript方法（要求方法返回true或false，返回false将不再验证表单，也不提交表单)。</p><p>5、在表单通过验证提交前disable一个按钮（也可将其它域disable,不能与其它验证同在一个域)，不要求按钮是表单中的最后一个</p><p><input type="button" name="提交" validatorType="disable"></p><p>6、不验证表单</p><p><input type="hidden" name="validate" value="0" functionName="functionname"></p><p>当validator域值为0时不对表单进行验证，直接提交表单或执行指定function并返回true后提交表单</p><p>functionName为可选</p><p>--></p><p><script type="text/javascript"></p><p>function getStringLength(str){</p><p>var endvalue=0;</p><p>var sourcestr=new String(str);</p><p>var tempstr;</p><p>for (var strposition = 0; strposition < sourcestr.length; strposition ++) {</p><p>tempstr=sourcestr.charAt(strposition);</p><p>if (tempstr.charCodeAt(0)>255 || tempstr.charCodeAt(0)<0) {</p><p>endvalue=endvalue+2;</p><p>} else {</p><p>endvalue=endvalue+1;</p><p>}</p><p>}</p><p>return(endvalue);</p><p>}</p><p>function trim(str){</p><p>if(str==null) return "";</p><p>if(str.length==0) return "";</p><p>var i=0,j=str.length-1,c;</p><p>for(;i<str.length;i++){</p><p>c=str.charAt(i);</p><p>if(c!=' ') break;</p><p>}</p><p>for(;j>-1;j--){</p><p>c=str.charAt(j);</p><p>if(c!=' ') break;</p><p>}</p><p>if(i>j) return "";</p><p>return str.substring(i,j+1);</p><p>}</p><p>function validateDate(date,format,alt){</p><p>var time=trim(date.value);</p><p>if(time=="") return;</p><p>var reg=format;</p><p>var reg=reg.replace(/yyyy/,"[0-9]{4}");</p><p>var reg=reg.replace(/yy/,"[0-9]{2}");</p><p>var reg=reg.replace(/MM/,"((0[1-9])|1[0-2])");</p><p>var reg=reg.replace(/M/,"(([1-9])|1[0-2])");</p><p>var reg=reg.replace(/dd/,"((0[1-9])|([1-2][0-9])|30|31)");</p><p>var reg=reg.replace(/d/,"([1-9]|[1-2][0-9]|30|31))");</p><p>var reg=reg.replace(/HH/,"(([0-1][0-9])|20|21|22|23)");</p><p>var reg=reg.replace(/H/,"([0-9]|1[0-9]|20|21|22|23)");</p><p>var reg=reg.replace(/mm/,"([0-5][0-9])");</p><p>var reg=reg.replace(/m/,"([0-9]|([1-5][0-9]))");</p><p>var reg=reg.replace(/ss/,"([0-5][0-9])");</p><p>var reg=reg.replace(/s/,"([0-9]|([1-5][0-9]))");</p><p>reg=new RegExp("^"+reg+"$");</p><p>if(reg.test(time)==false){//验证格式是否合法</p><p>alert(alt);</p><p>date.focus();</p><p>return false;</p><p>}</p><p>return true;</p><p>}</p><p>function validateDateGroup(year,month,day,alt){</p><p>var array=new Array(31,28,31,30,31,30,31,31,30,31,30,31);</p><p>var y=parseInt(year.value);</p><p>var m=parseInt(month.value);</p><p>var d=parseInt(day.value);</p><p>var maxday=array[m-1];</p><p>if(m==2){</p><p>if((y%4==0&&y%100!=0)||y%400==0){</p><p>maxday=29;</p><p>}</p><p>}</p><p>if(d>maxday){</p><p>alert(alt);</p><p>return false;</p><p>}</p><p>return true;</p><p>}</p><p>function validateCheckbox(obj,alt){</p><p>var rs=false;</p><p>if(obj!=null){</p><p>if(obj.length==null){</p><p>return obj.checked;</p><p>}</p><p>for(i=0;i<obj.length;i++){</p><p>if(obj[i].checked==true){</p><p>return true;</p><p>}</p><p>}</p><p>}</p><p>alert(alt);</p><p>return rs;</p><p>}</p><p>function validateRadio(obj,alt){</p><p>var rs=false;</p><p>if(obj!=null){</p><p>if(obj.length==null){</p><p>return obj.checked;</p><p>}</p><p>for(i=0;i<obj.length;i++){</p><p>if(obj[i].checked==true){</p><p>return true;</p><p>}</p><p>}</p><p>}</p><p>alert(alt);</p><p>return rs;</p><p>}</p><p>function validateSelect(obj,alt){</p><p>var rs=false;</p><p>if(obj!=null){</p><p>for(i=0;i<obj.options.length;i++){</p><p>if(obj.options[i].selected==true){</p><p>return true;</p><p>}</p><p>}</p><p>}</p><p>alert(alt);</p><p>return rs;</p><p>}</p><p>function validateEmail(email,alt,separator){</p><p>var mail=trim(email.value);</p><p>if(mail=="") return;</p><p>var em;</p><p>var myReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;</p><p>if(separator==null){</p><p>if(myReg.test(email.value)==false){</p><p>alert(alt);</p><p>email.focus();</p><p>return false;</p><p>}</p><p>}</p><p>else{</p><p>em=email.value.split(separator);</p><p>for(i=0;i<em.length;i++){</p><p>em[i]=em[i].trim();</p><p>if(em[i].length>0&&myReg.test(em[i])==false){</p><p>alert(alt);</p><p>email.focus();</p><p>return false;</p><p>}</p><p>}</p><p>}</p><p>return true;</p><p>}</p><p>function validateForm(theForm){// 若验证通过则返回true</p><p>var disableList=new Array();</p><p>var field = theForm.elements; // 将表单中的所有元素放入数组</p><p>for(var i = 0; i < field.length; i++){</p><p>var vali=theForm.validate;</p><p>if(vali!=null){</p><p>if(vali.value=="0"){</p><p>var fun=vali.functionName;</p><p>if(fun!=null){</p><p>return eval(fun+"()");</p><p>}</p><p>else{</p><p>return true;</p><p>}</p><p>}</p><p>}</p><p>var empty=false;</p><p>var value=trim(field[i].value);</p><p>if(value.length==0){//是否空值</p><p>empty=true;</p><p>}</p><p>var emptyInfo=field[i].emptyInfo;//空值验证</p><p>if(emptyInfo!=null&&empty==true){</p><p>alert(emptyInfo);</p><p>field[i].focus();</p><p>return false;</p><p>}</p><p>var lengthInfo=field[i].lengthInfo;//最大长度验证</p><p>if(lengthInfo!=null&&getStringLength(value)>field[i].maxLength){</p><p>alert(lengthInfo);</p><p>field[i].focus();</p><p>return false;</p><p>}</p><p>var validatorType=field[i].validatorType;</p><p>if(validatorType!=null){//其它javascript</p><p>var rs=true;</p><p>if(validatorType=="javascript"){</p><p>eval("rs="+field[i].functionName+"()");</p><p>if(rs==false){</p><p>return false;</p><p>}</p><p>else{</p><p>continue;</p><p>}</p><p>}</p><p>else if(validatorType=="disable"){//提交表单前disable的按钮</p><p>disableList.length++;</p><p>disableList[disableList.length-1]=field[i];</p><p>continue;</p><p>}</p><p>else if(validatorType=="Date"){</p><p>rs=validateDate(theForm.elements(field[i].fieldName),field[i].format,field[i].errorInfo);</p><p>}</p><p>else if(validatorType=="DateGroup"){</p><p>rs=validateDateGroup(theForm.elements(field[i].year),theForm.elements(field[i].month),theForm.elements(field[i].day),field[i].errorInfo);</p><p>}</p><p>else if(validatorType=="Checkbox"){</p><p>rs=validateCheckbox(theForm.elements(field[i].fieldName),field[i].errorInfo);</p><p>}</p><p>else if(validatorType=="Radio"){</p><p>rs=validateRadio(theForm.elements(field[i].fieldName),field[i].errorInfo);</p><p>}</p><p>else if(validatorType=="Select"){</p><p>rs=validateSelect(theForm.elements(field[i].fieldName),field[i].errorInfo);</p><p>}</p><p>else if(validatorType=="Email"){</p><p>rs=validateEmail(theForm.elements(field[i].fieldName),field[i].errorInfo);</p><p>}</p><p>else{</p><p>alert("验证类型不被支持, fieldName: "+field[i].name);</p><p>return false;</p><p>}</p><p>if(rs==false){</p><p>return false;</p><p>}</p><p>}</p><p>else{//一般验证</p><p>if(empty==false){</p><p>var v = field[i].validator; // 获取其validator属性</p><p>if(!v) continue; // 如果该属性不存在,忽略当前元素</p><p>var reg=new RegExp(v);</p><p>if(reg.test(field[i].value)==false){</p><p>alert(field[i].errorInfo);</p><p>field[i].focus();</p><p>return false;</p><p>}</p><p>}</p><p>}</p><p>}</p><p>for(i=0;i<disableList.length;i++){</p><p>disableList[i].disabled=true;</p><p>}</p><p>return true;</p><p>}</p><p></script></p><a href='https://www.eolink.com?utm=jiasou' target='_blank'><img style='width:100%;height:100%' src='https://www.eolink.com/news/zb_users/upload/2022/08/20220805174511165969271139602.jpg'></a><br> <p> <strong>版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。</strong> </p></div> <div class="article_footer clear"> <div class="fr tag">标签：<a href="https://www.eolink.com/news/tags-985.html">文件</a> </div> <div class="bdsharebuttonbox fl share"> <div class="share-widget fl"> <div class="social-share" data-sites="wechat,weibo, qq, qzone"></div> </div> </div> </div> <!-- 广告位ad4 --> <div class="post-navigation clear"> <div class="post-previous fl"> <span>上一篇:</span><a href="https://www.eolink.com/news/post/2877.html">正则表达式在JavaScript应用（js中正则表达式）</a> </div> <div class="post-next fr"> <span>下一篇:</span><a href="https://www.eolink.com/news/post/2879.html">jQuery中使用trigger触发click事件失效的解决办法</a> </div> </div> </div> <div class="related_article"> <div class="box_title clear"> <span><i class="icon fa fa-paper-plane"></i>相关文章</span> </div> <div class="related_list clear"> <article class="fl"> <div class="related_img"><a href="https://www.eolink.com/news/post/89100.html"><img src="https://www.eolink.com/news/zb_users/theme/zblog5_news/image/random_img/7.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.eolink.com/news/post/89100.html" title="java中的接口是类吗">java中的接口是类吗</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>299</span> <span><i class="fa fa-clock-o"></i>2022-06-13</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.eolink.com/news/post/89090.html"><img src="https://www.eolink.com/news/zb_users/theme/zblog5_news/image/random_img/2.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.eolink.com/news/post/89090.html" title="Spring中的aware接口详情">Spring中的aware接口详情</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>299</span> <span><i class="fa fa-clock-o"></i>2022-06-13</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.eolink.com/news/post/89057.html"><img src="https://www.eolink.com/news/zb_users/theme/zblog5_news/image/random_img/6.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.eolink.com/news/post/89057.html" title="Python接口自动化之文件上传/下载接口怎么实现">Python接口自动化之文件上传/下载接口怎么实现</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>299</span> <span><i class="fa fa-clock-o"></i>2022-06-13</span> </div> </div> </article> </div> </div> <div id="comment" class="post-comment clearfix sb br mt"> <p id="comments-title" class="c-title mb bn"><span><i class="fa fa-pencil"></i> 发表评论</span></p> <div class="compost"> <form id="frmSumbit" target="_self" method="post" action="https://www.eolink.com/news/zb_system/cmd.php?act=cmt&postid=2878&key=a503ba2873af30183e1bc8554a91a0c0"> <input type="hidden" name="inpId" id="inpId" value="2878"/> <input type="hidden" name="inpRevID" id="inpRevID" value="0"/> <div class="com-name"> <a rel="nofollow" id="cancel-reply" href="#comments" style="display:none;">取消回复</a> </div> <div class="com-info"> <ul> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpName" id="inpName" value="" tabindex="2" placeholder="昵称(必填)"> </li> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpEmail" id="inpEmail" value="" tabindex="3" placeholder="邮箱"> </li> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpHomePage" id="inpHomePage" value="" tabindex="4" placeholder="网址"> </li> </ul> </div> <div class="com-box"> <textarea placeholder="来都来了，说点什么吧..." class="textarea" name="txaArticle" id="txaArticle" cols="5" rows="5" tabindex="1">