ASP.NET Core MVC頁面資料送出驗證

ASP.NET Core MVC使用資料注釋配合jquery.validate送出頁面進行前端加後端的資料驗證

2019/05/14,ASP.NET Core 2.2.0

摘要：ASP.NET Core MVC使用資料注釋配合jquery.validate送出頁面進行前端加後端的資料驗證

主要用到了jquery.validate（前端驗證）、資料注解（後端模型驗證）

建立模型類User，使用資料注釋

using System.ComponentModel.DataAnnotations;

namespace Demo.Models
{
    public class User
    {
        [Key]
        public int Id { get; set; }
        [Display(Name = "登入賬号")]
        [Required(ErrorMessage ="登入賬号必填")]
        [StringLength(15, ErrorMessage = "字元長度不能超過15個字")]
        public string LoginId { get; set; }
        public string PassWord { get; set; }
        public string Name { get; set; }
        [Range(minimum:1,maximum:100,ErrorMessage ="請輸入1到100的數字")]
        public int Age { get; set; }
    }
}      

代碼中部分資料注釋的作用效果如上圖所示，更多注釋可以使用百度，例如遠端驗證、郵箱位址、正規表達式等

前端form表單，使用TagHelpers

<form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="LoginId" class="control-label"></label>
                <input asp-for="LoginId" class="form-control" />
                <span asp-validation-for="LoginId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="PassWord" class="control-label"></label>
                <input asp-for="PassWord" class="form-control" />
                <span asp-validation-for="PassWord" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Age" class="control-label"></label>
                <input asp-for="Age" class="form-control" />
                <span asp-validation-for="Age" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>      

注意點：

1.aspnetcore用<form asp-action="Create">這種寫法，自動防範了請求僞造（csxf攻擊）

2.<span asp-validation-for="PassWord" class="text-danger"></span>這種區塊就是用于顯示驗證錯誤資訊的地方，錯誤資訊會自動加入到span标簽中

前端引入jquery.validate，注意使用之前要先引入jq

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>      

背景對應Create方法

[HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("Id,LoginId,PassWord,Name,Age")] User user)
        {
            if (string.IsNullOrWhiteSpace(user.Name))
            {
                //名稱需要填寫，此處是為了示範AddModelError方法，實際Name必填應使用Required注釋控制
                //ModelState.AddModelError("", "名稱需要填寫");
                ModelState.AddModelError(nameof(Models.User.Name), "名稱需要填寫");
                return View(nameof(Create));
            }

            if (ModelState.IsValid)
            {
                _context.Add(user);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(user);
        }      

使用ModelState.AddModelError(nameof(Models.User.Name), "名稱需要填寫");方法提示錯誤資訊，會把錯誤資訊給到對應span中

AddModelError第一個參數，如果是空字元串，則會把錯誤資訊給到<div asp-validation-summary="ModelOnly" class="text-danger"></div>中