使用 Jquery 验证表单
本文关键字：表单 验证 Jquery 使用 | 更新日期: 2023-09-27 18:35:42
我有一个包含 4 个下拉列表的表单，其自动回发属性设置为 true，并且每个下拉列表都会根据上一个下拉列表的选择进行填充。例如，在 ddlCourseLevel 中进行选择后填充 ddlCourseType 等。
我需要验证每个文本框和下拉列表，但由于其自动回发属性，我很难使用下拉列表。
如果有人能帮助我以验证此表格的最佳方式，或者任何提示或建议都很棒，那就太好了。多谢。下面是具有用于验证下拉列表和文本框的 jquery 函数的 aspx 文件。
Admin_Course_Edit.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="/JQuery_Plugins/timepicker/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<link href="../JQuery_Plugins/timepicker/css/ui-lightness/jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('#tbStartDate').datepicker({
duration: '',
showTime: true,
constrainInput: false
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BreadCrumbs" runat="server">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="rightNavigation" runat="server">
<script type="text/javascript">
$(document).ready(function () {
//Function to Validate DatePicker
$.validator.addMethod('isDate', function (value, element) {
var isDate = false;
try {
$.datepicker.parseDate('mm/dd/yy', value);
isDate = true;
}
catch (e) {
}
return isDate;
});
//Function to Validate DropDown Lists
$.validator.addMethod('selectNone',
function (value, element) {
return this.optional(element) ||
(value.indexOf("") == -1); //Leave it blank or enter the exact text in index 0
}, "Please Select an Option");
$("#form1").validate({
// $("#tbStartDate").rules("add", {isDate: true} messages: {isDate: "Date to Validate is invalid."}
rules: {
'<%=ddlCourseLevel.UniqueID %>': { selectNone: true },
'<%=tbStartDate.UniqueID %>': { required: true, isDate: true },
'<%=tbCourseName.UniqueID %>': { required: true, maxlength: 25 },
'<%=tbPointScale.UniqueID %>': { required: true, digits: true },
'<%=tbDescription.UniqueID %>': { maxlength: 50 }
},
messages: { '<%=tbStartDate.UniqueID %>': { isDate: "Please enter a Valid Date"} }
});
$("#imgBtn_A_save").click(function (evt) {
// Validate the form and retain the result.
var isValid = $("#form1").valid();
// If the form didn't validate, prevent the
// form submission.
if (!isValid)
evt.preventDefault();
});
$("#imgBtn_A_cancel").click(function () {
$("#form1").validate().cancelSubmit = true;
});
});
function HideLabel() {
document.getElementById('<%= lblMessage.ClientID %>').style.display = "none";
}
setTimeout("HideLabel();", 2000);
</script>
<div class="Admin_rightNavtop">
<div class="title">
<asp:Label ID="lblTitle" Text="Edit Course" runat="server" class="titleLbl" />
</div>
<p align="center">
<asp:Label ID="lblMessage" runat="server" Style="color: Red" /></p>
<!-- START TABLE ADD FORM-->
<table style="margin-left: 70px">
<tr>
<td>
<asp:Label ID="LblCourseLevel" Text="* Course Level :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:DropDownList ID="ddlCourseLevel" class="ddlSize_large_addEdit" OnSelectedIndexChanged="ddlCourseLevel_SelectedIndexChanged"
AutoPostBack="true" EnableViewState="true" OnDataBound="helperCourseLevel_Databound"
runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="CourseType" Text="* Course Type :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:DropDownList ID="ddlCourseType" runat="server" class="ddlSize_large_addEdit"
OnDataBound="helperCourseType_Databound" EnableViewState="true" OnSelectedIndexChanged="ddlCourseType_SelectedIndexChanged"
AutoPostBack="true" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblCourseName" Text="* Course Name :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:DropDownList ID="ddlCourseName" class="ddlSize_large_addEdit" OnSelectedIndexChanged="ddlCourseName_SelectedIndexChanged"
AutoPostBack="true" EnableViewState="true" OnDataBound="helperCourse_Databound"
runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblCourseName2" Text="* New Name :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:TextBox ID="tbCourseName" class="tbSize_large_addEdit" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblStartDate" Text="* Start Date :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:TextBox ID="tbStartDate" runat="server" class="tbSize_large_addEdit" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblGraded" Text="* Grade Type :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:DropDownList ID="ddlGradeType" runat="server" class="ddlSize_large_addEdit"
OnSelectedIndexChanged="ddlGradeType_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem>---Select Grade Type---</asp:ListItem>
<asp:ListItem Value="1">Point Scale</asp:ListItem>
<asp:ListItem Value="2">Pass/Fail</asp:ListItem>
<asp:ListItem Value="3">Attendance</asp:ListItem>
<asp:ListItem Value="4">Not Graded</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblPointScale" Text="* Point Scale :" runat="server" class="lblSize_largeGreen"
Visible="false" />
</td>
<td>
<asp:TextBox ID="tbPointScale" runat="server" class="tbSize_large_addEdit" Visible="false" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblDescription" Text="Description :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:TextBox ID="tbDescription" runat="server" class="tbSize_large_addEdit" />
</td>
</tr>
</table>
<!-- End of Table ADD COURSE-->
</div>
<!-- End of rightNavTop-->
<center>
<div class="Admin_action">
<asp:ImageButton ID="imgBtn_A_save" ImageUrl="../Images/Save.png" OnClick="save_Click"
runat="server" class="Admin_action_imgSize_small" />
<asp:ImageButton ID="imgBtn_A_cancel" ImageUrl="../Images/Cancel.png" runat="server"
class="Admin_action_imgSize_small" CausesValidation="false" OnClick="cancel_Click" />
</div>
</center>
<!-- End selection buttons-->
</asp:Content>
可以将 onchange 事件添加到控件，如果认为取消回发无效，则返回 false。
就个人而言，我想使用 jQuery 和 AJAX 完成整个 shebang，并删除讨厌的自动回发。
依赖 DDL 的验证还必须检查其"父"DDL。
DDL 1 - Must be selected
DDL 2 - If DDL 1 is selected must be selected.
DDL 3 - If DDL 2 is selected must be selected.
DDL 4 - If DDL 4 is selected must be selected.
抱歉，我没有时间编写代码，但希望这会有所帮助。