jquery.easyui添加表单验证

来源：互联网发布：寻找网络兼职编辑：程序博客网时间：2024/05/01 14:30

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

一、所需资源

二、psgInfoReport.jsp中添加表单验证

<%@ page pageEncoding="UTF-8"%><%@ include file="/common/taglibs.jsp"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>旅客信息统计</title><link href="<c:url value='/styles/easyui.css'/>" type="text/css" rel="stylesheet">   <link href="<c:url value='/styles/icon.css'/>" type="text/css" rel="stylesheet"><script src="<c:url value='/scripts/common.js'/>"></script><script src="<c:url value='/scripts/jquery.js'/>"></script><script src="<c:url value='/scripts/jquery.easyui.min.js'/>"></script><script src="<c:url value='/scripts/easyui-lang-zh_CN.js'/>"></script><script src="<c:url value='/scripts/datePicker/WdatePicker.js'/>" language="javascript"></script><script language="JavaScript" type="text/JavaScript">//导出var exportExcel = function(){if($('#psgInfoSearchForm').form('validate')){//验证通过}else{ return false;}}</script></head><body leftmargin="0" topmargin="0"><%@include file="/common/loading.jsp"%><html:form action="psgInfoSearch.html?method=psgInfoView" method="post" styleId="psgInfoSearchForm"><input type="hidden" id='export'/> <table width="100%" height="100%" border="0" cellpadding="0"cellspacing="0">                <tr><td class="home-content-title"><img src="images/find.png" align="absmiddle" />  旅客信息统计<font color="red">(起止时间段不能超过5天)</font></td></tr><tr><td height="30" class="home-search-space"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr height="30" class="home-search-space"><td align="right">航班号：</td><td align="left"><input type="text" id="flt_num" value="<c:out value="${psgInfoSearchForm.flt_num}"/>" name="flt_num" class="home-table-inputbox" size="12" maxlength="9"onchange="this.value=this.value.toUpperCase()" /></td><td align="right" nowrap width="10%"><font color="red">*</font>起始日期：</td><td nowrap width="10%"><input name="startDate" id="startDate"class="easyui-validatebox"value="<c:out value="${psgInfoSearchForm.startDate}"/>"onPicked="$('endDate').onfocus();document.getElementById('endDate').value=this.value;"onclick="WdatePicker({maxDate:'%y-%M-{%d}'})" size="11" required="true" missingMessage="起始日期为必填项"/> <img src="images/date.gif" width="16" height="15"onclick="WdatePicker({el:'startDate',maxDate:'%y-%M-{%d}'})" /></td><td align="right" nowrap width="10%"><font color="red">*</font>截止日期：</td><td nowrap width="10%"><input name="endDate" id="endDate" class="easyui-validatebox" value="<c:out value="${psgInfoSearchForm.endDate}" />"onclick="WdatePicker({minDate:'#F{$dp.$D(\'startDate\')}',maxDate:'#F{$dp.$D(\'startDate\',{M:12});}'})" size="11" required="true" missingMessage="截止日期为必填项"/> <img src="images/date.gif" width="16" height="15"onclick="WdatePicker({el:'endDate',minDate:'#F{$dp.$D(\'startDate\')}',maxDate:'#F{$dp.$D(\'startDate\',{M:12});}'})" /></td>    </tr><tr height="30" class="home-search-space"><td align="right">始发站：</td><td align="left"><input type="text" id="orig" name="orig" value="<c:out value="${psgInfoSearchForm.orig}" />" class="home-table-inputbox" size="12" maxlength="9"onchange="this.value=this.value.toUpperCase()" /></td>  <td align="right">目的站:</td><td align="left"><input type="text" id="dest"  name="dest" value="<c:out value="${psgInfoSearchForm.dest}" />" class="home-table-inputbox" size="12" maxlength="9"onchange="this.value=this.value.toUpperCase()" /></td>    <td align=right width="14%">状态:</td>  <td width="15%">                         <html:select name="psgInfoSearchForm" property="status"  size="1" styleId="status">                           <html:option  value="">全部</html:option>                            <html:option  value="AC">已值机</html:option>                            <html:option  value="NA">未值机</html:option>                           </html:select>                </td>                 <td >                 <input name="Submit2" id="queryId" type="button" class="home-inputBtn" value="<fmt:message key="button.search"/>" onclick="search()" accesskey="S" title="按 Alt+S 提交查询">                             <input type="button" id="resetId" class="home-inputBtn" name="Submit22" value="<fmt:message key="button.reset"/>" onClick="doReset()">                            <p:allow pid="132005"><input type='button' id="exprotId" class="home-inputBtn" value='<fmt:message key="button.export"/>' onclick="exportExcel()" /></p:allow>                            </td>                         </tr>                         </table></td></tr></table></body></html>

三、效果图

0 0