web开发之表单验证

骑猪看日落 2022-09-18 06:00 160阅读 0赞

## 功能概述 ##

web开发页面中，常见表单提交时需要验证输入域，输入域有各种格式，如邮件、手机号、数字型等情况，传统方法使用js进行逐个输入域的判断验证，代码量比较大，不易维护修改。如果我们开发时，每次都写验证逻辑，代码重复量很大。这里介绍使用第三方的jquery验证组件进行验证表单。使用第三方的验证组件对表单的输入域进行控制处理，表单提交时会自动根据设定的域验证规则进行校验。

## 页面效果 ##

待补充。

## 源码构件 ##

1.引入js库及css样式：

<table> 
 <tbody> 
  <tr> 
   <td>&lt;link rel="stylesheet" href="&lt;%=path%&gt;/utm/jValidationEngine/css/validationEngine.jquery.css" type="text/css"/&gt;<br> &lt;script src="&lt;%=path%&gt;/js/validateform.js"&gt;&lt;/script&gt;<br> &lt;script src="&lt;%=path%&gt;/utm/jValidationEngine/js/languages/jquery.validationEngine-zh_CN.js" type="text/javascript" &gt;&lt;/script&gt;<br> &lt;script src="&lt;%=path%&gt;/utm/jValidationEngine/js/jquery.validationEngine.js" type="text/javascript" &gt;&lt;/script&gt;</td> 
  </tr> 
 </tbody> 
</table>

2.提交时的代码范例如下：

<table> 
 <tbody> 
  <tr> 
   <td>function addRequire(){ <br> <span style="white-space:pre"></span>if($('#myform').validationEngine('validateform')){ <br> <span style="white-space:pre"></span>var vform = document.myform;<br> <span style="white-space:pre"></span>var callurl = "?callBack=to_back";<br> <span style="white-space:pre"></span>&nbsp;vform.action = "&lt;%=path%&gt;/requires/addRequire.action"+callurl;<br> <span style="white-space:pre"></span>formSubmit(vform);<span style="white-space:pre"></span>//vform.submit();<br> }</td> 
  </tr> 
 </tbody> 
</table>

3.页面输入域，范例如下：

<table> 
 <tbody> 
  <tr> 
   <td>&lt;s:form name="myform" id="myform" action="" &nbsp;method="post" theme="simple" &nbsp;enctype="multipart/form-data"&gt;<br> &lt;tr&gt;<br> <span style="white-space:pre"></span>&lt;td class="c4" width="15%" &gt;手机号&amp;nbsp;&lt;span class="required" &gt;*&lt;/span&gt;&lt;/td&gt;<br> <span style="white-space:pre"></span>&lt;td class="c3"&gt;<br> <span style="white-space:pre"></span>&lt;s:textfield name="contacter.mobile" id="mobile" &nbsp;size="50" &nbsp;maxlength="20" cssClass="validate[required,custom[mobile]]"&gt;&lt;/s:textfield&gt;&lt;!--这里是一个手机号的验证规则--&gt;<br> <span style="white-space:pre"></span>&lt;/td&gt;<br> &nbsp; &nbsp; &lt;/tr&gt;<br> &lt;/s:form&gt;</td> 
  </tr> 
 </tbody> 
</table>

4.validateform.js中定义了验证的规则，可以自行扩展，在页面输入域中的cssClss中引用，范例如下：

<table> 
 <tbody> 
  <tr> 
   <td>validrule.email &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= /^(.+\@.+\..+)?$/; &nbsp; //邮箱验证规则<br> validrule.phone &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= /^($\d{3}$)?($?(\d{3}|\d{4}|\d{5})$?(-?)(\d+))?((-?)(\d+))?$/; //电话号码验证规则<br> validrule.mobiletel &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= /^(013(\d{9})|13(\d{9})|15(\d{9})|015(\d{9})|18(\d{9})|018(\d{9}))?$/; //手机号验证规则</td> 
  </tr> 
 </tbody> 
</table>