web开发之表单验证

最新推荐文章于 2025-05-22 12:21:53 发布

原创最新推荐文章于 2025-05-22 12:21:53 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Web开发

功能概述

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

页面效果

待补充。

源码构件

1.引入js库及css样式：

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