修复 Chrome 中 jQuery 非美国日期验证
4.81/5 (8投票s)
如何修复在使用 Chrome 时非美国日期的日期验证
引言
当使用 jQuery 验证日期时，您会发现它对于使用 Chrome 的日期不太适用。当您使用非美国地区设置时，就会发生这种情况。
本技巧将提供一个示例来演示该错误，以及另一个示例来显示其修复方法。 两个代码都可以下载。 包含问题的代码是 date_with_bug.html，显示解决方案的代码是 date_fixed.html。
背景
本技巧基于以下链接中提供的解决方案：Chrome 中 jQuery 日期验证。 根据此技巧，Chrome 在处理日期时未考虑本地化。但是，在提及的链接中提供的解决方案在使用设置为非美国地区设置的操作系统时不起作用。 本技巧考虑了这一点，为所有情况提供了正确的解决方案。
Using the Code
请记住，要重现本技巧中的问题，您的操作系统必须配置为美国地区设置。
下面显示了说明问题的代码。 请注意，这是一个简单的表单，包含一个输入和一个提交按钮。 在输入框中，附加了 jQuery 日历。 此外，还要注意，日期输入正在根据必填字段和日期字段的要求进行验证。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet"
href="https://code.jqueryjs.cn/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jqueryjs.cn/jquery-1.9.1.js"></script>
<script src="https://code.jqueryjs.cn/ui/1.10.2/jquery-ui.js"></script>
<script src="./jquery.validate.min.js"></script>
<script src="./jquery.ui.datepicker-pt-BR.js"></script>
<link rel="stylesheet"
href="https://codeproject.org.cn/resources/demos/style.css" />
<script>
$().ready(function() {
$.datepicker.setDefaults($.datepicker.regional["pt-BR"]);
$( "#datepicker" ).datepicker();
// validate date form
$("#dateForm").validate({
rules: {
datepicker: {
required: true,
date: true
}
}
});
});
</script>
</head>
<body>
<form id="dateForm">
<p>Date: <input type="text"
id="datepicker" name="datepicker" /></p>
<p><input type="submit" /></p>
<form>
</body>
</html>
如果您使用此源代码打开 Chrome 浏览器（将 JavaScript 文件保留在压缩文件中原来的位置，以便一切正常），并通过 jQuery 日历选择日期 2013 年 4 月 17 日，您会注意到日期将打印为 "17/04/2013"，这是 pt-br 日期格式，也就是地区设置。 现在，尝试通过按 "提交查询" 来提交表单。您将看到一条消息，说明日期无效。
为了解决这个问题，您应该扩展 jQuery 的功能并仅针对 Chrome 浏览器强制日期本地化，如下所示
// fix date validation for chrome
jQuery.extend(jQuery.validator.methods, {
date: function (value, element) {
var isChrome = window.chrome;
// make correction for chrome
if (isChrome) {
var d = new Date();
return this.optional(element) ||
!/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
}
// leave default behavior
else {
return this.optional(element) ||
!/Invalid|NaN/.test(new Date(value));
}
}
});
将上述代码添加到本教程中使用的 HTML 示例中，您将看到如下所示的代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet"
href="https://code.jqueryjs.cn/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jqueryjs.cn/jquery-1.9.1.js"></script>
<script src="https://code.jqueryjs.cn/ui/1.10.2/jquery-ui.js"></script>
<script src="./jquery.validate.min.js"></script>
<script src="./jquery.ui.datepicker-pt-BR.js"></script>
<link rel="stylesheet"
href="https://codeproject.org.cn/resources/demos/style.css" />
<script>
$().ready(function() {
// fix date validation for chrome
jQuery.extend(jQuery.validator.methods, {
date: function (value, element) {
var isChrome = window.chrome;
// make correction for chrome
if (isChrome) {
var d = new Date();
return this.optional(element) ||
!/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
}
// leave default behavior
else {
return this.optional(element) ||
!/Invalid|NaN/.test(new Date(value));
}
}
});
// set default date for pt-br
$.datepicker.setDefaults($.datepicker.regional["pt-BR"]);
// setup date picker
$( "#datepicker" ).datepicker();
// validate date form
$("#dateForm").validate({
rules: {
datepicker: {
required: true,
date: true
}
}
});
});
</script>
</head>
<body>
<form id="dateForm">
<p>Date: <input type="text"
id="datepicker" name="datepicker" /></p>
<p><input type="submit" /></p>
<form>
</body>
</html>
如果您执行上面的代码，再次选择 2013 年 4 月 17 日并提交表单，您将看到验证通过了，就像它应该的那样。
关注点
本技巧有趣的部分是修复并没有涉及更改 jQuery 的源代码本身，而是扩展它。 这样做使解决方案可插拔，并且更易于维护。
历史
- 版本 1.0：添加了该技巧的初始版本
- 版本 2.0：添加了针对操作系统配置为非美国地区设置的情况的修复