在ASP.NET中使用javascript进行自定义验证需要帮助 [英] Need help in custom validation using javascript in ASP.NET

问题描述

创建包含不同文本框的网页。网页必须使用JavaScript提供以下功能来制作验证控件：



o文本框输入FROM city o文本框进入TO城市，验证FROM和TO城市不同。



o文本框进入离开日期，确认出发日期是今天之后



。输入RETURN DATE的文本框，确认返回日期是在出发日期之后



问题：如何使用JavaScript执行验证并显示错误消息验证失败如上所述？



我尝试过：



这是我到目前为止的代码：



JS：

Create a webpage with different text boxes. The webpage must provide the following functionality using JavaScript to make validation controls:

o text box to enter FROM city o text box to enter TO city, verify that the FROM and TO cities are different.

o text box to enter DEPARTURE DATE, verify that the departure date is after today

text box to enter RETURN DATE, verify that the return date is after departure date

QUESTION: How can I use JavaScript to perform the validations and show an error message if the validation fails as above?

What I have tried:

This is my code so far:

JS:

function validateCity(source, args) {
	var fromCity = document.getElementById("txtFromCity").value;
	var toCity = document.getElementById("txtToCity").value;
	
	if (fromCity == toCity) {
		 args.IsValid = false;
	} else {
		return args.IsValid = true;
	}
}

ASP.NET：

ASP.NET:

<table id="roundTrip" style="display:none;">
				<tr>
					<td>
						<asp:Label ID="Label4" runat="server" Text="From"></asp:Label>
					</td>
					<td>
						<asp:TextBox ID="txtFromCity" runat="server" Text=""></asp:TextBox>
					</td>
				</tr>
				<tr>
					<td>
						<asp:Label ID="Label5" runat="server" Text="To"></asp:Label>
					</td>
					<td>
						<asp:TextBox ID="txtToCity" runat="server" Text=""></asp:TextBox>
						<asp:CustomValidator ID="custToCity" runat="server" 
							ControlToValidate="txtToCity" 
							ErrorMessage="Not Same" 
							Display="Dynamic" 
							ClientValidationFunction="validateCity" /> 
					</td>
				</tr>
				<tr>
					<td>
						<asp:Label ID="Label6" runat="server" Text="Depart Date"></asp:Label>
					</td>
					<td>
						<asp:TextBox ID="TextBox6" runat="server" Text=""></asp:TextBox>
					</td>
				</tr>
				<tr>
					<td>
						<asp:Label ID="Label7" runat="server" Text="Return Date"></asp:Label>
					</td>
					<td>
						<asp:TextBox ID="TextBox7" runat="server" Text=""></asp:TextBox>
					</td>
				</tr>
				</table>

推荐答案

CustomValidator.ClientValidationFunction属性（System.Web.UI.WebControls）| Microsoft Docs [ ^ ]

起始和验证日期



用于验证日期使用弹出日历。因此，用户可以轻松地从日历中选择日期。



使用弹出日历的步骤



第1步首先在aspx页面的顶部注册弹出日历。

From and To Date Validation

For validating the date use pop up calendar. So the User can easily select the date from calendar.

Steps of using popup calendar

Step 1 First Register Popup Calender on the top of of your aspx page.

<%@ Register Assembly="RJS.Web.WebControl.PopCalendar.Net.2008" Namespace="RJS.Web.WebControl"
    TagPrefix="rjs" %>

步骤2 将日历与日期文本框一起使用。

Step 2 Use Calendar with your date text boxes.

 <tr>
   <td><asp:Label ID="Label6" runat="server" Text="Depart Date"</asp:Label></td>
   <td><asp:TextBox ID="TextBox6" runat="server" Text=""></asp:TextBox>
   <div style="margin-left: 130px; margin-top: -21px;">
     <rjs:PopCalendar ID="calDepartureDateFrom" runat="server" Control="TextBox6"
     From-Date="1950-01-01" Separator="/" Format="dd mm yyyy" 
     ShowErrorMessage="false" />
   </div>
</td>
 </tr>

 <tr>
  <td><asp:Label ID="Label7" runat="server" Text="Return Date"></asp:Label></td>
  <td><asp:TextBox ID="TextBox7" runat="server" Text=""></asp:TextBox>
   <div style="margin-left: 130px; margin-top: -21px;">
    <rjs:PopCalendar ID="calReturnDateTo" runat="server" 
     Control="TextBox7" From-Date="" Separator="/" Format="dd mm yyyy" 
     ShowErrorMessage="false" From-Control="TextBox6" />
    </div>
  </td>
 </tr>

< b>步骤3 将出发日历开始日期设置为今天之后（禁用过去的日期）。可以在页面加载事件的cs（代码隐藏）页面上设置日期。

Step 3 Set Departure Calendar Start Date to after Today(dissabling past dates). The Date can be set on the cs(Code behind) page on page load event.

protected void Page_Load(object sender, EventArgs e)  
{
   calDepartureDateFrom.StartDate = DateTime.Now+1; //dissabling past dates
}

这篇关于在ASP.NET中使用javascript进行自定义验证需要帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！