-1

我正在使用 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>
4

1 回答 1

0

想通了，使用 element.validity.valueMissing 和 element.validity.patternMismatch (http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html #the-constraint-validation-api)

于 2012-10-24T19:48:10.247 回答