JavaScript / jQuery 输入[type=text] 模式答案

【问题标题】：JavaScript / jQuery input[type=text] patternJavaScript / jQuery 输入[type=text] 模式
【发布时间】：2012-06-10 10:30:06
【问题描述】：

好的，我在表单中有一个输入，它是一个日期输入。我希望它接受基于“XX/XX/XXXX”之类的模式的字符。目前它只接受数字和“/”。但我不希望用户输入“X/XXXX/XX”之类的日期或其他类型的日期，也不想像“//XX/XXX/XXX”这样写错。我不知道如何在这个上使用 js，或者 jQuery，所以用户根据模式而不是其他方式输入日期。

【问题讨论】：

对于屏蔽输入，请记住您也希望能够接受部分有效的输入。你不应该阻止XX/X/XXXX，因为那样你会阻止用户纠正错字——这非常令人沮丧。您想要做的是通过屏蔽拒绝明显无效的输入（例如您的情况下的字母字符），然后在输入字段失去焦点或提交表单时检查最终输入是否无效。（同样令人沮丧：阻止用户跳出无效字段。）
尚未得到广泛支持，但 HTML5 有 <input type="date"> 和适当的 UI。

标签： javascript jquery design-patterns date input

【解决方案1】：

看看： http://digitalbush.com/projects/masked-input-plugin/

【讨论】：

【解决方案2】：

便宜又简单的方法可能只是实现jQuery UI datepicker控件，以便您可以通过它控制输入格式。

它基本上是在回避问题，但可能会为您解决实际问题。

【讨论】：

【解决方案3】：

使用正则表达式^(3[0-1]|[0-2]?[0-9])\/(0?[0-9]|1[0-2])\/(2[0-9]+)$:

var date = "20/12/2012";

console.log(isDateOK(date));

function isDateOK(date) {
    return date.match(/^(3[0-1]|[0-2]?[0-9])\/(0?[0-9]|1[0-2])\/([1-2][0-9]{3})$/);
}

如果不匹配，它将返回 false。此示例使用 DD/MM/YYYY。如果您想要 MM/DD/YYYY，请改用以下正则表达式：^(0?[0-9]|1[0-2])\/(3[0-1]|[0-2]?[0-9])\/[1-2][0-9]{3$

JSFiddle：http://jsfiddle.net/UBFeN/2/

【讨论】：

是的，但是添加输入安全性很简单，因此您可以确定他们输入的内容是正确的。当然你会遇到 3000 年的错误，但如果到那时有人还在使用这个 JS，我相信他们会解决的。当然2[0-9]{3} 应该与[0-9]{4} 交换，如果你想在过去 3K 年使用它。
大声笑我更关心 2000 年之前的日期而不是 3000 tbh 之后的日期。哦，使用 js 验证时没有输入安全性。我更喜欢使用库或 Date 类/类型构造函数来验证客户端和服务器端。
啊，是的，当然，傻傻的我。你完全正确！更改了帖子：D