ASP.NET MVC 模型验证

MVC自带有模型验证，它是通过System.ComponentModel.DataAnnotations命名空间完成。 我们要做的只是给Model类的各属性加上对应的验证特性（Attributes）就可以让MVC框架帮我们完成验证。

我们常规的验证就是喜欢写很多判断

如下：

[HttpPost]
public ActionResult Index(Register reg)
{
    if (String.IsNullOrEmpty(reg.UserName))
    {
        ModelState.AddModelError("UserName", "用户名不能为空");
    }
    else if (reg.UserName.Length < 6)
    {
        ModelState.AddModelError("UserName", "用户名长度不能小于6位");
    }
    if (ModelState.IsValidField("BirthDate") && reg.BirthDate > DateTime.Now)
    {
        ModelState.AddModelError("BirthDate", "生日不能为将来的时间");
    }
    if (ModelState.IsValid)
    {
        //保存数据
    }
    return View();
}

上面这种方式的验证虽然简单，很多人都能够立马上手，但是看到方法中N多个if语句的确不是个滋味，这种重复性的代码完全可以封装好然后通用。

使用特性进行验证：

[Required]：必填

[StringLength(60)]:字符串长度验证，最大60

[StringLength(50, MinimumLength = 6)]:字符串长度验证，最小6最大50

[Range(typeof(Decimal), "0", "100", ErrorMessage = "{0} 必须是数字介于 {1} 和 {2}之间.")]：范围跟上错误提示

[Range(typeof(decimal), "0.00", "49.99")]：小数的范围
[Range(typeof(DateTime), "11/10/2017", "11/10/2021")]:日期范围
[Range(35,44)]：范围

[RegularExpression(@”[A-Za-z0-9._%+-]+")]:正则的验证

[Compare("Password",ErrorMessage="密码要一致")]：进行两个值比较，比如用于密码是否相同

[Remote("CheckUserName", "Register", ErrorMessage = "用户名已被注册")]:远程验证

要验证很简单只需要使用ModelState.IsValid即可，就可以验证控制器接收到的模型

public ActionResult Do(TNBlogResource tnblogResource)
{
    //进行模型验证
    if (ModelState.IsValid)
    {
    }
    return View();
}

有些时候我们想要验证的不是写到方法参数上面的模型，是我们想要验证指定的模型实例

其实也很简单使用TryValidateModel即可

var movie = new Movie
{
    Title = title,
    Genre = genre,
    ReleaseDate = modifiedReleaseDate,
    Description = description,
    Price = price,
    Preorder = preorder,
};
//验证指定的模型实例
TryValidateModel(movie);

if (ModelState.IsValid)
{
    _context.AddMovie(movie);
    _context.SaveChanges();

    return RedirectToAction(actionName: nameof(Index));
}

return View(movie);

你使用了TryValidateModel后如果验证不通过想要看到具体的错误信息可以在调用一下ModelState.IsValid这样在ModelState中就可以看到具体的错误信息了

keys里边放的是出现错误的属性，如下

values里边就是具体的错误信息了

前台验证：

当然mvc里边的模型验证还可以配合前台验证，使用起来也比较简单

1：引入需要的js

前台验证使用的是jquery.validate,所以需要把相关的js引入进来一共需要三个

jquery,jquery.validate,jquery.validate.unobtrusive

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="~/content/jquery.validate.unobtrusive.min.js"></script>

其实呢前台只用jquery.validate.js就行，只是jquery.validate.unobtrusive是封装好的更好的配合asp.net mvc中的模型验证使用，可以更方便快捷的输出错误信息。

可以在运行时由服务器端根据Model中设置的验证规则，自动生成客户端验证js代码（结合jquery.validate）。这很好地解决了表单验证时一次代码，两次验证（客户端+服务器端）的问题

jquery.validate.unobtrusive.js下载地址：

https://download.tnblog.net/resource/index/03b887338c5a4c92a8562ad4c8dbab53

注意js的引入顺序，这个js要在前面两个js之后引入

如果只是纯前端的验证，也就是jquery.validate的使用，可以参考：

https://www.tnblog.net/aojiancc/article/details/2643

2:输入框的生成使用TextBoxFor的方式

//申明model
@model EFLearn2.Users
//根据Model生成文本框
@Html.TextBoxFor(a => a.UserName)
@Html.TextBoxFor(a => a.Number)
@Html.TextBoxFor(a => a.UClass)

因为这种方式生成，他会把相关的错误配置，根据后台那个模型配置都生成好，这样就可以很好把后台的模型配置和前台结合起来了

根据生成的input标签的结果，我们可以很好的知道，前台的jquery验证插件的错误配置根据后台模型配置自动生成好了，非常方便，不需要从新在写一次

3:在想要输出错误信息的地方使用@Html.ValidationSummary()

其实它就是帮我们生成了一串html代码用于显示错误信息：

<div class="validation-summary-valid" data-valmsg-summary="true">
   <ul>
       <li style="display:none"></li>
  </ul>
</div>

当然这串代码你完全可以自己写，只是我们用这个html帮助类会更快捷一点

4：然后使用验证插件的valid方法，即可知道有没有通过验证，没有通过验证就会输出错误信息

var exeupdate = function (param) {
    //是否验证通过
    if ($("#updateform").valid()) {
      //验证通过后的逻辑
    }
}

效果如下：

显示红色我们给一个样式即可：

.validation-summary-errors {
    color: red;
}

前台的所有代码如下：

<link href="~/media/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/media/css/style.css" rel="stylesheet" />
<script src="~/media/js/jquery-1.10.1.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="~/content/jquery.validate.unobtrusive.min.js"></script>
<script src="~/content/myjquery.js"></script>
<style>
    .validation-summary-errors {
        color: red;
    }

    .field-validation-error {
        color: red;
    }
</style>
@model EFLearn.Users
<div style="width: 88%; margin: 60px auto" id="updatediv">
    <form id="updateform">
        <div class="row-fluid">
            <div class="span6">
                <h4>用户</h4>
                <input type="hidden" id="Id" name="Id" />
                <p>
                    @Html.TextBoxFor(a => a.UserName, new { @class = "span12 m-wrap" })
                </p>
                <h4>学号</h4>
                <p>
                    @Html.TextBoxFor(a => a.Number, new { @class = "span12 m-wrap" })
                </p>
            </div>
            <div class="span6">
                <h4>班级</h4>
                <p>
                    @Html.TextBoxFor(a => a.UClass, new { @class = "span12 m-wrap" })
                </p>
                <h4>状态</h4>
                <p>
                    <select class="span12 m-wrap" id="CheckType" name="CheckType">
                        <option value="1">审核通过</option>
                        <option value="2">正在审核</option>
                        <option value="3">审核失败</option>
                    </select>
                </p>
            </div>
        </div>
        @Html.ValidationSummary()
    </form>
</div>

<script>
    var inject = function (obj) {
        $("#updateform").injectValue(obj);
    }
    var exeupdate = function (param) {
        //是否验证通过
        if ($("#updateform").valid()) {
          //验证通过后的逻辑
        }
    }
</script>

tip:网上有人说验证要生效前台的表单必须要使用@html.form来生成才可以，我这里没有使用也是可以的。只是像@Html.ValidationSummary()这类输出验证的要放到form标签里边才行，这点要注意。

把验证的错误信息放到指定的地方

上面是通过@Html.ValidationSummary()把所有错误信息输入到一个地方

当然也可以使用@Html.ValidationMessageFor来指定具体某个字段的错误信息和输出位置

<div class="span6">
    <h4>用户</h4>
    <input type="hidden" id="Id" name="Id" />
    <p>
        @Html.TextBoxFor(a => a.UserName, new { @class = "span12 m-wrap" })
        @Html.ValidationMessageFor(a => a.UserName)
    </p>
    <h4>学号</h4>
    <p>
        @Html.TextBoxFor(a => a.Number, new { @class = "span12 m-wrap" })
        @Html.ValidationMessageFor(a => a.Number)
    </p>
</div>

如下：用户和学号的错误信息都被显示到输入框的下面了

当然我这个错误信息这样显示样式就会错乱了，只是为了说明一下@Html.ValidationMessageFor可以把错误信息输入到想要的地方去

前台验证是否全部为空格

添加一个方法：

// 全空格验证
$.validator.addMethod("isBlank", function (value, element) {
    var blank = /^[ ]*$/;
    return this.optional(element) || !(blank.test(value));
}, "不能全输入空格");

使用的时候在class里边添加上isBlank就好了

  <input id="love" name="love" class="isBlank" required />

tip:代码标准和规范也是非常重要的，不会让整个项目越写越乱

参考项目下载地址：https://download.tnblog.net/resource/index/54f28c67148d4ac4b95dbf3d2ea5da9a

当你用心写完每一篇博客之后,你会发现它比你用代码实现功能更有成就感!