Question

我正在尝试使用ASP.net实现表单验证，我尝试了所有建议的解决方案here，但最好的解决方案是aspsnippets.com到目前为止。

我的代码如下：

<asp:TextBox ID="tTitle" runat="server" onblur="WebForm_OnBlur()"/>
<asp:RequiredFieldValidator runat="server" ControlToValidate="tTitle"/>

<asp:TextBox ID="tEMail" runat="server" onblur="WebForm_OnBlur()"/>
<asp:RequiredFieldValidator runat="server" ControlToValidate="tEMail"/>
<asp:RegularExpressionValidator runat="server" ControlToValidate="tEMail"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"/>

<asp:LinkButton ID="btnSubmit" runat="server" Text="Submit"/>

的Javascript

<script type="text/javascript">
function WebForm_OnSubmit() {
    if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false)
    {
        for (var i in Page_Validators) {
            try {
                var control =
                document.getElementById(Page_Validators[i].controltovalidate);
                if (!Page_Validators[i].isvalid) {
                    control.className = "error";
                } else {
                    control.className = "";
                }
            } catch (e) { }
        } return false;
    } return true;
}
function WebForm_OnBlur() {
    for (var i in Page_Validators) {
        try {
            var control =
            document.getElementById(Page_Validators[i].controltovalidate);
            if (!Page_Validators[i].isvalid) {
                control.className = "error";
            } else {
                control.className = "";
            }
        } catch (e) { }
    } return false;
}
</script>

问题是电子邮件字段仅验证正则表达式。如果我更改验证器的顺序，它只验证所需的表达式。

可能的问题是代码循环遍历所有验证器，但不会比较同时引用同一控件的验证器。这导致仅在控件上应用最后一个验证器条件。

Answer 1

可能的问题是代码循环遍历所有验证器，但不会比较同时引用同一控件的验证器。这导致仅在控件上应用最后一个验证器条件。

是的，这确实是问题所在。要解决此问题，您可以执行以下操作：

在WebForm_OnBlur函数中，遍历与失去焦点的控件关联的验证器（而不是页面上的所有验证器），并且仅当所有验证器都有效时才清除className属性：

function WebForm_OnBlur(control) {
    for (var i = 0; i < control.Validators.length; i++) {
        if (!control.Validators[i].isvalid) {
            control.className = "error";
            return;
        }
    }
    control.className = "";
}

在onblur控件的TextBox属性中，将this作为参数传递给WebForm_OnBlur：

<asp:TextBox ID="tTitle" runat="server" onblur="WebForm_OnBlur(this)"/>
<asp:TextBox ID="tEMail" runat="server" onblur="WebForm_OnBlur(this)"/>

在WebForm_OnSubmit函数中，为每个具有相关验证程序的控件调用WebForm_OnBlur：

function WebForm_OnSubmit() {
    if (typeof(ValidatorOnSubmit) === "function" && ValidatorOnSubmit() === false) {
        for (var i = 0; i < Page_Validators.length; i++) {
            var control = document.getElementById(Page_Validators[i].controltovalidate);
            if (Page_Validators[i] === control.Validators[0]) // minor optimization
                WebForm_OnBlur(control);
        }
        return false;
    }
    return true;
}

Answer 2

除了@MichaelLiu之外，你可以创建自己的验证器，继承自CustomValidator类，并改变验证器的渲染，使它们更容易使用。

例如：

Validators.cs

注意我们如何添加CssControlErrorClass的属性。我们将在应用具有无效输入的类时使用它。

我们还设置了其他属性，因此您不必每次都设置它们ClientValidationFunction和ValidateEmptyText。

public class RequiredFieldValidator : CustomValidator
{
    public string CssControlErrorClass { get; set; }

    public RequiredFieldValidator()
    {
        ClientValidationFunction = "validators.required";
        ValidateEmptyText = true;
    }

    public string InitialValue
    {
        get
        {
            object o = ViewState["InitialValue"];
            return ((o == null) ? String.Empty : (string)o);
        }
        set
        {
            ViewState["InitialValue"] = value;
        }
    }

    protected override void Render(HtmlTextWriter writer)
    {
        //Have to add attributes BEFORE the beginning tag is written to the stream
        writer.AddAttribute("data-errorClass", CssControlErrorClass);
        writer.AddAttribute("data-for", GetControlRenderID(ControlToValidate));

        base.Render(writer);
    }



    protected override bool EvaluateIsValid()
    {
        //Default implementation of the RequiredFieldValidation validator
        string controlValue = GetControlValidationValue(ControlToValidate);

        if (controlValue == null)
        {
            return true;
        }

        var result = (!controlValue.Trim().Equals(InitialValue.Trim()));

        //Check to see if validation failed, if it did, add the class to the control to validate
        if (!result)
        {
            var control = (WebControl) NamingContainer.FindControl(ControlToValidate);

            //Didn't look into it too much, but the validators fire twice for some reason
            if(!control.CssClass.Contains(CssControlErrorClass)) control.CssClass += " " + CssControlErrorClass;
        }

        return result;
    }
}


public class RegularExpressionValidator : CustomValidator
{
    public string CssControlErrorClass { get; set; }

    public string ValidationExpression
    {
        get
        {
            object o = ViewState["ValidationExpression"];
            return ((o == null) ? String.Empty : (string)o);
        }
        set
        {
            try
            {
                Regex.IsMatch(String.Empty, value);
            }
            catch (Exception e)
            {
                throw new HttpException(string.Format("{0} - {1}", "Validator_bad_regex", value), e);
            }
            ViewState["ValidationExpression"] = value;
        }
    }

