注意,为了使jQuery支持使用逗号的非英语区域的验证 ,需要设置逗号(",")来表示小数点,你需要引入globalize.js并且你还需要具体的指定cultures/globalize.cultures.js文件 (地址在https://github.com/jquery/globalize) 在 JavaScript 中可以使用 Globalize.parseFloat。下面的代码展示了在"FR-FR" Culture下的Views\Movies\Edit.cshtml 视图:
@section Scripts { @Scripts.Render("~/bundles/jqueryval") <script src="https://www.jb51.net/~/Scripts/globalize.js"></script> <script src="https://www.jb51.net/~/Scripts/globalize.culture.fr-FR.js"></script> <script> $.validator.methods.number = function (value, element) { return this.optional(element) || !isNaN(Globalize.parseFloat(value)); } $(document).ready(function () { Globalize.culture('fr-FR'); }); </script> <script> jQuery.extend(jQuery.validator.methods, { range: function (value, element, param) { //Use the Globalization plugin to parse the value var val = $.global.parseFloat(value); return this.optional(element) || ( val >= param[0] && val <= param[1]); } }); </script> }
为了使用这种用户验证界面,真正的好处是,您不需要修改MoviesController类或Create.cshtml视图中的任何一行代码。在本教程之前所生成的控制器和视图中,Movie模型类的属性上所指定的验证规则一样可以自动适用。
您可能已经注意到了Title 和Genre属性,在字段中输入文本或者删除文本,是不会执行所需的验证属性的,直到您提交表单 (点Create按钮)时才执行。对于字段是最初为空 (如创建视图中的字段) 和只有Required属性并没有其它验证属性的字段,您可以执行以下操作来触发验证:
1. Tab into the field.
2. Enter some text.
3. Tab out.
4. Tab back into the field.
5. Remove the text.
6. Tab out.
上面的顺序将触发必需的验证,而并不需要点击提交按钮。在不输入任何字段的情况下,直接点击提交按钮,将触发客户端验证。直到没有客户端验证错误的情况下,表单数据才会发送到服务器。您可以在服务器端HTTP Post 方法上加上断点来测试一下,或者使用Fiddler tool或 IE 9 F12 Developer tools.
如何验证创建视图和创建方法
您可能很想知道验证用户界面在没有更新控制器或视图代码的情况下是如何生成的。下面列出了MovieController类中的Create方法。它们是之前教程中自动生成的,并没有修改。
// // GET: /Movies/Create public ActionResult Create() { return View(); } // // POST: /Movies/Create [HttpPost] public ActionResult Create(Movie movie) { if (ModelState.IsValid) { db.Movies.Add(movie); db.SaveChanges(); return RedirectToAction("Index"); } return View(movie); }
第一种(HTTP GET)Create 方法用来显示初始的创建form。第二个 ([HttpPost]) 方法处理form的请求。第二种Create方法 (HttpPost 版本) 调用 ModelState.IsValid来检查是否有的任何的Movie验证错误。调用此方法将验证对象上所有应用了验证约束的属性。如果对象含有验证错误,则Create方法会重新显示初始的form。如果没有任何错误,方法将保存信息到数据库。在我们的电影示例中,我们使用了验证,当客户端检测到错误时,form不会被post到服务器;所以第二个Create方法永远不会被调用。如果您在浏览器中禁用了 JavaScript,客户端验证也会被禁用,HTTP POST Create方法会调用 ModelState.IsValid来检查影片是否含有任何验证错误。
您可以在HttpPost Create方法中设置一个断点,当客户端验证检测到错误时,不会post form数据,所以永远不会调用该方法。如果您在浏览器中禁用 JavaScript,然后提交具有错误信息的form,断点将会命中。您仍然得到充分的验证,即使在没有 JavaScript的情况下。下图显示了如何禁用 Internet Explorer 中的 JavaScript。
下图显示了如何在火狐浏览器中禁用 JavaScript。
下图显示了如何在 Chrome 浏览器中禁用 JavaScript。
下面是框架代码在之前的教程中生成的Create.cshtml视图模板。它用来为以上两个操作方法来显示初始的form,同时在验证出错时来重新显示视图。