受欢迎的博客标签

ASP.NET CORE MVC AJAX FORM REQUESTS USING jquery.validate.unobtrusive.js

Published

用法同Asp.net MVC类似。实质上在UI层加了一层js验证,在控制器加了一层后台验证。
UI层js验证是引用两个js脚本起作用

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

如果不引用这个脚本,前端html页面验证不起作用。
验证的提示信息通过Tag helper 的 asp-validation-for,如:<span asp-validation-for="Rating" class="text-danger"></span>
验证失败时,提示信息自动加入到span标签文本中。

具体示例

1创建一个要验证的类型

public class Movie
   {
       public int ID { get; set; }

       [StringLength(60, MinimumLength = 3)]
       [Required]
       public string Title { get; set; }

       [Display(Name = "放映日期")]
       [DataType(DataType.Date)]
       [Range(typeof(DateTime), "1/1/1966", "1/1/2020")]
       public DateTime ReleaseDate { get; set; }

       [Range(1, 100)]
       [DataType(DataType.Currency)]
       public decimal Price { get; set; }

       [RegularExpression(@"^[A-Z]+[a-zA-Z''-'\s]*$")]
       [Required]
       [StringLength(30)]
       public string Genre { get; set; }

       [RegularExpression(@"^[A-Z]+[a-zA-Z''-'\s]*$")]
       [StringLength(5)]
       [Required]
       public string Rating { get; set; }
   }

Required 特性表示属性不能为空,但不能校验空格
值类型(如decimal, int, float, DateTime) 本身是必须的,并不需要 [Required] 特性。
Range 特性限制值在指定的范围内。
StringLength 特性可让你设定字符串最大长度,以及最小长度(可选)。
RegularExpression特性校验正则表达式。
注意:禁止在 DateTime 上使用 Range 特性来进行 JQuery 日期验证。因为不管填入的时间值在不在Range范围内,js验证都会提示错误。

2 在控制器进行验证

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Edit(int id, [Bind("ID,Title,ReleaseDate,Genre,Price,Rating")] Movie movie)
        {
            if (id != movie.ID)
            {
                return NotFound();
            }

            if (ModelState.IsValid)
            {
                try
                {
                    _context.Update(movie);
                    await _context.SaveChangesAsync();
                }
                catch (DbUpdateConcurrencyException)
                {
                    if (!MovieExists(movie.ID))
                    {
                        return NotFound();
                    }
                    else
                    {
                        throw;
                    }
                }
                return RedirectToAction(nameof(Index));
            }
            return View(movie);
        }

3 UI页面

<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="ID" />
            <div class="form-group">
                <label asp-for="Title" class="control-label"></label>
                <input asp-for="Title" class="form-control" />
                <span asp-validation-for="Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Rating" class="control-label"></label>
                <input asp-for="Rating" class="form-control" />
                <span asp-validation-for="Rating" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ReleaseDate" class="control-label"></label>
                <input asp-for="ReleaseDate" class="form-control" />
                <span asp-validation-for="ReleaseDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Genre" class="control-label"></label>
                <input asp-for="Genre" class="form-control" />
                <span asp-validation-for="Genre" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price" class="control-label"></label>
                <input asp-for="Price" class="form-control" />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

4


 
image.png

如图所示:放映日期提示错误,正是由于
DateTime 类型上使用 Range 导致的,所以禁止在DateTime 上使用 Range 。

5 自定义数据验证失败时的提示信息

校验特性上使用ErrorMessage属性

[StringLength(30,ErrorMessage = "Genre的长度不能超过30")]