
ValidateForm 表单组件
可供数据合规检查的表单组件
基础用法
放置到 ValidateForm
中的组件提交时自动进行数据合规检查
Demo
组件说明:
- 表单事件为
OnSubmit
OnValidSubmit
OnInvalidSubmit
- 当使用
OnSubmit
时其他两种不可以同时使用 - 本例中使用了
OnSubmit
回调委托无论客户端验证是否通过均显示结果 Model
参数为必填项不允许为空- 表单内可以放置多个按钮,通过设置
ButtonType="ButtonType.Submit"
参数是否提交表单 - 客户端验证机制支持模型的
Required
标签,通过设置ErrorMessage
参数设置提示信息,未设置时使用默认的英文提示信息
注意事项:
- 表单内组件通常用法都是使用双向绑定技术对
Model
的属性值进行双向绑定,当其值改变时会导致所在组件StateHasChanged
方法被调用,即其所在组件或者页面进行刷新重新渲染
内置组件
放置支持表单组件到 ValidateForm
中
Demo
示例说明
- 姓名为字符串类型
- 年龄为整数类型
- 生日为时间类型
- 教育为枚举类型
- 爱好为集合类型
Attributes
Loading...
Methods
Loading...
@page "/validateforms"
<h3>ValidateForm 表单组件</h3>
<h4>可供数据合规检查的表单组件</h4>
<Block Title="基础用法" Introduction="放置到 <code>ValidateForm</code> 中的组件提交时自动进行数据合规检查">
<p>组件说明:</p>
<ul class="ul-demo">
<li>表单事件为 <code>OnSubmit</code> <code>OnValidSubmit</code> <code>OnInvalidSubmit</code></li>
<li>当使用 <code>OnSubmit</code> 时其他两种不可以同时使用</li>
<li>本例中使用了 <code>OnSubmit</code> 回调委托无论客户端验证是否通过均显示结果</li>
<li><code>Model</code> 参数为必填项不允许为空</li>
<li>表单内可以放置多个按钮,通过设置 <code>ButtonType="ButtonType.Submit"</code> 参数是否提交表单</li>
<li>客户端验证机制支持模型的 <code>Required</code> 标签,通过设置 <code>ErrorMessage</code> 参数设置提示信息,未设置时使用默认的英文提示信息</li>
</ul>
<p>注意事项:</p>
<ul class="ul-demo">
<li>表单内组件通常用法都是使用双向绑定技术对 <code>Model</code> 的属性值进行双向绑定,当其值改变时会导致所在组件 <code>StateHasChanged</code> 方法被调用,即其所在组件或者页面进行刷新重新渲染</li>
</ul>
<div class="form-demo">
<ValidateForm class="form-inline" Model="@Model" OnInvalidSubmit="@OnInvalidSubmit1">
<div class="row">
<div class="form-group col-12">
<BootstrapInput @bind-Value="@Model.Name" />
</div>
<div class="form-group col-12">
<Button ButtonType="ButtonType.Submit" Text="提交表单" />
</div>
</div>
</ValidateForm>
<Logger @ref="Trace" />
</div>
</Block>
<Block Title="内置组件" Introduction="放置支持表单组件到 <code>ValidateForm</code> 中">
<div class="form-demo">
<label class="legend">支持表单验证的组件示例</label>
<p>示例说明</p>
<ul>
<li>姓名为字符串类型</li>
<li>年龄为整数类型</li>
<li>生日为时间类型</li>
<li>教育为枚举类型</li>
<li>爱好为集合类型</li>
</ul>
<ValidateForm class="form-inline" Model="@Model" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">
<div class="row">
<div class="form-group col-12 col-sm-6">
<BootstrapInput @bind-Value="@Model.Name" />
</div>
<div class="form-group col-12 col-sm-6">
<BootstrapInputNumber @bind-Value="@Model.Count" />
</div>
<div class="form-group col-12 col-sm-6">
<DateTimePicker @bind-Value="@Model.DateTime" />
</div>
<div class="form-group col-12 col-sm-6">
<Select Items="@Educations" @bind-Value="@Model.Education" />
</div>
<div class="form-group col-12">
<CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
</div>
<div class="form-group col-12">
<Button ButtonType="@ButtonType.Submit" Text="提交表单" />
</div>
</div>
</ValidateForm>
<Logger @ref="Trace2" class="mt-3" />
</div>
</Block>
<AttributeTable Items="@GetAttributes()" />
<MethodTable Items="@GetMethods()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.Extensions.Localization;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;
namespace BootstrapBlazor.Shared.Pages
{
/// <summary>
///
/// </summary>
public partial class ValidateForms
{
[NotNull]
private Logger? Trace { get; set; }
[NotNull]
private Logger? Trace2 { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<EnumEducation>? Localizer { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
private readonly Foo Model = new();
private IEnumerable<SelectedItem>? Educations { get; set; }
private IEnumerable<SelectedItem> Hobbys => Foo.GenerateHobbys(LocalizerFoo);
/// <summary>baise
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
// 初始化参数
Educations = typeof(EnumEducation).ToSelectList(new SelectedItem("", Localizer["PlaceHolder"] ?? "请选择 ..."));
}
private Task OnInvalidSubmit1(EditContext context)
{
Trace.Log("OnInvalidSubmit 回调委托");
return Task.CompletedTask;
}
private Task OnValidSubmit(EditContext context)
{
Trace2.Log("OnValidSubmit 回调委托");
return Task.CompletedTask;
}
private Task OnInvalidSubmit(EditContext context)
{
Trace2.Log("OnInvalidSubmit 回调委托");
return Task.CompletedTask;
}
#region 参数说明
private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Model",
Description = "表单组件绑定的数据模型,必填属性",
Type = "object",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "ChildContent",
Description = "子组件模板实例",
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "OnSubmit",
Description = "表单提交时的回调委托",
Type = "EventCallback<EditContext>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "OnValidSubmit",
Description = "表单提交时数据合规检查通过时的回调委托",
Type = "EventCallback<EditContext>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "OnInvalidSubmit",
Description = "表单提交时数据合规检查未通过时的回调委托",
Type = "EventCallback<EditContext>",
ValueList = " — ",
DefaultValue = " — "
}
};
/// <summary>
/// 获得事件方法
/// </summary>
/// <returns></returns>
private static IEnumerable<MethodItem> GetMethods() => new MethodItem[]
{
new MethodItem()
{
Name = "Validate",
Description="表单验证方法",
Parameters =" — ",
ReturnValue = "Task<bool>"
}
};
#endregion
}
}