Blazor学习记录_5.表单和验证_EditForm_EditContext

12.表单和验证

• 表单几件套——EditForm 组件

0. 验证特性标签或说注解

[Required]
命名空间 System.ComponentModel.DataAnnotations
其作用在模型类的属性前面。
还有其他：
[Required(ErrorMessage="名称不能为空")]
[StringLength(128)]

1. 绑定模型，从组件参数传入

Model="Instance"(一般是一个class对象)，并且需要在声明时即初始化，即任何时候不要让它为空。

2. 验证器子组件

<DataAnnotationsValidator />

3. 验证结果子组件

全部属性验证结果集合：<ValidationSummary />
单个属性验证结果：<ValidationMessage For="()=>Model.Name" />

4. EditForm表单组件提交事件

从组件参数传入： OnValidSubmit="Submit"
表单中按钮元素属性写:type="submit"
这样即实现让表单触发提交事件，而不再需要为按钮写@onclick="Submit"的按钮触发事件。
说明
OnSubmit 只要表单提交就触发
OnInvalidSubmit提交时验证失败时触发
OnvalidSubmit 提交时验证通过触发

完整示例代码：

@Page "/editform"
@using System.ComponentModel.DataAnnotations
<PageTitle>表单</PageTitle>
<H2>表单与验证<H2>

<EditForm Model="Model" OnValidSumit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div class="row mb-3">
        <label class="col-l col-form-lable">姓名</lable>
        <div class="col-11">
            <InputText @bind-Value="Model.Name" class="form-control" />
            <ValidationMessage For="()=>Model.Name">
        </div>
    </div>
    <div class="row mb-3">
        <label class="col-l col-form-lable">密码</lable>
        <div class="col-11">
            <InputText @bind-Value="Model.Password" class="form-control" />
            <ValidationMessage For="()=>Model.Password">
        </div>
    </div>
<div class="row">
    <div class="col-11" offset-1>
        <button class="btn btn-primary type="submit">提交</button>
    </div>
</div>
</EditForm>
@code
{
    class UserInfo
    {
        [Required(ErrorMessage="名子不能为空")]
        public string? Name{get;set;}
        [Required(ErrorMessage="密码不能为空")]
        public string? Password{get;set;}
    }
    UserInfo Model = new();
    bool _isSubmitted;
    Task Submit()
    {
        _isSubmitted = true;
    }
}

13.表单与验证进阶

1.EditForm组件的 EditContext 表单数据编辑上下文

保存与数据编辑过程相关的元数据，例如用于指示哪些字段已被修改以及当前验证消息集的标志。

• 一般以属性方式声明它，在组件构造函数或组件生命周期的初次加载阶段初始化它。有了它后，不应该再给组件提供 Model 参数，因为它的 Model 属性会替代组件Model参数的工作。
• 由于它自身被设计拥有丰富的属性和方法，方法如：获取验证结果集：GetValidationMessages() 执行验证：Validate() 获取与属性相关的字段标识:Field(string) 检查字段是否通过验证IsValid(string fieldName)

有了这个上下文，我们可以在EditForm表单组件外部执行提交、验证等过程。