iT邦幫忙

2022 iThome 鐵人賽

DAY 20
1
Modern Web

我與 Blazor 的 30 天系列 第 20

ASP.NET Core Blazor 系列 - 020 表單驗證

  • 分享至 

  • xImage
  •  

前言

本篇文章同步發表於 個人部落格 Jim's Blog

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

內建的驗證屬性

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

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

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

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

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

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

繫結表單

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

  1. 建立資料類別
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 元件
@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,明天介紹其他適用於表單的內建元件


上一篇
ASP.NET Core Blazor 系列 - 019 相依性注入
下一篇
ASP.NET Core Blazor 系列 - 021 內建輸入元件(1)
系列文
我與 Blazor 的 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言