原文:

系列教程：

上一节：

源码下载：

 

本节内容比较简单，在上节服务器端验证的基础上介绍客户端验证。

客户端验证的好处是不用向服务器提交代码就能显示出错误信息。反应更快，与用户交互更流畅。

然而，其致命的弱点就是验证脚本可以在客户端被随意修改。因此它是不可靠的。

所以我们这里介绍怎样给单纯的服务器端验证加上客户端验证。

那么我们就基于上一节讲的Data Annotation验证添加客户端验证。。

首先，确认解决方案根目录下的web.config文件中激活了客户端验证：

1 
     
      2   
      
       3     
       4     
       5   
      6 
     

第3行表示激活了客户端验证。第4行表示激活Unobstrusive JavaScript。它代表着一种将Html代码和JavasScript分离开的思想。总体来说就是用代码分离的思想做客户端验证。

然后继续使用上一节创建的Model和Controller。为了方便大家查看，这里贴出代码，对代码的具体解释。

Models/DataAnnotationModel.cs

1 using System.ComponentModel.DataAnnotations; 2 namespace SlarkInc.Models 3 { 4     public class DataAnnotationModel 5     { 6         [Required(ErrorMessage = "Name is required")] 7         public string Name { get; set; } 8  9         [Required(ErrorMessage = "Email is required")]10         [RegularExpression(@"^\s*([A-Za-z0-9_-]+(\.\w+)*@([\w-]+\.)+\w{2,3})\s*$", ErrorMessage = "Email is invalid")]11         public string Email { get; set; }12     }13 }

Controllers/DataValidationController.cs

1 using System.Web.Mvc; 2 using SlarkInc.Models; 3 using System.Text.RegularExpressions; 4  5 namespace SlarkInc.Controllers 6 { 7     public class DataValidationController : Controller 8     { 9         public ActionResult DataAnnotationAction()10         {11             return View();12         }13 14         [HttpPost]15         public ActionResult DataAnnotationAction(DataAnnotationModel model)16         {17             if (ModelState.IsValid)18             {19                 ViewBag.Name = model.Name;20                 ViewBag.Email = model.Email;21             }22             return View(model);23         }24     }25 }

View代码继续沿用，不过需要添加客户端验证所需的js文件。

Views/DataValidation/DataAnnotationAction.cshtml

1 @model SlarkInc.Models.DataAnnotationModel 2 @{ 3     ViewBag.Title = "DataAnnotationAction"; 4 } 5 
Data Annotation Validation
 6 @Html.ValidationSummary() 7 @using (Html.BeginForm()) 8 { 9     if (@ViewData.ModelState.IsValid && ViewBag.Name != null)10     {11         12             Name : @ViewBag.Name13             
14             Email: @ViewBag.Email15         16     }17     
     
      18         
      
       19             @Html.LabelFor(model => model.Name)20         
      
21         
      
       22             @Html.EditorFor(model => model.Name)23             @Html.ValidationMessageFor(model => model.Name)24         
      
25         
      
       26             @Html.LabelFor(model => model.Email)27         
      
28         
      
       29             @Html.EditorFor(model => model.Email)30             @Html.ValidationMessageFor(model => model.Email)31         
      
32         
      
33         
      34     
     
35 }36 @section Scripts37 {38     @Scripts.Render("~/bundles/jqueryval")39 }

第36-39行用来添加客户端验证所需的js文件。

这一段代码会调用App_Start文件夹下的BundleConfig.cs文件。文件内容如下：

1 namespace SlarkInc 2 { 3     public class BundleConfig 4     { 5         public static void RegisterBundles(BundleCollection bundles) 6         { 7             bundles.Add(new ScriptBundle("~/bundles/jquery").Include( 8                         "~/Scripts/jquery-{version}.js")); 9 10             bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(11                         "~/Scripts/jquery.validate*"));12 13             bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(14                         "~/Scripts/modernizr-*"));15 16             bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(17                       "~/Scripts/bootstrap.js",18                       "~/Scripts/respond.js"));19 20             bundles.Add(new StyleBundle("~/Content/css").Include(21                       "~/Content/bootstrap.css",22                       "~/Content/site.css"));23         }24     }25 }

第10和11行的代码会被调用。代码会引入所有符合"~/Scripts/jquery.validate*"条件的js文件。

即以下红色方框内文件：

按F5运行，输入以下错误信息，可以看到如下验证提示信息：

点提交按钮时，页面没有刷新，证明是客户端验证。

右键点击页面，选择查看源代码。可以看到Scripts.Render("~/bundles/jqueryval")函数向页面里加入了如下两个js文件。

1 2 

为什么不是之前截图看到的5个？我推测这和web.config设置以及用的是debug或release编译模式有关。

在页面生成的两个输入框的代码如下：

Name:

1 
     
      2             
      3             
      4         
     

Email:

1 
     
      2             
      3             
      4         
     

可以看到验证所需的信息都在html代码里，而验证的函数逻辑都在引入的validate的js文件里。两部分完全分离，但是又配合得很好。

到此，我们的客户端验证就介绍完了。

后面会持续更新，敬请期待。

 

上一节：

作者：

出处：

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如有问题或建议，请多多赐教，非常感谢。