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}))?$/; //手机号验证规则