jquery.easyui添加表单验证

最新推荐文章于 2023-05-15 09:08:55 发布

Bert__

最新推荐文章于 2023-05-15 09:08:55 发布

阅读量1.2k

点赞数

分类专栏： Jquery 文章标签： Jquery

本文链接：https://blog.csdn.net/bobchao0730/article/details/51248992

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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"
										οnchange="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;"
										οnclick="WdatePicker({maxDate:'%y-%M-{%d}'})" size="11" required="true" missingMessage="起始日期为必填项"/>
									 
									<img src="images/date.gif" width="16" height="15"
											οnclick="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}" />"
										οnclick="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"
										οnclick="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"
										οnchange="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"
										οnchange="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"/>" οnclick="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"/>' οnclick="exportExcel()" /></p:allow>
                          	  </td>
                       	  </tr>
                         </table>
					</td>
				</tr>
			</table>
	</body>

</html>

三、效果图

Bert__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.easyui添加表单验证

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。一、所需资源二、psgInfoReport.jsp中添加表单验证旅客信息
复制链接

扫一扫