ASP.NET：验证TextBox正则表达式后禁用提交按钮

没问题，我来帮你搞定这个需求——当邮箱输入框通过验证后禁用提交按钮，避免用户重复点击提交。结合你给出的代码片段，我们可以通过客户端JavaScript来实现这个逻辑，步骤如下：

1. 完善邮箱输入框的验证提示 #

首先，先把你的TextBox2的验证提示逻辑补全，确保用户输入错误时显示自定义提示，输入正确时重置提示：

<asp:TextBox ID="TextBox2" runat="server" placeholder="Email" class="form-control" 
    type="email" Font-Size="Large" 
    oninvalid="setCustomValidity('请输入有效的邮箱地址')" 
    oninput="setCustomValidity('')"></asp:TextBox>

这里添加了oninput事件，用来在用户修改输入时清除之前的错误提示，保证验证逻辑正常工作。

2. 修改提交按钮的客户端点击事件 #

接下来，修改你的myFunction2()函数，让它在验证通过时禁用按钮。注意要获取ASP.NET控件生成的真实客户端ID（因为服务器端控件的ID可能会被ASP.NET修改）：

function myFunction2() {
    // 获取邮箱输入框和提交按钮的DOM元素
    const emailInput = document.getElementById('<%= TextBox2.ClientID %>');
    const submitBtn = document.getElementById('<%= Button1.ClientID %>');

    // 先检查HTML5邮箱验证是否通过
    if (emailInput.checkValidity()) {
        // 验证通过：禁用按钮，修改文本提示用户
        submitBtn.disabled = true;
        submitBtn.textContent = '提交中...';
        // 返回true允许表单提交到服务器端
        return true;
    } else {
        // 验证不通过：保持按钮可用，恢复文本
        submitBtn.disabled = false;
        submitBtn.textContent = 'Submit';
        // 返回false阻止表单提交
        return false;
    }
}

3. （可选）结合ASP.NET验证控件的情况 #

如果你还用到了ASP.NET的验证控件（比如RegularExpressionValidator）且指定了ValidationGroup="S"，那需要先验证整个组的状态，再判断邮箱输入：

function myFunction2() {
    // 先验证指定的ValidationGroup
    const isGroupValid = Page_ClientValidate('S');
    const emailInput = document.getElementById('<%= TextBox2.ClientID %>');
    const submitBtn = document.getElementById('<%= Button1.ClientID %>');

    if (isGroupValid && emailInput.checkValidity()) {
        submitBtn.disabled = true;
        submitBtn.textContent = '提交中...';
        return true;
    } else {
        submitBtn.disabled = false;
        submitBtn.textContent = 'Submit';
        return false;
    }
}

关键注意点 #

• 必须用<%= Control.ClientID %>获取控件的客户端ID，因为ASP.NET在WebForms中会根据命名容器生成带前缀的ID，直接用服务器端ID会找不到元素。
• 禁用按钮后修改文本（比如改成“提交中...”）能提升用户体验，让用户知道操作正在进行。
• 如果你的表单有其他验证逻辑，记得把它们加入到判断条件中，确保所有验证都通过后再禁用按钮。

内容的提问来源于stack exchange，提问作者Sherif El Sherif