ASP.NET MVC - 模型验证/表单验证 - 客户端验证 jquery.validate.js & jquery.validate.unobtrusive.js

创建时间:
2015-11-05 15:16
最近更新:
2018-10-01 15:26

ASP.NET MVC 客户端验证 - 默认 JavaScript 库

  • Jörn Zaefferer 的 jquery.validate.js (详见本站专文)
  • jquery.validate.unobtrusive.js

页面中必须引用以上两个库,客户端验证才能启动。

Resource

  1. ASP.NET MVC 异步验证是如何工作的 03, jquery.validate.unobtrusive.js 是如何工作的
  2. MVC4 如何启用客户端验证
  3. MVC5 + EF6 + Bootstrap3 应用 ModelState 和 Data Annotation 做服务器端数据验证
  4. MVC5 + EF6 + Bootstrap3 客户端验证

jquery.validate.js 中验证时间格式的 BUG

2015-11-05 Tony 测试记录

  • Model 中类型为 DateTime 的属性,即使未附加任何 Attribute,MVC 框架也会进行服务器与客户端双重验证。
  • 对于 DateTime? 仅验证是否为合法的日期时间格式。
  • 对于 DateTime 除了验证是否为合法的日期时间格式,还会验证是否为空。
  • jquery.validate.js 的日期时间格式验证规则,在 Firefox 中存在 BUG,其它浏览器待测试。详见下文。

Resource

ASP.NET MVC4 内建验证遇到 DateTime 型别的 BUG

原因所在 - 原来的代码

/*! jQuery Validation Plugin - v1.10.0 - 9/7/2012
* https://github.com/jzaefferer/jquery-validation
* Copyright (c) 2012 Jörn Zaefferer; Licensed MIT */

from line 1112:

// http://docs.jquery.com/Plugins/Validation/Methods/date
date: function(value, element) {
    return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
},

// http://docs.jquery.com/Plugins/Validation/Methods/dateISO
dateISO: function(value, element) {
    return this.optional(element) || /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/.test(value);
},

解决方案

Utility.js 中加入以下代码:

// Override "return this.optional(element) || !/Invalid|NaN/.test(new Date(value));" in "jquery.validate.js".
jQuery.validator.methods.date = function(value, element) {
    return this.optional(element) || /^ *\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}([T ]\d{1,2}:\d{1,2}(:\d{1,2})?)? *$/.test(value);
}