前言

今天來介紹表單驗證該怎麼做，透過 Blazor 內建表單元件，來做到對欄位的驗證

內建的驗證屬性

在 C# 內的 System.ComponentModel.DataAnnotations 命名空間有微軟提供的驗證屬性，這邊介紹幾個比較常用的屬性

  • [Requeird] 指定欄位為必填，不可以為 Null
  • [StringLength] 用來驗證字串的長度上限
  • [EmailAddress] 檢驗 email 格式
  • [RegularExpression] 支援正規表達式，會將欄位的內容與表達式做比對
  • [Range] 檢查欄位的值，是不是在指定的範圍內

如果在 DataAnnotations 找不到想要的可以自己實作驗證的 Attribute 自訂驗證 Attribute 要繼承 ValidationAttribute 並且覆寫 IsVaiid 方法，例如我要做一個規定欄位只能是偶數的寫起來像這樣

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

public class EvenOnlyAttribute : ValidationAttribute
{
    public EvenOnlyAttribute(int value)
    {
        Value = value;
    }
    public int Value { get; }
    protected override ValidationResult? IsValid(object? value, ValidationContext validationContext)
    {
        return (int)value! % 2 == 0 ? new ValidationResult("數值不是偶數") : ValidationResult.Success;
    }
}

然後再想要套用資料檢核的欄位使用就可以了

1
2

[EvenOnly]
public int Value {get;set;}

繫結表單

處理完有什麼欄位需要驗證後，接下來看到與 HTML 表單該怎麼做繫結，這部分來實作一個簡單的登入表單

  1. 建立資料類別
1
2
3
4
5
6
7
8
9

class LoginModel
{
    [Required (ErrorMessage = "使用者名稱為必填")]
    public string Username { get; set; }

    [Required(ErrorMessage = "密碼為必填")]
    [RegularExpression(@"^(?=.*\d)(?=.*[a-zA-Z])(?=.*\W).{6,30}$",ErrorMessage = "須為複雜密碼")]
    public string Password { get; set; }
}
  1. 完成 razor 元件
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

@page "/Login"
@using System.ComponentModel.DataAnnotations

<EditForm Model="@loginModel" OnValidSubmit="@HandleValidSubmit" class="form-signin w-100 m-auto">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div class="form-floating">
        <InputText @bind-Value="loginModel.Username" class="form-control" id="username" />
        <label for="username">使用者名稱</label>
    </div>
    <div class="form-floating">
        <InputText type="password" @bind-Value="loginModel.Password" class="form-control" id="password" />
        <label for="password">密碼</label>
    </div>
    <button type="submit" class="w-100 btn btn-lg btn-primary">登入</button>
</EditForm>

<style>
    .form-signin {
        max-width: 330px;
        padding: 15px;
    }
</style>
@code {

    private LoginModel loginModel = new();

    private void HandleValidSubmit()
    {

    }

    class LoginModel
    {
        [Required (ErrorMessage = "使用者名稱為必填")]
        public string Username { get; set; }

        [Required(ErrorMessage = "密碼為必填")]
        [RegularExpression(@"^(?=.*\d)(?=.*[a-zA-Z])(?=.*\W).{6,30}$",ErrorMessage = "須為複雜密碼")]
        public string Password { get; set; }
    }

}
  1. 結果 欄位都不填寫送出

都有填寫但是密碼欄位未符合規格

表單送出事件

表單送出時有三個 Callback 供使用

  • OnValidSubmit 表單驗證通過時執行
  • OnInvalidSubmit 表單驗證未通過時執行
  • OnSubmit 直接送出，可以透過 EditContext.Validate 來得知表單是否驗證通過

小結

到這邊基本的表單使用介紹的差不多了，今天認識了預設的元件 EditForm，明天介紹其他適用於表單的內建元件