客户端验证后不会触发服务器验证

Question

我在这里不知所措。我经常看到相同的问题答案，但没有一个能帮我解决问题。

我有一个接受电子邮件作为输入的文本框。如果用户输入有效的电子邮件，那么我想启用一个按钮，引导他们进入下一步。

问题是我可以看到客户端验证函数被调用，但看不到服务器验证函数。实际上，在客户端函数完成后，我也没有看到 Page_Load 被调用。

这是代码。

HTML：

<asp:TextBox ID="txtScreenSingleSignOnEmailText" runat="server" CssClass="w-100 mb-5 text-input" type="email"></asp:TextBox>
<asp:CustomValidator runat="server" ID="CustomValidatorEmail" ErrorMessage="<%$Resources: PleaseSupplyValidEmailAddress %>" ValidationGroup="valgroupScreenSingleSignOn" ClientValidationFunction="checkvalidEmail" CssClass="error" ControlToValidate="txtScreenSingleSignOnEmailText"
  ValidateEmptyText="True" OnServerValidate="checkvalidEmail_ServerValidate" Display="Dynamic" />

<asp:Button runat="server" ID="btnCompatibleScreenSingleSignOnContinue" Text="<%$Resources: NDESConnect %>"
OnClick="BtnScreenSingleSignOnContinueClick" ValidationGroup="valgroupScreenSingleSignOn" CssClass="action-button" />

Js：

function checkvalidEmail(sender, e) {
    var isValid = true;
    isValid = (/[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})/g).test(e.Value.toLowerCase());
    if (isValid && (e.Value.indexOf('<') > -1 || e.Value.indexOf('>') > -1)) {
        isValid = false;
    }
    console.log({ isValid, value: e.Value, val: e.value });

    e.IsValid = isValid;
    return e;
}

CS：

protected void checkvalidEmail_ServerValidate(object sender, ServerValidateEventArgs e)
{
    Validate();
    try
    {
        var addr = new System.Net.Mail.MailAddress(e.Value.ToLower());
        e.IsValid = true;
        btnCompatibleScreenSingleSignOnContinue.Enabled = true;
    }
    catch(Exception exc)
    {
        e.IsValid = false;
        btnCompatibleScreenSingleSignOnContinue.Enabled = false;
    }

}

有什么建议吗？

Answer 1

要禁用客户端的按钮，请首先为按钮添加 clientidmode="static" 属性，以便其在客户端的 id 与服务器端相同：

<asp: Button runat="server" ID="btnCompatibleScreenSingleSignOnContinue" 
    clientidmode="static" 
    Text="<%$Resources: NDESConnect %>"
    OnClick="BtnScreenSingleSignOnContinueClick"
    ValidationGroup="valgroupScreenSingleSignOn" 
    CssClass="action-button" />

现在您可以在 checkvalidEmail 函数中禁用/启用它：

function checkvalidEmail(sender, e) {
    var isValid = true;
    isValid = (/[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})/g).test(e.Value.toLowerCase());
    if (isValid && (e.Value.indexOf('<') > -1 || e.Value.indexOf('>') > -1)) {
                isValid = false;
            }
    console.log({ isValid, value: e.Value, val: e.Value });
    e.IsValid = isValid;
    document.getelementbyid("btnCompatibleScreenSingleSignOnContinue").disabled = !isValid;
    return e;
}

此外，consol.log 行中的最后一个 e.value 应更正为 e.Value 。