WebForms中表单验证不通过时如何阻止回发？

我明白你的困扰——当用runat="server"的提交按钮时，ASP.NET自动生成的__doPostBack会直接触发回发，完全跳过了你设置的HTML5表单验证（比如required属性）。要实现只有验证通过才触发回发，可以试试下面这两种方法：

方法1：在回发前手动触发HTML5表单验证 #

核心思路是修改按钮的onclick事件，先调用浏览器的表单验证API，验证通过后再执行回发逻辑。

具体步骤： #

1. 获取表单的客户端ID：因为ASP.NET会自动修改服务器控件的ID（尤其是在用户控件ascx中），我们需要用Page.Form.ClientID拿到渲染后的真实表单ID，避免找不到元素。
2. 给按钮添加验证前置逻辑：在后台Page_Load事件里，给按钮的onclick属性追加验证代码，拦截未通过验证的回发。

后台VB代码示例：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    ' 给输入框添加required属性
    myTextField.Attributes.Add("required", "required")

    ' 获取表单的客户端ID
    Dim formClientId As String = Me.Page.Form.ClientID

    ' 重写按钮点击逻辑：先验证表单，通过后再执行回发
    Dim originalOnClick As String = btnSumbit.Attributes("onclick")
    btnSumbit.Attributes("onclick") = $"if(!document.getElementById('{formClientId}').reportValidity()) {{ event.preventDefault(); return false; }} {originalOnClick}"
End Sub

原理说明： #

• reportValidity()会触发浏览器原生的HTML5验证流程：如果表单未通过验证，它会弹出默认的错误提示框，同时返回false，我们借此阻止回发。
• 若验证通过，函数返回true，就会执行原来的__doPostBack代码，触发正常回发。
• 如果你不需要浏览器的默认提示框，也可以用checkValidity()替代——它只会返回验证结果，不会显示提示。

方法2：改用ASP.NET内置验证控件（可选） #

如果你愿意切换到ASP.NET原生的验证体系，可以使用RequiredFieldValidator控件，它会自动处理客户端+服务器端双重验证，只有验证通过才允许回发：

前端ascx代码示例：

<div class="form-group">
    <label for="FirstName">
        <asp:Localize ID="Localize5" runat="server" meta:resourcekey="fieldText" />
    </label>
    <asp:TextBox ID="myTextField" runat="server" CssClass="form-control" />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
        ControlToValidate="myTextField"
        ErrorMessage="请填写此字段！"
        Display="Dynamic">
    </asp:RequiredFieldValidator>
</div>

这种方法不需要额外的JS逻辑，ASP.NET会自动生成客户端验证脚本，省心又可靠。

内容的提问来源于stack exchange，提问作者H. Pauwelyn