ASP.NET MVC 客户端验证

• 下载源文件 - 3.1 MB

引言

本文档解释了如何在 ASP.NET MVC 应用程序中实现客户端验证。验证使用 jQuery 和 jQuery 验证插件（jquery.validate.min.js 和 jquery.validate.unobtrusive.min.js）实现。

在服务器端验证（ASP.NET MVC 服务器端验证）中，页面必须通过回发提交才能在服务器上进行验证，如果模型数据无效，则服务器会将响应发送回客户端。使用客户端验证，输入数据在提交后立即进行检查，因此没有回发到服务器，也没有页面刷新。

Using the Code

在 Visual Studio 2012 中开发 MVC 应用程序时，客户端验证默认启用，但您可以通过在 web.config 文件中编写以下应用程序设置代码片段来轻松启用或禁用它。

<configuration>
  <appSettings>  
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
</configuration>

jQuery 验证插件利用模型中定义的 Data Annotation 特性，这意味着您需要做的很少就可以开始使用它。让我们创建一个 Employee 模型（Models 文件夹下的 Employee.cs 类文件），该模型具有两个带有 Data Annotation 特性的属性。

using System.ComponentModel.DataAnnotations;
namespace ClientValidation.Models
{
    public class Employee
    {
        [Required(ErrorMessage = "Name is Requirde")]
        public string Name { get; set; }
        [Required(ErrorMessage = "Email is Requirde")]
        [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}" +
                            @"\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\" +
                            @".)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$",
                            ErrorMessage = "Email is not valid")]
        public string Email { get; set; }
    }
}

之后，您需要创建控制器的操作方法。这些操作方法在 UI 上渲染视图，并将模型与视图绑定。因此，让我们创建一个控制器，其中包含两个操作方法，分别处理两种请求类型（GET 和 POST）。

using System.Web.Mvc;
using ClientValidation.Models; 
namespace ClientValidation.Controllers
{
    public class EmployeeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        } 
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Index(Employee model)
        {
            if (ModelState.IsValid)
            {
                ViewBag.Name = model.Name;
                ViewBag.Email = model.Email;
            }
            return View(model);
        }
    }
}

然后，创建一个强类型视图，该视图将输入字段与模型绑定，并创建一个 JavaScript 函数，该函数使用 HTML Helper 扩展方法 FieldIdFor() 获取输入字段的 ID，并在警报消息中显示输入字段的值。

我在此处选中了“引用脚本库”，这意味着 Visual Studio 会自动添加这些引用。Visual Studio 将以下代码片段添加到视图的底部。

@section Scripts 
{
    @Scripts.Render("~/bundles/jqueryval")
}

现在单击“添加”按钮，视图将创建为以下代码片段所示。

@model ClientValidation.Models.Employee
@{
    ViewBag.Title = "Index";
}
 @if (ViewData.ModelState.IsValid)
    {
        if(@ViewBag.Name != null)
        {
            
                Name : @ViewBag.Name
                Email : @ViewBag.Email
            
        }
    } 
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true) 
    <fieldset>
        <legend>Employee</legend> 
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div> 
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div> 
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
@section Scripts 
{
    @Scripts.Render("~/bundles/jqueryval")
}

应用程序输出

让我们运行应用程序并测试以下场景。

1. 当所有字段都为空时

   

   图 1.2：当两个字段都为空时的验证消息
2. 当“姓名”字段为空但“电子邮件”无效时

   

   图 1.3：“电子邮件”无效时的验证消息
3. 当两个字段都有效时

   

   图 1.4：所有字段都有效