在本文中，将探讨如何使用jQuery对ASP.NET中的GridView控件进行验证。这涉及到在前端设置GridView、编写后端代码以及实现前端验证逻辑。将展示如何显示和编辑数据，以及如何对特定字段（如年龄和电子邮件）进行验证。
首先，在ASPX页面上，将设置GridView以显示以下字段：
对于每个字段，将有一个TemplateField，它包含ItemTemplate（在Grid加载时显示）和EditItemTemplate（在Grid处于编辑模式时显示）。
<asp:GridView ID="gvTestValidations" runat="server" AutoGenerateColumns="false"
OnRowEditing="gvTestValidations_RowEditing" OnRowUpdating="gvTestValidations_RowUpdating"
OnRowCancelingEdit="gvTestValidations_RowCancelingEdit">
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%#Bind("Name") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtName" runat="server" Text='<%#Bind("Name") %>'/>
</EditItemTemplate>
</asp:TemplateField>
...
</Columns>
</asp:GridView>
在ASPX.CS页面上，将创建一个DataTable属性，用于存储GridView的数据。将编辑和更新ViewState中的表，并将其绑定到GridView。在Page Load事件中，将声明硬编码的行并将它们添加到DataTable中。然后绑定到GridView。
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("Name"));
dt.Columns.Add(new DataColumn("Age"));
dt.Columns.Add(new DataColumn("Email"));
dt.Columns.Add(new DataColumn("DOB"));
dt.Columns.Add(new DataColumn("Gender"));
...
DataRow dr = dt.NewRow();
dr["Name"] = "Deepak Mahapatra";
dr["Age"] = 24;
dr["Email"] = "abc@anything.com";
dr["DOB"] = "09/28/1990";
dr["Gender"] = "Male";
dt.Rows.Add(dr);
...
dtGridData = dt;
BindGrid();
}
}
在浏览器中，GridView将在初始加载时显示数据。当点击编辑按钮时，第一行将进入编辑模式。接下来，将进行实际的验证。
对于年龄字段，只允许数字输入。对于电子邮件字段，将进行电子邮件验证。可以进行更多的验证，只需学习如何进行验证。
逻辑是，在document Ready事件中，将尝试找到GridView中所有的年龄TextBox和电子邮件TextBox，并分别处理keydown和change事件。
$("input[id*='txtAge']").each(function () {
$(this).keydown(function (event) {
$(this).val($(this).val().replace(/[^\d].+/, ""));
var charCode = (event.which) ? event.which : event.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
event.preventDefault();
}
});
});
对于电子邮件TextBox，使用相同的逻辑，唯一的区别是在这里处理change事件而不是keydown事件。
$("input[id*='txtEmail']").each(function () {
$(this).change(function (event) {
if (!validateEmail($(this).val())) {
alert("Email not in correct format.");
$(this).addClass('errorClass');
event.preventDefault();
} else {
$(this).removeClass('errorClass');
}
});
});
注意：CSS类“errorClass”用于在验证失败时将电子邮件TextBox边框设置为红色。
还有一个有趣的事情...还限制用户在行未验证的情况下更新记录。假设用户输入了一个错误的电子邮件地址，然后直接点击更新按钮，那么它将不允许用户更新并显示一条消息。为此，使用变量isValidated，已经在代码中看到了。只是在更新按钮点击事件中检查isValidated的值，并根据该值采取行动。再次使用相同的逻辑，搜索所有链接并找到具有“更新”文本的按钮，并触发其click事件。
$("a").each(function () {
if ($(this).text() == "Update") {
$(this).click(function (event) {
if (!isValidated) {
alert("There are issues with input fields. Please correct and then try.");
return false;
} else {
return true;
}
});
}
});