ValidateForm 是 Bootstrap Blazor 中用于表单验证的组件。它基于 Blazor 的表单验证机制，结合 Bootstrap 的样式，提供了强大的表单验证功能。以下是 ValidateForm 的常见使用方法：
1. 基本用法
ValidateForm 包裹表单内容，并通过 EditContext 实现数据验证。
示例代码
@page "/validate-form-demo"
@using BootstrapBlazor.Components
@using System.ComponentModel.DataAnnotations
<ValidateForm Model="@person" OnValidSubmit="OnValidSubmit">
<div class="form-group">
<label>Name</label>
<InputText @bind-Value="person.Name" />
<ValidationMessage For="@(() => person.Name)" />
</div>
<div class="form-group">
<label>Age</label>
<InputNumber @bind-Value="person.Age" />
<ValidationMessage For="@(() => person.Age)" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</ValidateForm>
@code {
private Person person = new Person();
private void OnValidSubmit()
{
Console.WriteLine("Form submitted successfully!");
}
public class Person
{
[Required(ErrorMessage = "Name is required")]
public string Name { get; set; }
[Range(1, 120, ErrorMessage = "Age must be between 1 and 120")]
public int Age { get; set; }
}
}解释
-
ValidateForm：包裹表单内容，提供验证功能。 -
Model：绑定表单数据模型（person）。 -
OnValidSubmit：当表单验证通过时触发的事件。 -
ValidationMessage：显示验证错误信息。 -
数据注解：通过
[Required]和[Range]等数据注解定义验证规则。
2. 手动触发验证
可以通过 EditContext 手动触发表单验证。
示例代码
@page "/validate-form-demo"
@using BootstrapBlazor.Components
@using System.ComponentModel.DataAnnotations
<ValidateForm Model="@person" @ref="validateForm">
<div class="form-group">
<label>Name</label>
<InputText @bind-Value="person.Name" />
<ValidationMessage For="@(() => person.Name)" />
</div>
<button type="button" class="btn btn-primary" @onclick="ValidateFormManually">Validate</button>
</ValidateForm>
@code {
private ValidateForm validateForm;
private Person person = new Person();
private void ValidateFormManually()
{
if (validateForm.Validate())
{
Console.WriteLine("Form is valid!");
}
else
{
Console.WriteLine("Form is invalid!");
}
}
public class Person
{
[Required(ErrorMessage = "Name is required")]
public string Name { get; set; }
}
}解释
-
@ref="validateForm"：获取ValidateForm的引用。 -
validateForm.Validate()：手动触发表单验证，返回true表示验证通过，false表示验证失败。
3. 自定义验证逻辑
可以通过 Validator 组件实现自定义验证逻辑。
示例代码
@page "/validate-form-demo"
@using BootstrapBlazor.Components
@using System.ComponentModel.DataAnnotations
<ValidateForm Model="@person" OnValidSubmit="OnValidSubmit">
<div class="form-group">
<label>Email</label>
<InputText @bind-Value="person.Email" />
<ValidationMessage For="@(() => person.Email)" />
<Validator Context="context">
@if (!IsEmailValid(person.Email))
{
<ValidationMessage>Invalid email format</ValidationMessage>
}
</Validator>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</ValidateForm>
@code {
private Person person = new Person();
private void OnValidSubmit()
{
Console.WriteLine("Form submitted successfully!");
}
private bool IsEmailValid(string email)
{
return !string.IsNullOrEmpty(email) && email.Contains("@");
}
public class Person
{
public string Email { get; set; }
}
}解释
-
Validator：用于自定义验证逻辑。 -
IsEmailValid：自定义的验证方法，检查邮箱格式是否合法。
4. 禁用默认验证
可以通过 DisableAutoSubmitFormByEnter 禁用默认的 Enter 键提交行为。
示例代码
<ValidateForm Model="@person" DisableAutoSubmitFormByEnter="true">
<div class="form-group">
<label>Name</label>
<InputText @bind-Value="person.Name" />
<ValidationMessage For="@(() => person.Name)" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</ValidateForm>解释
-
DisableAutoSubmitFormByEnter：设置为true时，禁用 Enter 键自动提交表单。
5. 多表单验证
可以在一个页面上使用多个 ValidateForm，分别验证不同的表单。
示例代码
@page "/validate-form-demo"
@using BootstrapBlazor.Components
@using System.ComponentModel.DataAnnotations
<ValidateForm Model="@person1" OnValidSubmit="OnValidSubmit1">
<div class="form-group">
<label>Name</label>
<InputText @bind-Value="person1.Name" />
<ValidationMessage For="@(() => person1.Name)" />
</div>
<button type="submit" class="btn btn-primary">Submit Form 1</button>
</ValidateForm>
<ValidateForm Model="@person2" OnValidSubmit="OnValidSubmit2">
<div class="form-group">
<label>Email</label>
<InputText @bind-Value="person2.Email" />
<ValidationMessage For="@(() => person2.Email)" />
</div>
<button type="submit" class="btn btn-primary">Submit Form 2</button>
</ValidateForm>
@code {
private Person person1 = new Person();
private Person person2 = new Person();
private void OnValidSubmit1()
{
Console.WriteLine("Form 1 submitted successfully!");
}
private void OnValidSubmit2()
{
Console.WriteLine("Form 2 submitted successfully!");
}
public class Person
{
[Required(ErrorMessage = "Name is required")]
public string Name { get; set; }
[EmailAddress(ErrorMessage = "Invalid email format")]
public string Email { get; set; }
}
}解释
-
多个
ValidateForm可以独立验证和提交。
6. 动态表单验证
可以通过动态绑定模型实现动态表单验证。
示例代码
@page "/validate-form-demo"
@using BootstrapBlazor.Components
@using System.ComponentModel.DataAnnotations
<button @onclick="ChangeModel">Change Model</button>
<ValidateForm Model="@currentModel" OnValidSubmit="OnValidSubmit">
<div class="form-group">
<label>Name</label>
<InputText @bind-Value="currentModel.Name" />
<ValidationMessage For="@(() => currentModel.Name)" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</ValidateForm>
@code {
private Person person1 = new Person { Name = "Alice" };
private Person person2 = new Person { Name = "Bob" };
private Person currentModel;
protected override void OnInitialized()
{
currentModel = person1;
}
private void ChangeModel()
{
currentModel = currentModel == person1 ? person2 : person1;
}
private void OnValidSubmit()
{
Console.WriteLine("Form submitted successfully!");
}
public class Person
{
[Required(ErrorMessage = "Name is required")]
public string Name { get; set; }
}
}解释
-
通过动态切换
currentModel，实现动态表单验证。
总结
ValidateForm 是 Bootstrap Blazor 中非常强大的表单验证组件，支持：
-
基本表单验证
-
手动触发验证
-
自定义验证逻辑
-
多表单验证
-
动态表单验证