    public RegularExpressionValidator()
    {
        ClientValidationFunction = "validators.regex";
    }

    protected override void Render(HtmlTextWriter writer)
    {
        //Have to add attributes BEFORE the beginning tag is written to the stream
        writer.AddAttribute("data-errorClass", CssControlErrorClass);
        writer.AddAttribute("data-regex", ValidationExpression);
        writer.AddAttribute("data-for", GetControlRenderID(ControlToValidate));

        base.Render(writer);
    }

    protected override bool EvaluateIsValid()
    {
        //Default implementation of the RegularExpressionFieldvalidator
        string controlValue = GetControlValidationValue(ControlToValidate);
        if (controlValue == null || controlValue.Trim().Length == 0)
        {
            return true;
        }

        try
        {
            Match m = Regex.Match(controlValue, ValidationExpression);
            var result = (m.Success && m.Index == 0 && m.Length == controlValue.Length);

            //Check to see if validation failed, if it did, add the class to the control to validate
            if (!result)
            {
                var control = (WebControl) NamingContainer.FindControl(ControlToValidate);

                //Didn't look into it too much, but the validators fire twice for some reason
                if (!control.CssClass.Contains(CssControlErrorClass)) control.CssClass += " " + CssControlErrorClass;
            }
            return result;
        }
        catch
        {
            return true;
        }
    }
}

Validators.js

由于在之前的类中我们预先定义了javascript函数，我们可以像这样添加一个简单的脚本：

var v = window.validators = window.validators || {
    errorControlAttributeName: "data-for",
    errorClassAttributeName: "data-errorClass",
    regexAttributeName: "data-regex",

    required: function(src, args) {
        var controlId = src.getAttribute(v.errorControlAttributeName),
            errorClass = src.getAttribute(v.errorClassAttributeName),
            input = document.getElementById(controlId);

        var isValid = (args.Value !== "");

        v._toggleInputErrorState(input, errorClass, isValid);

        args.IsValid = isValid;
        return;
    },

    regex: function(src, args) {
        var controlId = src.getAttribute(v.errorControlAttributeName),
            errorClass = src.getAttribute(v.errorClassAttributeName),
            regexString = src.getAttribute(v.regexAttributeName),
            input = document.getElementById(controlId),
            regex = new RegExp(regexString);

        var isValid = regex.test(args.Value);

        v._toggleInputErrorState(input, errorClass, isValid);
        args.IsValid = isValid;
        return;
    },    

    /************* Helper functions ***********/

    _toggleInputErrorState: function (inputEl, errorClass, isValid) {
        if (!isValid) {
            if (!v._hasClass(inputEl, errorClass)) {
                inputEl.className += " " + errorClass;
            }
        } else {
            if (v._hasClass(inputEl, errorClass)) {
                //Not the most performant, but is sure is easiest
                inputEl.className = inputEl.className.replace(" " + errorClass, "");
            }
        }
    },

    _hasClass: function(el, className) {
        return el.className.indexOf(className) != -1 ? true : false;
    },
}

非常简单的验证库，您可以轻松扩展您真正感兴趣的内容。

Default.aspx的

之后，您可以将控件放入页面：

<Validators:RequiredFieldValidator runat="server" CssControlErrorClass="input-validation-error" ControlToValidate="Test" ErrorMessage="REQUIRED BRO!"></Validators:RequiredFieldValidator>
<Validators:RegularExpressionValidator runat="server" ValidationExpression="[0-9]" CssControlErrorClass="input-validation-error" ControlToValidate="Test" ErrorMessage="REQUIRED RegEx BRO!"></Validators:RegularExpressionValidator>

这是最好的方法吗？可能不是，（这两个使用微软提供的默认实现）有比我更聪明的人，而且我没有多少使用WebForms。我看到的最大好处是，您可以使用熟悉的语法获得一些可重用的代码，这些代码最终将包含您的所有验证需求，而不是每次都使用js来获取验证＆＃34;规则＆＃34;你怎么想要他们。

Answer 3

通过替换下面的代码段解决了该问题。要纠正我们必须遍历控件的所有验证器，然后我们应该决定是否必须标记错误类。在此之后，您的代码将按预期工作。

替换循环

 for (var i in Page_Validators) {
    try {
        var control =
        document.getElementById(Page_Validators[i].controltovalidate);
        if (!Page_Validators[i].isvalid) {
            control.className = "error";
        } else {
            control.className = "";
        }
    } catch (e) { }
}

使用以下代码

 for (var j in Page_Validators) {
        try {
            var control =
                        document.getElementById(Page_Validators[j].controltovalidate);
            var IsError = false;
            for (var i in control.Validators) {

                if (!control.Validators[i].isvalid) {
                    IsError = true;
                }
            }

            if (IsError)
                control.className = "error";
            else
                control.className = "";
        } catch (e) { }
    }

我刚刚运行它，这非常有效:)试试这个解决方案！

Answer 4

你可以在javascript中尝试Page_ClientValidate（），而不是在验证器上循环。我相信这将验证页面上的所有验证器。如果要验证由特定验证组绑定的特定控件，它还会使用“验证组名称”参数。

链接文本框控件的必填字段和正则表达式验证器的问题

4 个答案:

Validators.cs

Validators.js

Default.aspx的