Validation Message Tag Helper trong ASP.NET Core

Nguồn: Tag Helpers in forms - The Validation Message Tag Helper

Validation Tag Helpers

Có hai Validation Tag Helper (Tag Helper Xác thực). Validation Message Tag Helper (Tag Helper Thông báo Xác thực) hiển thị thông báo xác thực cho một property đơn trong model, và Validation Summary Tag Helper (Tag Helper Tóm tắt Xác thực) hiển thị tóm tắt các lỗi xác thực. Input Tag Helper (Tag Helper Input) thêm các thuộc tính xác thực phía client HTML5 vào các phần tử input dựa trên các thuộc tính data annotation trong các class model của bạn. Xác thực cũng được thực hiện trên server (máy chủ). Validation Tag Helper hiển thị các thông báo lỗi này khi xảy ra lỗi xác thực.

Validation Message Tag Helper

Thêm thuộc tính HTML5 data-valmsg-for="property" vào phần tử span, gắn kết các thông báo lỗi xác thực với trường input của property model được chỉ định. Khi xảy ra lỗi xác thực phía client, jQuery hiển thị thông báo lỗi trong phần tử <span>.
Xác thực cũng diễn ra trên server. Phía client có thể tắt JavaScript và một số xác thực chỉ có thể thực hiện ở phía server.
HTML Helper thay thế: Html.ValidationMessageFor.

Validation Message Tag Helper được sử dụng với thuộc tính asp-validation-for trên phần tử HTML span.

cshtml

<span asp-validation-for="Email"></span>

Validation Message Tag Helper sẽ tạo ra HTML sau:

html

<span class="field-validation-valid"
  data-valmsg-for="Email"
  data-valmsg-replace="true"></span>

Thông thường bạn sử dụng Validation Message Tag Helper sau một Input Tag Helper cho cùng một property. Làm như vậy sẽ hiển thị bất kỳ thông báo lỗi xác thực nào gần input gây ra lỗi.

Lưu ý: Bạn phải có view với các tham chiếu script JavaScript và jQuery chính xác để xác thực phía client hoạt động. Để biết thêm thông tin, xem Model Validation.

Khi xảy ra lỗi xác thực phía server (ví dụ khi bạn có xác thực tùy chỉnh phía server hoặc xác thực phía client bị tắt), MVC đặt thông báo lỗi đó làm nội dung của phần tử <span>.

html

<span class="field-validation-error" data-valmsg-for="Email"
            data-valmsg-replace="true">
   The Email Address field is required.
</span>

Ví dụ đầy đủ

Trong ví dụ sau, data model (mô hình dữ liệu) có các thuộc tính DataAnnotation, tạo ra các thông báo lỗi xác thực trên phần tử <input>. Khi xảy ra lỗi xác thực, Validation Tag Helper hiển thị thông báo lỗi:

csharp

using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public class RegisterViewModel
    {
        [Required]
        [EmailAddress]
        [Display(Name = "Email Address")]
        public string Email { get; set; }

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }
    }
}

cshtml

@model RegisterViewModel

<form asp-controller="Demo" asp-action="RegisterValidation" method="post">
    <div asp-validation-summary="ModelOnly"></div>
    <label>Email: <input asp-for="Email" /></label> <br />
    <span asp-validation-for="Email"></span><br />
    <label>Password: <input asp-for="Password" /></label><br />
    <span asp-validation-for="Password"></span><br />
    <button type="submit">Register</button>
</form>

HTML được tạo ra (khi model hợp lệ):

html

<form action="/DemoReg/Register" method="post">
  <label>Email: <input name="Email" id="Email" type="email" value=""
   data-val-required="The Email field is required."
   data-val-email="The Email field is not a valid email address."
   data-val="true"></label><br>
  <span class="field-validation-valid" data-valmsg-replace="true"
   data-valmsg-for="Email"></span><br>
  <label>Password: <input name="Password" id="Password" type="password"
   data-val-required="The Password field is required." data-val="true"></label><br>
  <span class="field-validation-valid" data-valmsg-replace="true"
   data-valmsg-for="Password"></span><br>
  <button type="submit">Register</button>
  <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>">
</form>