如何同时要求和验证电子邮件地址？

Question

我正在尝试验证并要求来自文本框的电子邮件地址中的字段，但我无法使用 RequiredFieldValidator 和 RequiredExpressionValidator，因为它们不起作用。

我有一个脚本，如果用户没有在文本框中输入内容，它将要求用户输入一些文本，并且文本框会变红，如果用户在此之后输入文本，它将变绿.但问题是他变绿了，并且不显示我的电子邮件地址格式无效的消息。

ASP.NET：

 <FooterTemplate>
                                <asp:TextBox ID="txtbemail" runat="server"/>                     
                                 <asp:RegularExpressionValidator ID="regexEmailValid" runat="server" ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ControlToValidate="txtbemail">
                                 <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate = "txtbemail"
runat="server" ErrorMessage="*Necessário preencher"/>
                                     </asp:RegularExpressionValidator>

                                      <asp:LinkButton ID="LinkButton1" CommandName="AddNew" runat="server" CssClass="btn btn-large btn-info pull-right">
                                     <i class="glyphicon glyphicon-plus"></i> &nbsp; Adicionar
                                 </asp:LinkButton>
                            </FooterTemplate>

JavaScript :

 <script type="text/javascript">

    //Define o intervalo para verificar os validadores
    setInterval(function () { colorBorders() }, 100);

    function colorBorders() {
        if (typeof (Page_Validators) !== 'undefined') {

            //Faz um loop para verificar os validadores
            for (var i = 0; i < Page_Validators.length; i++) {
                var validator = Page_Validators[i];
                var control = document.getElementById(validator.controltovalidate);

                //Verifica se o controle existe
                if (control != null) {

                    // se o validador não for válido, coloque a borda vermelha, se for válida retornar à cor padrão
                    // elseif com a cor do rgb é necessário para impedir o desdobramento do cromo piscar
                    if (!validator.isvalid) {
                        control.style.borderColor = '#ff0000';
                    } else if (control.style.borderColor == "rgb(255, 0, 0)") {
                        control.style.borderColor = '#00ff00';
                    }
                }
            }
        }
    }
</script>

问题截图：

电子邮件中的文本框变为绿色，但这不应该是因为电子邮件格式无效。它应该变成红色。那么，如何同时要求和验证，并显示必填字段和无效格式的消息？

Answer 1

您可以切换到CustomValidator 并将ValidateEmptyText 设置为true。

<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="TextBox1"
    ClientValidationFunction="checkEmail" ValidateEmptyText="True" SetFocusOnError="true"></asp:CustomValidator>

<script type="text/javascript">
    function checkEmail(sender, element) {

        //these first 2 lines remove spaces and update the textbox
        var emailToCheck = element.Value.replace(/ /g, "");
        document.getElementById(sender.controltovalidate).value = emailToCheck;

        var filter = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        element.IsValid = filter.test(emailToCheck);
    }
</script>

Answer 2

您可以使用 ASP.NET 验证器来完成此操作。试试下面的代码 sn-p。我已经在我的一个项目中使用了它，它可以正常工作。希望对您有所帮助。

<asp:TextBox ID="txtbemail" runat="server" ValidationGroup="validation"/> 
<asp:RequiredFieldValidator ID="requiredEmail" ForeColor="#E00000"
    ControlToValidate = "txtbemail" ValidationGroup="validation"
    runat="server" ErrorMessage="Necessary field" Text="*"/>
<asp:RegularExpressionValidator ID="regexEmailValid" runat="server" ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ControlToValidate="txtbemail" ValidationGroup="validation" ErrorMessage="Invalid e-mail format">*</asp:RegularExpressionValidator>

 <asp:LinkButton ID="LinkButton1" CommandName="AddNew" runat="server" CssClass="btn btn-large btn-info pull-right" ValidationGroup="validation">
      <i class="glyphicon glyphicon-plus"></i> &nbsp; Adicionar
 </asp:LinkButton>

 <asp:ValidationSummary ID="ValidationSummary" runat="server" ForeColor="#E00000" ValidationGroup="validation" />