如何使用客户端验证来处理 c# 中的 asp.net mvc？

Question

我使用 jQuery 进行客户端验证，以验证我的@EditorFor()控件何时有空白空间。 但是，当我过滤任何数据时，错误不会消失。

我还需要我的逻辑中的一些示例，因为当错误弹出时必须在中心显示图像，目前它在旁边。

// Model
     [Required]
        public int ZipCode { get; set; }
        public string Country { get; set; }

        [Required]
        public string Email { get; set; }

        [Required]
        public string CellNumber { get; set; }

// View

<div class="form-group row">
                                <label for="ZipCode" class="col-sm-2 col-form-label"></label>
                                <div class="col-sm-3">
                                    @Html.EditorFor(model => model.RegForm.ZipCode, new { htmlAttributes = new { @class = "form-control", autofocus = "autofocus", placeholder = "ZipCode", id = "textZipCode" } })
                                    @Html.ValidationMessageFor(model => model.RegForm.ZipCode, "", new { @class = "text-danger" })
                                </div>
                                <label id="labelMessage_zip" class="text-danger" style="display:none">This field is required</label>
                            </div>

                            <div class="form-group row">
                                <label for="Email" class="col-sm-2 col-form-label">Email:</label>

                                <div class="col-sm-4">
                                    @Html.EditorFor(model => model.RegForm.Email, new { htmlAttributes = new { @class = "form-control", autofocus = "autofocus", placeholder = "Email", id = "textEmail" } })
                                    @Html.ValidationMessageFor(model => model.RegForm.Email, "", new { @class = "text-danger" })
                                </div>
                                <label id="labelMessage_email" class="text-danger" style="display:none">This field is required</label>
                            </div>

                            <div class="form-group row">
                                <label for="Attendee" class="col-sm-2 col-form-label">Attendee Cell Number*</label>
                                <div class="col-sm-3">
                                    @Html.EditorFor(model => model.RegForm.CellNumber, new { htmlAttributes = new { @class = "form-control", autofocus = "autofocus", placeholder = "Cell Number", id ="textCellNumber" } })
                                    @Html.ValidationMessageFor(model => model.RegForm.CellNumber)
                                </div>
                                <label id="labelMessage_cell" class="text-danger" style="display:none">This field is required</label>
                            </div>

            <script type="text/javascript" src="~/Content/dist/js/jquery.validate.unobtrusive.min.js"></script>

            <!--Handling form-validation when empty-->
            <script type='text/javascript'>
                $(function () {
                    //When the blur event occurs from your Textbox (you lose focus)
                    $('#textEmail').blur(function () {
                        var email = document.getElementById("textEmail").value;
                        var expr = /[a-z0-9._%+-]+[a-z0-9.-]+\.[a-z]{2,}$/;
                        if (!expr.test(email)) {
                            document.getElementById("labelMessage_email").style.display = "inline";
                        }
                        else {
                            document.getElementById("labelMessage_email").style.display = "none";
                        }
                    });
                });

                // Error message for cell-phone.
                $(function () {
                    $('#textCellNumber').blur(function () {
                        var cell = document.getElementById("textCellNumber").value;
                        var expr = /[a-z0-9._%+-]+[a-z0-9.-]+\.[a-z]{2,}$/;
                        if (!expr.test(cell)) {
                            document.getElementById("labelMessage_cell").style.display = "inline";
                        } else {
                            document.getElementById("labelMessage_cell").style.display = "none";
                        }
                    });

                });


                // Error message for ZipCode.
                $(function () {
                    $('#textZipCode').blur(function () {
                        var zipcode = document.getElementById("textZipCode").value;
                        var expr = /[a-z0-9._%+-]+[a-z0-9.-]+\.[a-z]{2,}$/;
                        if (!expr.test(zipcode)) {
                            document.getElementById("labelMessage_zip").style.display = "inline";
                        } else {
                            document.getElementById("labelMessage_zip").style.display = "none";
                        }
                    });
                });
            </script>

Answer 1

使用这些库：

"~/Content/assets/js/jquery.validate.min.js"
"~/Content/assets/js/jquery.validate.unobtrusive.min.js"

并在您的 model 属性上方写入属性为：

[Required]
public string Email { get; set; }

为属性使用库： using System.ComponentModel.DataAnnotations