jquery.easyui新增表單驗證

阿新 • • 發佈：2019-01-16

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>

三、效果圖

jquery.easyui新增表單驗證

jQuery EasyUI是一組基於jQuery的UI外掛集合體，而jQuery EasyUI的目標就是幫助web開發者更輕鬆的打造出功能豐富並且美觀的UI介面。開發者不需要編寫複雜的javascript，也不需要對css樣式有深入的瞭解，開發者需要了解的只有一些簡單的ht

jQuery validate 新增表單驗證方法

給表單引數新增驗證（jQuery庫的使用）準備工作：引入jQuery庫引入bootstrap庫引入jQuery validate庫 js檔案： var Register = function() { return {

easyui jquery 自定義表單驗證非同步後臺

後臺程式碼： public String validDatabaseName(){ try { HttpServletRequest request = ServletActionCont

jQuery easyui 取消表單的實時驗證，在提交時統一驗證

在使用easyui驗證表單的必輸、格式等資訊時，如果在每個input中輸入 data-options="required:true"，那麼文字框一開始就會用紅顏色提示，感覺不友好，其實驗證可以放到表單

JaveWeb 公司項目（4）----- Easyui的表單驗證

過程 -- 目前要求今天和數希望小項目 web 前面三篇博文講述的是界面的搭建和數據的傳輸，可以看出目前我做的這個小項目已經有了一個大體的雛形，剩下的就是細節部分的打磨和一些友好的人機交互設計，今天做的是表單的驗證，作為初學者，著實花了一番功夫，所以寫一篇博文將這

easyui 之表單驗證

pla focus res default code font led disable function 1 /** 2 * 擴展easyui的validator插件rules，支持更多類型驗證 3 */ 4 $.extend($.fn.val

Jquery.validate.js表單驗證

first 博客插件怎麽辦 row form表單顯示 ble logs 前言：表單驗證是十分常見的需求。公司做運維系統需要大量的編輯/新增表單，編輯之後提交，提交前需要進行表單驗證，驗證成功才能發起POST請求。由於項目前端大部分是基於Bootstrap開發的，

jQuery之Validation表單驗證插件使用

urn html .org utf span con require input 詳情 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met

layer,Jquery,validate實現表單驗證，刷新頁面，關閉子頁面

名稱 ron primary ocl span () bsp money 新頁面 1、表單驗證　　　　　　　　　　 //獲取父層 var index = parent.layer.getFrameIndex(window.na

jquery簡單的表單驗證密碼

submit click log function func put jquer wid post <tbody> <tr> <td style="width:25%">修改密碼:</td>

[jQuery學習系列五 ]5-Jquery學習五-表單驗證

正則表達式 prevent 反選 mit 信息只能輸入數字 event 正則表達紅包一，字段驗證：1.1 字段非空 <form action="" method="post" id ="myform"> <p id="error"&g

jQuery.validate.js表單驗證插件

gnu back view align one tom scrip ddd ali jQuery.validate.js表單驗證插件的使用效果：代碼： <!DOCTYPE html> <html lang="en"> <hea

jQuery Validate實現表單驗證

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用 jQuery validate 表單驗證</ti

使用Jquery.validate做表單驗證

HTML示例程式碼 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head&

用Html.BeginForm輔助方法進行easyui 的表單驗證

程式碼片段如下（即可以用html的輔助方法，也可以用ajax的輔助方法）： @{ ViewBag.Title = "Home Page"; } @section styles {

jquery動態新增表單刪除表單

//html部分 <div class="form-group col-sm-12" id="group"> <label for="" class="col-sm-1 control-label"><span style="color

jQuery之Validate表單驗證（一）

jQuery 是一個快速、簡單的JavaScript 庫，它簡化了HTML 檔案的traversing，事件處理、動畫、Ajax 互動，從而方便了網頁製作的快速發展。 jQuery Validate 外掛為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單。廢話不多說，開始dem

基於Bootstrap+jQuery.validate Form表單驗證實踐

<!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title> <meta charset="utf-8" />

Jquery的validate表單驗證

Jquery的validate的表單驗證功能學習 ③匯入 validate是jQuery外掛，及必須在jQuery的基礎上進行執行。我們將匯入jQuery庫、validate庫、和國際化資源庫（可選）

使用easyUI中的jquery.validate.min.js外掛進行表單驗證並自定義校驗規則

以前使用原生的js或者jQuery寫表單驗證真的好麻煩，使用上面的easyUI外掛配合著ajax真的節省好多程式碼量直接上程式碼<%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%&g

jquery.easyui新增表單驗證

相關推薦