表單驗證與數據綁定是前端開發中的重要部分，能確保用戶輸入的正確性並提升應用的可靠性。ASP.NET Core提供了靈活的數據綁定與驗證機制，讓我們能夠輕鬆處理表單數據。本篇將介紹如何實現前端表單驗證與數據綁定，並展示其應用技巧。

1. 表單驗證的基本概念
表單驗證的目的在於確保用戶提供的數據符合預期的格式和範圍。這可以通過客戶端和伺服器端兩種方式進行。客戶端驗證通常用於提升用戶體驗，能即時反饋用戶的輸入錯誤，避免不必要的伺服器請求。

2. ASP.NET Core中的數據綁定
在ASP.NET Core中，數據綁定允許我們將來自用戶界面的數據自動綁定到後端模型。這通常是在Razor頁面或MVC控制器中完成。

例如，假設我們有一個簡單的用戶註冊表單：

public class RegisterModel
{
    [Required(ErrorMessage = "用戶名是必需的")]
    public string Username { get; set; }

    [Required(ErrorMessage = "密碼是必需的")]
    [StringLength(100, ErrorMessage = "密碼長度必須在 6 到 100 之間", MinimumLength = 6)]
    public string Password { get; set; }
}

在上述模型中，我們使用了數據註解來定義驗證規則，這些規則將在數據綁定時自動應用。

3. 實現前端表單驗證
使用HTML5的驗證特性，可以在前端實現基本的表單驗證。以下是一個簡單的表單範例：

<form id="registerForm" method="post" asp-action="Register">
    <label for="username">用戶名:</label>
    <input type="text" id="username" name="Username" required />
    
    <label for="password">密碼:</label>
    <input type="password" id="password" name="Password" required minlength="6" />
    
    <button type="submit">註冊</button>
</form>

使用required和minlength屬性，我們可以讓瀏覽器在提交之前檢查這些條件。

4. 整合JavaScript進行客戶端驗證
為了提供更好的用戶體驗，我們可以使用JavaScript進行自定義的客戶端驗證。以下是一個範例，展示如何在用戶輸入時即時驗證用戶名的長度：

document.getElementById('username').addEventListener('input', function() {
    const username = this.value;
    if (username.length < 3) {
        this.setCustomValidity('用戶名至少需要 3 個字元');
    } else {
        this.setCustomValidity('');
    }
});

這段程式碼在用戶輸入時檢查用戶名的長度，並顯示相應的錯誤消息。

5. 客戶端和伺服器端驗證的協同
雖然客戶端驗證能提升用戶體驗，但重要的是仍然需要在伺服器端進行驗證，因為用戶可以繞過客戶端的檢查。當伺服器接收到表單數據時，應該再次執行驗證邏輯：

[HttpPost]
public IActionResult Register(RegisterModel model)
{
    if (ModelState.IsValid)
    {
        // 處理註冊邏輯
        return RedirectToAction("Index", "Home");
    }

    // 如果驗證失敗，返回原頁並顯示錯誤
    return View(model);
}

6. 小結
前端表單驗證和數據綁定是確保用戶數據正確性的關鍵要素。藉助ASP.NET Core的靈活性，我們可以很方便地將這些功能整合到應用中。這不僅提升了應用的用戶體驗，還加強了數據的可靠性。

在接下來的文章中，我們將繼續探討如何整合第三方服務與API，進一步擴展應用的功能性和彈性。敬請期待！