Blazor University (31) form - Validation

Link to the original text ：https://blazor-university.com/forms/validation/

verification

Source code ^[1]

DataAnnotationsValidator yes Blazor Standard validator types in . stay EditForm Adding this component to the component will enable based on System.ComponentModel.DataAnnotations.ValidationAttribute Of .NET Form validation for properties .

First , We will create a short example , Then we will learn what is happening behind the scenes . First , Create a model that we can edit , And decorate its properties with some data annotations for verification .

public class Person
{
  [Required]
  public string Name { get; set; }
  [Range(18, 80, ErrorMessage = "Age must be between 18 and 80.")]
  public int Age { get; set; }
}

• The first 3 Please specify Name Attribute cannot be null Or empty .

• The first 5 Behavior Age Property specifies a valid range of values （ from 18 To 80）, An appropriate error message is also provided to display to the user .

Add validation

By default Blazor Edit in application Index.razor page , And provide some tags to edit Person Example .

<EditForm [email protected]>
  <div class="form-group">
    <label for="Name">Name</label>
    <InputText @bind-Value=Person.Name class="form-control" id="Name" />
  </div>
  <div class="form-group">
    <label for="Age">Age</label>
    <InputNumber @bind-Value=Person.Age class="form-control" id="Age" />
  </div>
  <input type="submit" class="btn btn-primary" value="Save"/>
</EditForm>

@code {
  Person Person = new Person();
}

Running the application now will cause the user to be presented with a form that does not validate their input . To ensure that the form is validated , We must specify an authentication mechanism . stay EditForm Add a... In the component DataAnnotationsValidator Components .

<EditForm [email protected]>
  <DataAnnotationsValidator/>
  <div class="form-group">
    <label for="Name">Name</label>
    <InputText @bind-Value=Person.Name class="form-control" id="Name" />
  </div>
  <div class="form-group">
    <label for="Age">Age</label>
    <InputNumber @bind-Value=Person.Age class="form-control" id="Age" />
  </div>
  <input type="submit" class="btn btn-primary" value="Save"/>
</EditForm>

Run the application and click “ preservation ” Button will update the user interface , To provide a visual indication of errors in user input .

The validation error message is displayed

There are two ways to display authentication error messages to users . We can add a ValidationSummary To display a complete list of all errors in the form . We can also use ValidationMessage Component to display error messages for specific inputs on the form . These components are not mutually exclusive , So you can use them at the same time .

ValidationSummary Components can simply be placed in our markup EditForm in ; No additional parameters are required at all .

because ValidationMessage Component displays an error message for a single field , It requires us to specify the identification of the field . To ensure that our parameter values remain correct after refactoring （ for example , When we refactor Person Class ）Blazor We are required to specify an expression when identifying fields . be known as For Parameters in ValidationMessage As defined below ：

[Parameter]
public Expression<Func<T>> For { get; set; }

This means that we should use lambda Expression to specify the identification of the field , This expression can “ Double quotes ” Or wrapped in @(...)

• Double quotes

  <ValidationMessage For="() => Person.Name"/>

• Razor expression

  <ValidationMessage [email protected]( () => Person.Name )/>

The two forms are equivalent . The quoted form is easier to read , and razor Expressions make it clear to other developers that we are defining expressions rather than strings .

@page "/"
@using Models

<EditForm [email protected]>
  <DataAnnotationsValidator/>
  <ValidationSummary/>
  <div class="form-group">
    <label for="Name">Name</label>
    <InputText @bind-Value=Person.Name class="form-control" id="Name" />
    <ValidationMessage For="() => Person.Name"/>
  </div>
  <div class="form-group">
    <label for="Age">Age</label>
    <InputNumber @bind-Value=Person.Age class="form-control" id="Age" />
    <ValidationMessage [email protected](() => Person.Age) />
  </div>
  <input type="submit" class="btn btn-primary" value="Save"/>
</EditForm>

@code {
  Person Person = new Person();
}

Reference material

[1]

Source code : https://github.com/mrpmorris/blazor-university/tree/master/src/Forms/ValidatingUserInput