Blazor cung cấp các công cụ đơn giản có thể thực hiện xác thực (validation) với tối thiểu mã tùy chỉnh. Trong bài này, bạn sẽ học cách chú thích các model để Blazor biết dữ liệu nào được mong đợi và cách định cấu hình biểu mẫu để xác thực và phản hồi dữ liệu người dùng một cách chính xác.
Validate đầu vào của người dùng trong các Blazor form
Đây là một biểu mẫu ví dụ trong đó người dùng đã gửi dữ liệu không hợp lệ. Trong trường hợp này, có các thông báo xác thực ở cuối biểu mẫu và các trường không hợp lệ được đánh dấu màu đỏ. Bạn sẽ xây dựng biểu mẫu này trong bài tập tiếp theo:
Bạn nên làm cho các thông báo xác thực hữu ích nhất có thể. Không thừa nhận bất kỳ kiến thức nào từ người dùng: Ví dụ: không phải ai cũng biết định dạng của một địa chỉ email hợp lệ.
Khi bạn sử dụng EditForm component trong Blazor, bạn có sẵn các tùy chọn xác thực linh hoạt mà không cần viết mã phức tạp:
- Trong model của mình, bạn có thể sử dụng chú thích dữ liệu (data annotations) đối với từng thuộc tính để cho Blazor biết khi nào các giá trị được yêu cầu và định dạng chúng nên ở định dạng nào.
- Trong thành phần EditForm của bạn, hãy thêm DataAnnotationsValidator component , component này sẽ kiểm tra các chú thích của mô hình so với các giá trị đã nhập của người dùng.
- Sử dụng ValidationSummary component khi bạn muốn hiển thị bản tóm tắt của tất cả các thông báo xác thực trong một biểu mẫu đã gửi.
- Sử dụng ValidationMessage component khi bạn muốn hiển thị thông báo xác thực cho một model property cụ thể.
Chuẩn bị các model cho validation
Bắt đầu bằng cách cho DataAnnotationsValidator component biết dữ liệu hợp lệ trông như thế nào. Bạn khai báo các hạn chế xác thực bằng cách sử dụng các thuộc tính chú thích (annotation attributes) trong mô hình dữ liệu của mình. Hãy xem xét ví dụ này:
using System.ComponentModel.DataAnnotations;
public class Pizza
{
public int Id { get; set; }
[Required]
public string Name { get; set; }
public string Description { get; set; }
[EmailAddress]
public string ChefEmail { get; set;}
[Required]
[Range(10.00, 25.00)]
public decimal Price { get; set; }
}
Chúng tôi sẽ sử dụng model này trong một biểu mẫu cho phép nhân viên của Blazing Pizza thêm các loại pizza mới vào thực đơn. Nó bao gồm thuộc tính [Required] để đảm bảo rằng các giá trị Name và Price luôn được hoàn thành. Nó cũng sử dụng thuộc tính [Range] để kiểm tra xem giá đã nhập có nằm trong phạm vi hợp lý cho một chiếc bánh pizza hay không. Cuối cùng, nó sử dụng thuộc tính [EmailAddress] để kiểm tra giá trị ChefEmail đã nhập có phải là địa chỉ email hợp lệ hay không.
các annotations có thể thêm vào trong model:
[ValidationNever]. sử dụng annotation khi bạn muốn đảm bảo rằng trường không bao giờ được đưa vào xác thực.[CreditCard]. Sử dụng chú thích này khi bạn muốn ghi lại số thẻ tín dụng hợp lệ từ người dùng..[Compare]. Sử dụng chú thích này khi bạn muốn đảm bảo rằng hai thuộc tính trong model khớp với nhau..[Phone]. Sử dụng chú thích này khi bạn muốn ghi lại một số điện thoại hợp lệ từ người dùng.[RegularExpression]. Sử dụng chú thích này để kiểm tra định dạng của một giá trị bằng cách so sánh nó với một regular expressions..[StringLength]. Sử dụng chú thích này để kiểm tra xem độ dài của giá trị chuỗi không vượt quá độ dài tối đa.[Url]. Sử dụng chú thích này khi bạn muốn ghi lại một URL hợp lệ từ người dùng.
regular expressions được sử dụng rộng rãi để so sánh các chuỗi với các mẫu và cũng để sửa đổi các chuỗi. Bạn có thể sử dụng chúng để xác định các định dạng tùy chỉnh mà các giá trị biểu mẫu phải tuân theo. Để tìm hiểu thêm về regular expressions trong .NET, hãy xem .NET regular expressions
Thêm validation components vào form
để định cấu hình form của bạn để sử dụng xác thực chú thích dữ liệu (data annotation validation), trước tiên hãy đảm bảo rằng bạn đã ràng buộc (bound) điều khiển đầu vào với các thuộc tính của mô hình. Sau đó, thêm DataAnnotationsValidator component vào đâu đó trong EditForm component . Để hiển thị các thông báo xác thực tạo ra, hãy sử dụng ValidationSummary component , component này hiển thị tất cả các thông báo xác thực cho tất cả các điều khiển trong form. Nếu bạn muốn hiển thị thông báo xác thực bên cạnh mỗi control, hãy sử dụng nhiều ValidationMessage component . Hãy nhớ ràng buộc mỗi ValidationMessage control với một thuộc tính cụ thể của model, bằng cách sử dụng For attribute:
@page "/admin/createpizza"
<h1>Add a new pizza</h1>
<EditForm Model="@pizza">
<DataAnnotationsValidator />
<ValidationSummary />
<InputText id="name" @bind-Value="pizza.Name" />
<ValidationMessage For="@(() => pizza.Name)" />
<InputText id="description" @bind-Value="pizza.Description" />
<InputText id="chefemail" @bind-Value="pizza.ChefEmail" />
<ValidationMessage For="@(() => pizza.ChefEmail)" />
<InputText id="price" @bind-Value="pizza.Price" />
<ValidationMessage For="@(() => pizza.Price)" />
</EditForm>
@code {
private Pizza pizza = new();
}
Kiểm form validation của ứng dụng
Blazor thực hiện xác thực vào hai thời điểm khác nhau:
- Field validation được thực thi khi người dùng tabs ra khỏi trường. Xác thực trường đảm bảo rằng người dùng nhận thức được vấn đề xác thực trong thời gian sớm nhất có thể.
- Model validation được thực thi khi người dùng gửi form. Xác thực mô hình đảm bảo rằng dữ liệu không hợp lệ sẽ không được lưu trữ.
Nếu một form không xác thực được, thông báo sẽ được hiển thị trong các ValidationSummary và ValidationMessage components. Để tùy chỉnh các thông báo này, bạn có thể thêm thuộc tính ErrorMessage vào chú thích dữ liệu ( data annotation) cho từng trường trong model:
public class Pizza
{
public int Id { get; set; }
[Required(ErrorMessage = "You must set a name for your pizza.")]
public string Name { get; set; }
public string Description { get; set; }
[EmailAddress(ErrorMessage = "You must set a valid email address for the chef responsible for the pizza recipe.")]
public string ChefEmail { get; set;}
[Required]
[Range(10.00, 25.00, ErrorMessage = "You must set a price between $10 and $25.")]
public decimal Price { get; set; }
}
Các built-in validation attributes (các thuộc tính xác thực tích hợp sẵn) rất linh hoạt và bạn có thể sử dụng regular expressions để kiểm tra nhiều loại pattern văn bản. Tuy nhiên, nếu bạn có các yêu cầu cụ thể hoặc bất thường để xác thực, bạn có thể không thể đáp ứng chúng một cách chính xác với các built-in attributes. Trong những trường hợp này, bạn có thể tạo thuộc tính xác thực tùy chỉnh. Bắt đầu bằng cách tạo một lớp kế thừa từ lớp ValidationAttribute và ghi đè phương thức IsValid:
public class PizzaBase : ValidationAttribute
{
public string GetErrorMessage() => $"Sorry, that's not a valid pizza base.";
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
if (value != "Tomato" || value != "Pesto")
{
return new ValidationResult(GetErrorMessage());
}
return ValidationResult.Success;
}
}
Bây giờ, bạn có thể sử dụng validation attribute tùy chỉnh của mình như là khi bạn sử dụng các thuộc tính tích hợp sẵn (built-in attributes ) trong lớp modal:
public class Pizza
{
public int Id { get; set; }
[Required(ErrorMessage = "You must set a name for your pizza.")]
public string Name { get; set; }
public string Description { get; set; }
[EmailAddress(ErrorMessage = "You must set a valid email address for the chef responsible for the pizza recipe.")]
public string ChefEmail { get; set;}
[Required]
[Range(10.00, 25.00, ErrorMessage = "You must set a price between $10 and $25.")]
public decimal Price { get; set; }
[PizzaBase]
public string Base { get; set; }
}
Xử lý form validations ở phía server khi form submission
Khi bạn sử dụng EditForm component, ba sự kiện có sẵn để phản hồi form submission:
- OnSubmit. Sự kiện này kích hoạt bất cứ khi nào người dùng submits form, bất kể kết quả xác thực.
- OnValidSubmit. Sự kiện này kích hoạt khi người dùng submits form và thông tin đầu vào của họ được xác thực.
- OnInvalidSubmit. Sự kiện này xảy ra khi người dùng submits form và thông tin đầu vào của họ không được xác thực.
Nếu bạn sử dụng OnSubmit, hai sự kiện còn lại sẽ không kích hoạt. Thay vào đó, bạn có thể sử dụng tham số EditContext để kiểm tra xem có xử lý dữ liệu đầu vào hay không. Sử dụng sự kiện này khi bạn muốn viết logic của riêng mình để xử lý việc submits form :
@page "/admin/createpizza"
<h1>Add a new pizza</a>
<EditForm Model="@pizza" OnSubmit=@HandleSubmission>
<DataAnnotationsValidator />
<ValidationSummary />
<InputText id="name" @bind-Value="pizza.Name" />
<ValidationMessage For="@(() => pizza.Name)" />
<InputText id="description" @bind-Value="pizza.Description" />
<InputText id="chefemail" @bind-Value="pizza.ChefEmail" />
<ValidationMessage For="@(() => pizza.ChefEMail)" />
<InputText id="price" @bind-Value="pizza.Price" />
<ValidationMessage For="@(() => pizza.Price" />
</EditForm>
@code {
private Pizza pizza = new();
void HandleSubmission(EditContext context)
{
bool dataIsValid = context.Validate();
if (dataIsValid)
{
// Store valid data here
}
}
}
Nếu bạn sử dụng OnValidSubmit và OnInvalidSubmit thay thế, bạn không phải kiểm tra trạng thái xác thực, trong mỗi trình xử lý sự kiện:
@page "/admin/createpizza"
<h1>Add a new pizza</a>
<EditForm Model="@pizza" OnValidSubmit=@ProcessInputData OnInvalidSubmit=@ShowFeedback>
<DataAnnotationsValidator />
<ValidationSummary />
<InputText id="name" @bind-Value="pizza.Name" />
<ValidationMessage For="@(() => pizza.Name)" />
<InputText id="description" @bind-Value="pizza.Description" />
<InputText id="chefemail" @bind-Value="pizza.ChefEmail" />
<ValidationMessage For="@(() => pizza.ChefEMail)" />
<InputText id="price" @bind-Value="pizza.Price" />
<ValidationMessage For="@(() => pizza.Price" />
</EditForm>
@code {
private Pizza pizza = new();
void ProcessInputData (EditContext context)
{
// Store valid data here
}
void ShowFeedback(EditContext context)
{
// Take action here to help the user correct the issues
}
}
theo: https://docs.microsoft.com/en-us/learn/modules/blazor-improve-how-forms-work/6-validate-user-input-implicitly