MVC客户端验证
2016-04-18 17:10
330 查看
本节内容比较简单,在上节服务器端验证的基础上介绍客户端验证。
客户端验证的好处是不用向服务器提交代码就能显示出错误信息。反应更快,与用户交互更流畅。
然而,其致命的弱点就是验证脚本可以在客户端被随意修改。因此它是不可靠的。
所以我们这里介绍怎样给单纯的服务器端验证加上客户端验证。
那么我们就基于上一节讲的Data Annotation验证添加客户端验证。
首先,确认解决方案根目录下的web.config文件中激活了客户端验证:
第3行表示激活了客户端验证。第4行表示激活Unobstrusive JavaScript。它代表着一种将Html代码和JavasScript分离开的思想。总体来说就是用代码分离的思想做客户端验证。
然后继续使用上一节创建的Model和Controller。
Models/DataAnnotationModel.cs
Controllers/DataValidationController.cs
View代码继续沿用,不过需要添加客户端验证所需的js文件。
Views/DataValidation/DataAnnotationAction.cshtml
第36-39行用来添加客户端验证所需的js文件。
这一段代码会调用App_Start文件夹下的BundleConfig.cs文件。文件内容如下:
第10和11行的代码会被调用。代码会引入所有符合"~/Scripts/jquery.validate*"条件的js文件。
即以下红色方框内文件:
按F5运行,输入以下错误信息,可以看到如下验证提示信息:
点提交按钮时,页面没有刷新,证明是客户端验证。
右键点击页面,选择查看源代码。可以看到Scripts.Render("~/bundles/jqueryval")函数向页面里加入了如下两个js文件。
为什么不是之前截图看到的5个?我推测这和web.config设置以及用的是debug或release编译模式有关。
在页面生成的两个输入框的代码如下:
Name:
Email:
可以看到验证所需的信息都在html代码里,而验证的函数逻辑都在引入的validate的js文件里。两部分完全分离,但是又配合得很好。
到此,我们的客户端验证就介绍完了。
本节内容比较简单,在上节服务器端验证的基础上介绍客户端验证。
客户端验证的好处是不用向服务器提交代码就能显示出错误信息。反应更快,与用户交互更流畅。
然而,其致命的弱点就是验证脚本可以在客户端被随意修改。因此它是不可靠的。
所以我们这里介绍怎样给单纯的服务器端验证加上客户端验证。
那么我们就基于上一节讲的Data Annotation验证添加客户端验证。
首先,确认解决方案根目录下的web.config文件中激活了客户端验证:
隐藏代码[code]<configuration> <appSettings> <add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="true" /> </appSettings> </configuration>
第3行表示激活了客户端验证。第4行表示激活Unobstrusive JavaScript。它代表着一种将Html代码和JavasScript分离开的思想。总体来说就是用代码分离的思想做客户端验证。
然后继续使用上一节创建的Model和Controller。
Models/DataAnnotationModel.cs
隐藏代码[code]using System.ComponentModel.DataAnnotations; namespace SlarkInc.Models { public class DataAnnotationModel { [Required(ErrorMessage = "Name is required")] public string Name { get; set; } [Required(ErrorMessage = "Email is required")] [RegularExpression(@"^\s*([A-Za-z0-9_-]+(\.\w+)*@([\w-]+\.)+\w{2,3})\s*$", ErrorMessage = "Email is invalid")] public string Email { get; set; } } }
Controllers/DataValidationController.cs
隐藏代码[code]using System.Web.Mvc; using SlarkInc.Models; using System.Text.RegularExpressions; namespace SlarkInc.Controllers { public class DataValidationController : Controller { public ActionResult DataAnnotationAction() { return View(); } [HttpPost] public ActionResult DataAnnotationAction(DataAnnotationModel model) { if (ModelState.IsValid) { ViewBag.Name = model.Name; ViewBag.Email = model.Email; } return View(model); } } }
View代码继续沿用,不过需要添加客户端验证所需的js文件。
Views/DataValidation/DataAnnotationAction.cshtml
隐藏代码[code]@model SlarkInc.Models.DataAnnotationModel @{ ViewBag.Title = "DataAnnotationAction"; } <h2>Data Annotation Validation</h2> @Html.ValidationSummary() @using (Html.BeginForm()) { if (@ViewData.ModelState.IsValid && ViewBag.Name != null) { <b> Name : @ViewBag.Name <br /> Email: @ViewBag.Email </b> } <fieldset> <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> <br /> <input type="submit" value="Submit" /> </fieldset> } @section Scripts { @Scripts.Render("~/bundles/jqueryval") }
第36-39行用来添加客户端验证所需的js文件。
这一段代码会调用App_Start文件夹下的BundleConfig.cs文件。文件内容如下:
隐藏代码[code]namespace SlarkInc { public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*")); bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css")); } } }
第10和11行的代码会被调用。代码会引入所有符合"~/Scripts/jquery.validate*"条件的js文件。
即以下红色方框内文件:
按F5运行,输入以下错误信息,可以看到如下验证提示信息:
点提交按钮时,页面没有刷新,证明是客户端验证。
右键点击页面,选择查看源代码。可以看到Scripts.Render("~/bundles/jqueryval")函数向页面里加入了如下两个js文件。
隐藏代码[code]<script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
为什么不是之前截图看到的5个?我推测这和web.config设置以及用的是debug或release编译模式有关。
在页面生成的两个输入框的代码如下:
Name:
隐藏代码[code]<div class="editor-field"> <input class="text-box single-line" data-val="true" data-val-required="Name is required" id="Name" name="Name" type="text" value="" / > <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span> </div>
Email:
隐藏代码[code]<div class="editor-field"> <input class="text-box single-line" data-val="true" data-val-regex="Email is invalid" data-val-regex-pattern="^\s*([A-Za-z0-9_-]+(\.\ w+)*@([\w-]+\.)+\w{2,3})\s*$" data-val-required="Email is required" id="Email" name="Email" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span> </div>
可以看到验证所需的信息都在html代码里,而验证的函数逻辑都在引入的validate的js文件里。两部分完全分离,但是又配合得很好。
到此,我们的客户端验证就介绍完了。
相关文章推荐
- 排序算法—快排FastSort
- [编程题]奖学金
- TCP IP首部详解
- EAS后台SQL日志收集
- MVC客户端验证
- Reflect Java反射机制
- 基于Apache Spark的机器学习及神经网络算法和应用
- django book querysets
- 怎样成为一名数据科学家
- magento产品导入时需要注意的事项
- Android M 动态权限获取
- oracle primavera p6自带工具数据迁移
- 举例讲解jQuery中可见性过滤选择器的使用
- 光敏电阻
- 《Zigbee深入浅出实战篇》超高清视频(胜达电子老达原创)
- 数据库 查询 事务
- error LNK2001: 无法解析的外部符号 _mbctype 解决方案
- Request 接收参数乱码原理解析
- POJ 3254 Corn Fields
- js方法 汉字转换为拼音