功能概述
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> |
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(); } |
<s:form name="myform" id="myform" action="" method="post" theme="simple" enctype="multipart/form-data"> <tr> <td class="c4" width="15%" >手机号 <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> |
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}))?$/; //手机号验证规则 |