ASP.NET jQuery 實(shí)例14 在ASP.NET form中校驗(yàn)時(shí)間范圍
更新時(shí)間:2012年02月03日 17:22:26 作者:
這節(jié)主要講如何用jQuery校驗(yàn)表單時(shí)間范圍,時(shí)間控件用到了jQuery-ui
下載地址:http://jqueryui.com/download,Theme選擇Sunny
界面代碼:
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 400px; height: 150px">
<table border="0" cellpadding="3" cellspacing="3">
<tr>
<td colspan="2">
請(qǐng)輸入日期范圍:
</td>
</tr>
<tr>
<td>
開始時(shí)間:
</td>
<td>
<asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
結(jié)束時(shí)間:
</td>
<td>
<asp:TextBox ID="txtEndDate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnSubmit" runat="server" Text="提交" /> <asp:Button ID="btnReset" runat="server"
Text="重置" />
</td>
</tr>
</table>
</fieldset>
</div>
</form>
腳本代碼:
<head id="Head1" runat="server">
<title>Recipe14</title>
<link rel="Stylesheet" href="Styles/sunny/jquery-ui-1.8.17.custom.css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txtStartDate").datepicker();
$("#txtEndDate").datepicker();
$("#btnSubmit").click(function (e) {
e.preventDefault();
var startdate = Date.parse($("#txtStartDate").val());
var enddate = Date.parse($("#txtEndDate").val());
if (startdate > enddate) {
alert("開始時(shí)間不能大于結(jié)束時(shí)間!");
}
});
$("#btnReset").click(function (e) {
e.preventDefault();
$("#txtStartDate").val("");
$("#txtEndDate").val("");
});
});
</script>
</head>
最終界面:
界面代碼:
復(fù)制代碼 代碼如下:
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 400px; height: 150px">
<table border="0" cellpadding="3" cellspacing="3">
<tr>
<td colspan="2">
請(qǐng)輸入日期范圍:
</td>
</tr>
<tr>
<td>
開始時(shí)間:
</td>
<td>
<asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
結(jié)束時(shí)間:
</td>
<td>
<asp:TextBox ID="txtEndDate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnSubmit" runat="server" Text="提交" /> <asp:Button ID="btnReset" runat="server"
Text="重置" />
</td>
</tr>
</table>
</fieldset>
</div>
</form>
腳本代碼:
復(fù)制代碼 代碼如下:
<head id="Head1" runat="server">
<title>Recipe14</title>
<link rel="Stylesheet" href="Styles/sunny/jquery-ui-1.8.17.custom.css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txtStartDate").datepicker();
$("#txtEndDate").datepicker();
$("#btnSubmit").click(function (e) {
e.preventDefault();
var startdate = Date.parse($("#txtStartDate").val());
var enddate = Date.parse($("#txtEndDate").val());
if (startdate > enddate) {
alert("開始時(shí)間不能大于結(jié)束時(shí)間!");
}
});
$("#btnReset").click(function (e) {
e.preventDefault();
$("#txtStartDate").val("");
$("#txtEndDate").val("");
});
});
</script>
</head>
最終界面:
相關(guān)文章
基于?jquery-cxselect?實(shí)現(xiàn)下拉聯(lián)動(dòng)效果功能實(shí)現(xiàn)
這篇文章主要介紹了基于?jquery-cxselect?實(shí)現(xiàn)下拉聯(lián)動(dòng)效果,下拉聯(lián)動(dòng)是基于query的一款聯(lián)動(dòng)下拉菜單插件 jquery-cxselect實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02jQuery實(shí)現(xiàn) 注冊(cè)時(shí)選擇閱讀條款 左右移動(dòng)
本篇文章,小編將為大家介紹jQuery實(shí)現(xiàn) 注冊(cè)時(shí)選擇閱讀條款 左右移動(dòng),有需要的朋友可以參考一下2013-04-04jQuery 如何實(shí)現(xiàn)一個(gè)滑動(dòng)按鈕開關(guān)
本文給大家分享一段jquery代碼實(shí)現(xiàn)滑動(dòng)按鈕開關(guān)的效果,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的的朋友參考下2016-12-12jQuery 判斷是否包含在數(shù)組中Array[]的方法
下面小編就為大家?guī)硪黄猨Query 判斷是否包含在數(shù)組中Array[]的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無刷新取后臺(tái)值的實(shí)現(xiàn)代碼
asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無刷新取后臺(tái)值的實(shí)現(xiàn)代碼 ,比頁面刷新更好,用戶體驗(yàn)更好,需要的朋友可以參考下。2010-09-09