重点:
1、服务端主要引用 System.ComponentModel.DataAnnotations
2、客户端主要引用 jquery.validate.min.js 和 jquery.validate.unobtrusive.min.js(当然jquery.js必须是前提)
上代码
/// <summary> /// 用户 /// </summary> public class Member { [Required(ErrorMessage ="用户名不能为空")] [MaxLength(16,ErrorMessage ="用户名最多为16位")] [Display(Name ="用户名")] public string UserName { get; set; } [Required(ErrorMessage ="密码不能为空")] [MinLength(6,ErrorMessage ="密码最少为6位")] [MaxLength(32,ErrorMessage ="密码最多为32位")] [Display(Name ="密码")] public string Password { get; set; } }
@{ Layout = null; } @{ ViewData["Title"] = "登录"; } @model AttributeDemo.Models.Member <h1>Add</h1> @using (Html.BeginForm("Login", "Home", FormMethod.Post, new { @id = "ajaxPostForm", @class = "form-horizontal", enctype = "multipart/form-data" })) { @Html.TextBoxFor(a => a.UserName, new { @class = "input form-control" }) @Html.ValidationMessageFor(a => a.UserName) @Html.TextBoxFor(a => a.Password, new { @class = "input form-control" }) @Html.ValidationMessageFor(a => a.Password) <button id="btnSave">提交</button> } <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>总结:
/// <summary> /// 登录 /// </summary> /// <param name="member"></param> /// <returns></returns> [HttpPost] public IActionResult Login(Member member) { if (ModelState.IsValid) { //登录逻辑 return Json("登录成功"); } else { //模糊化错误信息提示 return Json("参数验证不通过"); //精确错误信息提示(返回第一遍历到的错误信息) //foreach (var key in ModelState.Keys) //{ // var modelstate = ModelState[key]; // if (modelstate.Errors.Any()) // { // return Json(modelstate.Errors.FirstOrDefault().ErrorMessage); // } //} } }
优点:使用特性方式验证参数比传统逐条手写验证更优雅,前端和后端会进行双重校验,更便于扩展
缺点:前端验证依赖Razor,如果使用vue等前端框架也需要单独再写参数验证
总结:总体来说,优点是远远大于缺点的,是个好东西