Question

我正在使用HTML 5验证，并且在几个字段中我正在验证模式。是否有可能找到验证错误的类型是例如所需的错误还是未能匹配模式等？这是我的代码：

    <html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Contact</title>
</head>
    <body>
        @using (Html.BeginForm())
        {
            <div>
                <p>
                    @Html.LabelFor(model => model.Name)<br />
                    @Html.TextBoxFor(model => model.Name, new {@type = "text", @placeholder = "Enter a name", @required="true"})
                    @Html.ValidationMessageFor(model => model.Name)
                </p>

                <p>
                    @Html.LabelFor(model => model.EmailAddress)<br />
                    @Html.TextBoxFor(model => model.EmailAddress, new {@type = "text", @placeholder = "Enter an email address", @required="true", @pattern=@"^([a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)$" })
                    @Html.ValidationMessageFor(model => model.EmailAddress)
                </p>

                <p>
                    @Html.LabelFor(model => model.PhoneNumber)<br />
                    @Html.TextBoxFor(model => model.PhoneNumber, new {@type = "text", @placeholder = "Enter a Phone Number", @required="true", @pattern=@"^[\+\d\(]{1}[\d\(]{1}[\d\-\(\) ]{3,19}$"})
                    @Html.ValidationMessageFor(model => model.PhoneNumber)
                </p>

                <p>
                    @Html.LabelFor(model => model.Details)<br />
                    @Html.TextAreaFor(model => model.Details, new {@type = "text", @placeholder = "Enter Details", @id = "Details", @required="true"})
                    @Html.ValidationMessageFor(model => model.Details)
                </p>
                <input type="submit" value="Submit" style="font-size:11px;font-family:Verdana;font-weight:bold;" />
            </div>
        }  
    </body>

    <script type="text/javascript">

        $(document).ready(function () {

            var elementsInput = document.getElementsByTagName("input");
            var elementsTextArea = document.getElementsByTagName("textarea");

            for (var i = 0; i < elementsInput.length; i++) {
                elementsInput[i].oninvalid = function (e) {
                    e.target.setCustomValidity("");
                    if (!e.target.validity.valid) {
                        switch (e.target.name) {
                            case "Name":
                                if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                    e.target.setCustomValidity("Anna nimesi");
                                } else {
                                    e.target.setCustomValidity("Please enter a Name");
                                }
                                break;
                            case "EmailAddress":
                                if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                    e.target.setCustomValidity("Anna sähköpostiosoitteesi");
                                } else {
                                    e.target.setCustomValidity("Please enter an Email Address");
                                }
                                break;
                            case "PhoneNumber":
                                if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                        e.target.setCustomValidity("Anna puhelinnumerosi");
                                    } else {
                                        e.target.setCustomValidity("Please enter a Phone Number");
                                    }
                                    break;
                            }
                        }
                };
                    elementsInput[i].oninput = function (e) {
                        e.target.setCustomValidity("");
                    };
                }

            for (var j = 0; j < elementsTextArea.length; j++) {
                elementsTextArea[j].oninvalid = function (e) {
                    e.target.setCustomValidity("");
                    if (!e.target.validity.valid) {
                        switch (e.target.name) {
                            case "Details":
                                if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                    e.target.setCustomValidity("Täytäthän yksityiskohdat");
                                } else {
                                    e.target.setCustomValidity("Please enter Details");
                                }
                                break;
                        }
                    }
                };
                elementsTextArea[j].oninput = function (e) {
                    e.target.setCustomValidity("");
                };
            }
        });

    </script>

</html>

Answer 1

使用element.validity.valueMissing和element.validity.patternMismatch（http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-）计算出来。 forms.html＃的约束验证-API）

如何找到验证错误的类型

1 个答案: