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'的标签帮助程序中，如果Model State无效，则返回视图。我还尝试过使View模型中的对象成为必需对象，但是该对象仅为所有字段设置了必需的标签（由于某种原因，一次仅对一个字段进行该验证）。以下是显示电子邮件如何验证但无所作为的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"

                }
            }
        });

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

编辑：这是我正在使用的启动模板

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中的数据注释未在视图中验证

1 个答案: