if (ModelState.IsValid) { ... do something } else { ... do something }二 模型验证的例子
namespace AspNetCore.ModelValidation.Models { public class JobApplication { public string Name { get; set; } public DateTime DOB { get; set; } public string Sex { get; set; } public string Experience { get; set; } public bool TermsAccepted { get; set; } } }JobApplication类定义了不同的属性,为我们模型验证做测试,创建2个视图在Views->job 文件夹下,他们分别是:
@model JobApplication @{ ViewData["Title"] = "Job Application"; } <h2>Job Application</h2> <form class="m-1 p-1" method="post"> <div class="mb-3 row"> <div class="col-sm-1"> <label asp-for="Name" class="control-label"></label> </div> <div class="col-sm-11"> <input asp-for="Name" class="form-control" /> </div> </div> <div class="mb-3 row"> <div class="col-sm-1"> <label asp-for="DOB" class="control-label"></label> </div> <div class="col-sm-11"> <input asp-for="DOB" type="text" asp-format="{0:d}" class="form-control" /> </div> </div> <div class="mb-3 row"> <div class="col-sm-1"> <label asp-for="Sex" class="control-label"></label> </div> <div class="col-sm-1"> <input asp-for="Sex" type="radio" value="M" class="form-check" />男 </div> <div class="col-sm-1"> <input asp-for="Sex" type="radio" value="F" class="form-check" />女 </div> <div class="col-sm-9"> </div> </div> <div class="mb-3 row"> <div class="col-sm-1"> <label asp-for="Experience" class="control-label"></label> </div> <div class="col-sm-11"> <select asp-for="Experience" class="form-control"> <option value="选择">选择</option> <option value="0">新手</option> <option value="1">0-1 年</option> <option value="2">1-2 年</option> <option value="3">2-3 年</option> <option value="4">3-4 年</option> <option value="5">4-5 年</option> </select> </div> </div> <div class="mb-3 row"> <div class="col-sm-1"> </div> <div class="col-sm-1"> <input asp-for="TermsAccepted" class="form-label" /> </div> <div class="col-sm-10"> <label asp-for="TermsAccepted" class="form-check-label"> 我接受条款 & 条件 </label> </div> </div> <div class="mb-3 row"> <div class="col-sm-11 offset-sm-1"> <button type="submit" class="btn btn-primary">提交</button> </div> </div> </form>这个视图包含一个Job申请表单,用户填充详细信息并且通过点击Submit提交表单
@model JobApplication @{ Layout = "_Layout"; ViewData["Title"] = "接受"; } <h2>接受</h2> <table class="table table-bordered"> <tr> <th>姓名:</th> <td>@Model.Name</td> </tr> <tr> <th>出生日期:</th> <td>@Model.DOB.ToString("d")</td> </tr> <tr> <th>性别:</th> <td>@Model.Sex</td> </tr> <tr> <th>工作经验:</th> <td>@Model.Experience</td> </tr> <tr> <th>条款:</th> <td>@Model.TermsAccepted</td> </tr> </table> <a class="btn btn-success" asp-action="Index">返回</a>这个视图在html表格内将显示客户端提交的值,接下来创建一个控制器文件叫JobController.cs在内部添加2个方法,他们是:
using AspNetCore.ModelValidation.Models; using Microsoft.AspNetCore.Mvc; namespace AspNetCore.ModelValidation.Controllers { public class JobController : Controller { public IActionResult Index() { // 堆代码 duidaima.com return View(); } [HttpPost] public IActionResult Index(JobApplication jobApplication) { return View("Accepted", jobApplication); } } }现在运行应用程序并且进入URL – /Job,你将发现Job申请表单,这个表单看上去很Nice,但是没有做模型验证
这个表单也没有强迫用户选择性别、经验、条款,为了阻止用户输入错误的出生日期,并且强迫他在表单输入所有信息,我们使用模型验证过程。
using AspNetCore.ModelValidation.Models; using Microsoft.AspNetCore.Mvc; namespace AspNetCore.ModelValidation.Controllers { public class JobController : Controller { public IActionResult Index() { return View(); } [HttpPost] public IActionResult Index(JobApplication jobApplication) { if (string.IsNullOrEmpty(jobApplication.Name)) ModelState.AddModelError(nameof(jobApplication.Name), "请输入用户名"); if (jobApplication.DOB == Convert.ToDateTime("01-01-0001 00:00:00")) ModelState.AddModelError(nameof(jobApplication.DOB), "请输入出生日期"); else if (jobApplication.DOB > DateTime.Now) ModelState.AddModelError(nameof(jobApplication.DOB), "出生日期不能大于当前时间"); else if (jobApplication.DOB < new DateTime(1980, 1, 1)) ModelState.AddModelError(nameof(jobApplication.DOB), "出生日期不能在1980年以前"); if (string.IsNullOrEmpty(jobApplication.Sex)) ModelState.AddModelError(nameof(jobApplication.Sex), "请选择性别"); if (jobApplication.Experience.ToString() == "Select") ModelState.AddModelError(nameof(jobApplication.Experience), "请选择工作经验"); if (!jobApplication.TermsAccepted) ModelState.AddModelError(nameof(jobApplication.TermsAccepted), "必须接受条款"); if (ModelState.IsValid) return View("Accepted", jobApplication); else return View(); } } }在上面代码中,验证JobApplication类每一个属性 ,确保用户在表单中输入正确的值,让我们接着讨论一下每个字段验证的值
条件 3 -如果用户提供出生日期在1980年以前,下面代码将执行- elseif (jobApplication.DOB < new DateTime(1980, 1, 1)),当检查失败时,提供容易理解的错误消息。
if (string.IsNullOrEmpty(jobApplication.Sex))这种情况下,Sex 属性验证的错误消息会被记录到ModelState中,通过下面代码
ModelState.AddModelError(nameof(jobApplication.Sex), "请选择性别");2.5 经验属性
if (jobApplication.Experience.ToString() == "Select")确定用户在没有选择工作经验时,Experience属性对应的错误信息将被记录
if (ModelState.IsValid) return View("Accepted", jobApplication); else return View();下面代码将在视图显示未验证的错误
<input class="form-control" type="text" data-val="true" data-val-required="The 姓名 field is required." id="Name" name="Name" value="">没有通过验证时,我们将发现在所有控件上都添加了input-validation-error css,我们使用CSS样式在控件边框上添加红色,因此,在JobController的Index视图中添加样式代码块
@model JobApplication @{ ViewData["Title"] = "Job Application"; } <style> .input-validation-error { border-color: red; } </style> <h2>Job Application</h2> <form class="m-1 p-1" method="post"> <div class="mb-3 row"> <div class="col-sm-1"> <label asp-for="Name" class="control-label"></label> </div> <div class="col-sm-11"> <input asp-for="Name" class="form-control" /> </div> </div> <div class="mb-3 row"> <div class="col-sm-1"> <label asp-for="DOB" class="control-label"></label> </div> <div class="col-sm-11"> <input asp-for="DOB" type="text" asp-format="{0:d}" class="form-control" /> </div> </div> <div class="mb-3 row"> <div class="col-sm-1"> <label asp-for="Sex" class="control-label"></label> </div> <div class="col-sm-1"> <input asp-for="Sex" type="radio" value="M" class="form-check" />男 </div> <div class="col-sm-1"> <input asp-for="Sex" type="radio" value="F" class="form-check" />女 </div> <div class="col-sm-9"> </div> </div> <div class="mb-3 row"> <div class="col-sm-1"> <label asp-for="Experience" class="control-label"></label> </div> <div class="col-sm-11"> <select asp-for="Experience" class="form-control"> <option value="Select">选择</option> <option value="0">新手</option> <option value="1">0-1 年</option> <option value="2">1-2 年</option> <option value="3">2-3 年</option> <option value="4">3-4 年</option> <option value="5">4-5 年</option> </select> </div> </div> <div class="mb-3 row"> <div class="col-sm-1"> </div> <div class="col-sm-1"> <input asp-for="TermsAccepted" class="form-label" /> </div> <div class="col-sm-10"> <label asp-for="TermsAccepted" class="form-check-label"> 我接受条款 & 条件 </label> </div> </div> <div class="mb-3 row"> <div class="col-sm-11 offset-sm-1"> <button type="submit" class="btn btn-primary">提交</button> </div> </div> </form>我们测试一下,当验证发生错误时控制器将显示红色边框,如下图所示:
@model JobApplication @{ ViewData["Title"] = "Job Application"; } <style> .input-validation-error { border-color: red; } </style> <h2>Job Application</h2> <div asp-validation-summary="All" class="text-danger"></div> <form class="m-1 p-1" method="post"> <div class="mb-3 row"> <div class="col-sm-1"> <label asp-for="Name" class="control-label"></label> </div> <div class="col-sm-11"> <input asp-for="Name" class="form-control" /> </div> </div> <div class="mb-3 row"> <div class="col-sm-1"> <label asp-for="DOB" class="control-label"></label> </div> <div class="col-sm-11"> <input asp-for="DOB" type="text" asp-format="{0:d}" class="form-control" /> </div> </div> <div class="mb-3 row"> <div class="col-sm-1"> <label asp-for="Sex" class="control-label"></label> </div> <div class="col-sm-1"> <input asp-for="Sex" type="radio" value="M" class="form-check" />男 </div> <div class="col-sm-1"> <input asp-for="Sex" type="radio" value="F" class="form-check" />女 </div> <div class="col-sm-9"> </div> </div> <div class="mb-3 row"> <div class="col-sm-1"> <label asp-for="Experience" class="control-label"></label> </div> <div class="col-sm-11"> <select asp-for="Experience" class="form-control"> <option value="Select">选择</option> <option value="0">新手</option> <option value="1">0-1 年</option> <option value="2">1-2 年</option> <option value="3">2-3 年</option> <option value="4">3-4 年</option> <option value="5">4-5 年</option> </select> </div> </div> <div class="mb-3 row"> <div class="col-sm-1"> </div> <div class="col-sm-1"> <input asp-for="TermsAccepted" class="form-label" /> </div> <div class="col-sm-10"> <label asp-for="TermsAccepted" class="form-check-label"> 我接受条款 & 条件 </label> </div> </div> <div class="mb-3 row"> <div class="col-sm-11 offset-sm-1"> <button type="submit" class="btn btn-primary">提交</button> </div> </div> </form>asp-validation-summary帮助标签会创建一个div把错误信息显示在该元素内,text-danger是Bootstrap的样式会给文本添加红色,再次运行你的应用程序并且在控件中不要输入任何值,提交表单,我们将会看到错误消息列表,如下图所示
名称 |
描述 |
All | 显示记录的所有验证消息 |
ModelOnly | 显示Model层的错误消息,它不包括为单个属性记录的那些验证消息 |
None | 不显示任何验证的消息 |
<span asp-validation-for="Name"></span>现在进入JobController的Index视图,在Name属性输入框下面添加一个span控件
@model JobApplication @{ Layout = "_Layout"; ViewData["Title"] = "Job Application"; } <style> .input-validation-error { border-color: red; } </style> <h2>Job Application</h2> <div asp-validation-summary="All" class="text-danger"></div> <form class="m-1 p-1" method="post"> <div class="form-group"> <label asp-for="Name"></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="DOB"></label> <input asp-for="DOB" type="text" asp-format="{0:d}" class="form-control" /> <span asp-validation-for="DOB" class="text-danger"></span> </div> <div class="form-group"> <label asp-for="Sex"></label> <div> <input asp-for="Sex" type="radio" value="M" />Male <input asp-for="Sex" type="radio" value="F" />Female </div> <span asp-validation-for="Sex" class="text-danger"></span> </div> <div class="form-group"> <label asp-for="Experience"></label> <select asp-for="Experience" class="form-control"> <option value="Select">Select</option> <option value="0">Fresher</option> <option value="1">0-1 years</option> <option value="2">1-2 years</option> <option value="3">2-3 years</option> <option value="4">3-4 years</option> <option value="5">4-5 years</option> </select> <span asp-validation-for="Experience" class="text-danger"></span> </div> <div class="form-group"> <input asp-for="TermsAccepted" /> <label asp-for="TermsAccepted" class="form-check-label"> I accept the terms & conditions </label> <span asp-validation-for="TermsAccepted" class="text-danger"></span> </div> <button type="submit" class="btn btn-primary">Submit Application</button> </form>再次运行应用程序,在没有输入任何值时提交表单,这次你将看到单个错误消息显示在每个控件的旁边,下面图片显示错误消息: