validation - 来自 DTO 的数据注释未在视图中验证

问题描述

我正在使用带有样板框架的 .NET 核心，并且在客户端数据验证方面遇到了问题。据我了解，DTO 中使用的数据注释是经过服务器端验证的。我正在寻找一种在客户端执行此验证的方法，我想我可以通过在我的视图模型中创建该 DTO 的对象并使用视图模型验证来使用它，就像我习惯使用 .NET 一样核。

我正在尝试做的事情：

我正在尝试使用 DTO 中的数据注释在我的表单中进行数据验证。我的视图模型包含一个 DTO 对象作为属性并以它的形式使用它。似乎它进行了验证，因为在一切正确之前它不会提交，但是，除了对电子邮件输入的验证之外，它不会显示任何验证；而且我不确定为什么它会为电子邮件而不是别的什么。

这是我的看法

<form asp-action="AddEmergencyContactPost" method="post" id="addEmergencyContactForm" role="form">
<div class="row clearfix">
  <div class="col-sm-12">
    <div class="form-group form-float">
      <div class="form-line">
        <input asp-for="EmergencyContact.PhoneNumber" type="tel" class="validate form-control">
        <label asp-for="EmergencyContact.PhoneNumber" class="form-label"></label>
        <span asp-validation-for="EmergencyContact.PhoneNumber" class="text-danger"></span>
      </div>
    </div>
  </div>
</div>
</form>

这是我的 DTO 属性以及视图模型如何使用该对象

//DTO property
[Required]
[StringLength(10, MinimumLength = 10, ErrorMessage = "Invalid Phone Number")]
public string PhoneNumber { get; set; }

//View Model
public CreateEmergencyContactDto EmergencyContact { get; set; }

这是处理请求的javascript

$("#addEmergencyContactForm").on("submit",
        function (e) {
            e.preventDefault();
            debugger;
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (data) {
                    if (data.result === "success") {
                        swal({
                            title: "Emergency Contact Added",
                            icon: "success"
                        }).then(function () {
                            location.reload();
                        });

                    } else {
                        swal({
                            title: "Please Enter the Correct Type of Data",
                            icon: "warning"
                        }).then(function () {
                            location.reload();
                        });
                    }
                    _$modal.modal("toggle");
                }
            });
        });

到目前为止我尝试过的：

到目前为止，我已经尝试向“tel”的标签助手添加一个类型，并在模型状态无效时返回视图。我也尝试过使视图模型中的对象成为必需的，但这只会为所有字段设置必需的标签（并且由于某种原因一次只对一个字段进行验证）。下面是一个 gif，显示了电子邮件是如何验证的，但什么也没做。

我也尝试过使用 jquery validate，但是每当我测试表单是否有效时，无论如何它总是返回 true。我也尝试显式设置验证标志，但随后出现如下所示的错误

这是我用来添加显式验证的代码。

$(this).validate({
                rules: {
                    EmergencyContact.PhoneNumber: {
                        required: true,
                        minlength: 10,
                        phoneUS: true
                    }
                },
                messages: {
                    EmergencyContact.PhoneNumber{
                    required: "Please Enter A Phone Number",
                    phoneUS: "Please Enter A Valid Phone Number",
                    minLength: "Please Enter A Valid Phone Number"

                }
            }
        });

那么，有没有办法使用这些数据注释助手进行客户端验证？如果不是，对包含在我的索引中而不是部分的表单进行客户端验证的最简单方法是什么？提前感谢您提供的任何帮助。

编辑：这是我从样板文件中使用的启动模板

标签： validation.net-coreasp.net-core-mvcaspnetboilerplate

我对视图模型验证的理解有点偏离。我以为它会提供客户端验证，但它提供了服务器端验证。出现的验证来自浏览器验证。

对于客户端验证，我最终使用了parsley，它通过标签助手验证了我的数据。

对于服务器端验证，我使用了一些 Boilerplate 功能将错误作为 Json 抛出，然后使用Toastr显示错误。下面是一个例子。这将是我为保存表单而调用的控制器方法

if ()
{
    throw new UserFriendlyError("Message");
}

然后我会处理 ajax 调用中的错误

error: function(jqXHR){
    abp.notify.error(jqXHR.responseJSON.error.message);
}

我确信有更好的方法来做这些事情，但到目前为止，这是我发现最适合我的方法。

编辑：

正如@aaron 指出的那样，如果我要使用 abp.ajax，错误将自动显示。

validation - 来自 DTO 的数据注释未在视图中验证

问题描述

解决方案

推荐阅读