Blazor學習記錄四_表單和驗證___

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;
    }
}