今天來介紹表單驗證該怎麼做,透過 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
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; }
}
|
- 完成 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; }
}
}
|
- 結果
欄位都不填寫送出
![](https://i.imgur.com/ohxbVe4.png)
都有填寫但是密碼欄位未符合規格
![](https://i.imgur.com/VzPUhVq.png)
表單送出事件#
表單送出時有三個 Callback 供使用
- OnValidSubmit
表單驗證通過時執行
- OnInvalidSubmit
表單驗證未通過時執行
- OnSubmit
直接送出,可以透過
EditContext.Validate
來得知表單是否驗證通過
到這邊基本的表單使用介紹的差不多了,今天認識了預設的元件 EditForm
,明天介紹其他適用於表單的內建元件