web开发之表单验证

功能概述

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

页面效果

           待补充。

源码构件

1.引入js库及css样式：

<link rel="stylesheet" href="<%=path%>/utm/jValidationEngine/css/validationEngine.jquery.css" type="text/css"/>
<script src="<%=path%>/js/validateform.js"></script>
<script src="<%=path%>/utm/jValidationEngine/js/languages/jquery.validationEngine-zh_CN.js" type="text/javascript" ></script>
<script src="<%=path%>/utm/jValidationEngine/js/jquery.validationEngine.js" type="text/javascript" ></script>2.提交时的代码范例如下：

function addRequire(){
if($('#myform').validationEngine('validateform')){
var vform = document.myform;
var callurl = "?callBack=to_back";
 vform.action = "<%=path%>/requires/addRequire.action"+callurl;
formSubmit(vform);//vform.submit();
}3.页面输入域，范例如下：

<s:form name="myform" id="myform" action=""  method="post" theme="simple"  enctype="multipart/form-data">
<tr>
<td class="c4" width="15%" >手机号&nbsp;<span class="required" >*</span></td>
<td class="c3">
<s:textfield name="contacter.mobile" id="mobile"  size="50"  maxlength="20" cssClass="validate[required,custom[mobile]]"></s:textfield><!--这里是一个手机号的验证规则-->
</td>
    </tr>
</s:form>4.validateform.js中定义了验证的规则，可以自行扩展，在页面输入域中的cssClss中引用，范例如下：validrule.email                = /^(.+\@.+\..+)?$/;   //邮箱验证规则
validrule.phone                = /^(\(\d{3}\))?(\(?(\d{3}|\d{4}|\d{5})\)?(-?)(\d+))?((-?)(\d+))?$/; //电话号码验证规则
validrule.mobiletel            = /^(013(\d{9})|13(\d{9})|15(\d{9})|015(\d{9})|18(\d{9})|018(\d{9}))?$/; //手机号验证规则