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

Question

我将 .NET Core 与样板框架一起使用，但在客户端数据验证方面遇到了问题。据我了解，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 验证，但无论何时我测试表单是否有效，它总是 returns 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"

                }
            }
        });

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

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

Answer 1

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

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

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

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

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

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

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

编辑：

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

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

Data Annotations From DTO Not Validating In View

validation

asp.net-core-mvc

.net-core

aspnetboilerplate