jquery.easyui新增表單驗證
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庫、和國際化資源庫(可選) <!--依賴的jQuery庫-->
使用easyUI中的jquery.validate.min.js外掛進行表單驗證並自定義校驗規則
以前使用原生的js或者jQuery寫表單驗證真的好麻煩,使用上面的easyUI外掛配合著ajax真的節省好多程式碼量直接上程式碼<%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%&g