如何验证HTML5日期格式

Question

我想使用HTML5日期输入字段

<input type='date' name='customDate'>

这样其他用户就可以使用浏览器中的内置日期选择器.

我想检查输入是否实际上是日期格式.正如我在这里找到的:有没有办法改变输入类型="日期"格式？没有独特的演示格式.例如,在Chrome中,日期字段的输入以dd.mm.yyyy的形式给出,在Firefox 24或IE 9/10中,输入字段中的日期显示为YYYY-MM-DD.

我的第一个问题是,您如何告诉用户您希望他在日期中键入哪种格式？在Firefox中我需要类似的东西

<label>Enter Date(YYYY-MM-DD)</label><input type='date' 
                                         name='customDate' placeholder='YYYY-MM-DD'>

但这对Chrome来说是错误的.

其次,如果当前输入是(浏览器的)有效日期格式,我如何在提交之前检查？我知道如果日期格式为YYYY-MM-DD,我可以在提交后检查PHP,但是如何在提交之前用JavaScript检查它？

Answer 1

像这样使用它:

<label>Enter Date(YYYY-MM-DD)</label>
<input type='date' name='customDate' placeholder='YYYY-MM-DD' pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" >

对于所有其他HTML5日期模式请访问:

http://html5pattern.com/Dates

Answer 2

我认为验证 HTML5 日期格式的最佳方法是将工作留给日期选择器（如果可用）。

例如，chrome或ios5的原生日期选择器不允许错误的用户日期输入。在 Chrome 中，它甚至会检查日期是否存在于人类日历中。

如果浏览器没有本机日期选择器（如 firefox），则应使用 Modernizer 检测到这一点，并应使用jQuery UI datepicker。这是一篇很好的文章，解释了如何做到这一点。不幸的是，jQuery 日期选择器不会检查输入是否有效。但是，我们可以设置 dateType 和 constrainInput，但它们不会检查日期是否实际存在，而只是检查语法是否正确。请注意，jquery 验证插件在日期属性方面存在问题。