Blazor入手教程（七）表單

Blazor為表單元素定義了一些內建元件

除此之外還有EditForm元件搭配起來十分好用

EditForm 提供了一系列資料驗證的屬性/方法，這樣我們不用自己再去實現了。

模型驗證資料註解

驗證結果摘要ValidationSummary

Blazor提供的驗證能應對絕大多數場景，如果有特殊的場景，你也可以自定義實現一些驗證。

相關程式碼：

@page "/FormSample
 
"
@using System.ComponentModel.DataAnnotations;
<h3>表單</h3>
<p>@stu.ToString()</p>

<EditForm   Model="@stu"   OnValidSubmit="onValidSubmit"    OnInvalidSubmit="onInvalidSubmit">

    <DataAnnotationsValidator></DataAnnotationsValidator>
    <ValidationSummary></ValidationSummary>
     
    <div class
 
="form-inline">
        姓名：<InputText @bind-Value="stu.name"></InputText>
    </div>

    <div class="form-inline">
        年齡： 
    </div> 
    <div class="form-inline">
        生日：<InputDate @bind-Value="stu.birthday"></InputDate> 
    </div>

    <div class="form-inline">
        是否婚配：  <InputCheckbox @bind-Value="stu.ismarried"></InputCheckbox> 
    </div>

    <div class="form-inline">
        現居城市： 
        <InputSelect @bind-Value="stu.city"> 
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="廣州">廣州</option>
            <option value="深圳">深圳</option>
        </InputSelect> 
    </div> 

    <button type="submit">OK</button>

</EditForm> 


@code {
    
    public class student
    {

        [Required]
        [MaxLength(length:10, ErrorMessage ="名字最大長度不能超過10位")]
        public string name { get; set; } = "小爵";     //姓名

        [Range(18,45,ErrorMessage ="年齡必須在18-45歲之間")]
        public int age { get; set; } = 28; //年齡 

        public DateTime birthday { get; set; } = System.DateTime.Now;//生日



        public string city { get; set; } = "北京";  //所在城市


        public bool ismarried { get; set; } = false; //是否婚配

        public override string ToString()
        {

            return $"姓名：{name}，年齡：{age},生日：{birthday},城市：{city}，是否婚配：{ismarried}";

        }

    } 
    public student stu = new student() { };
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(stu);
    }

    public void onSubmit( )
    {
        Console.WriteLine("on onSubmit");

    }
    public void onValidSubmit( )
    {
        Console.WriteLine("on onValidSubmit");

    }
    public void onInvalidSubmit( )
    {
        Console.WriteLine(" onInvalidSubmit");

    }

}