Question

我想限制我的习惯＆＃39;出生日期＆＃39;形式领域。仅接受实际日期 - 即。 日= 1 - 31月= 1-12 。我尝试过使用max属性，但它不起作用。 （不确定是否因为我也使用了maxlength？）

<div id="date2" class="datefield">
    <input id="day" name="BirthDate" type="BirthDate" maxlength="2" placeholder="DD" style="width:10%;" max="31" required /> /
    <input id="month" name="BirthDate" type="BirthDate" maxlength="2" placeholder="MM" style="width:10%;" max="12" required /> /
    <input id="year" name="BirthDate" type="BirthDate" maxlength="4" placeholder="YYYY" style="width:18%;" required />
</div>

有什么建议吗？

对不起！我不能用下拉菜单！由于API。

另外，我不能简单地使用type="date"（我希望）因为它在自定义设计/样式上显示效果不佳。

Answer 1

只需将输入类型更改为＆＃34; number＆＃34;并设置最小值和最大值。请参阅此fiddle。

<div id="date2" class="datefield">
    <input id="day" name="BirthDate" type="number" placeholder="DD" style="width:10%;" min="1" max="31" required /> /
    <input id="month" name="BirthDate" type="number" placeholder="MM" style="width:10%;" min="1" max="12" required /> /
    <input id="year" name="BirthDate" type="number" maxlength="4" placeholder="YYYY" style="width:18%;" required />
</div>

Answer 2

实际上，更好的做法是使用日期/月/年的下拉菜单而不是自由形式的输入字段 - 它还可以避免在提交表单时验证输入。您也不会丢失任何功能，因为下拉列表也接受数字输入（如果用户在此字段中单击或选项卡并使用数字键输入日期/月份，列表将简单地跳转到下拉列表中的输入位置 - 与普通输入字段没有区别）

当然，如果您坚持使用自由格式输入字段，则可以使用输入类型编号<input type="number" name="quantity" min="1" max="5">，或者您可以使用为此目的而创建的许多可用JavaScript插件之一。只需谷歌搜索'datepicker插件'。

还有字段类型<input type="date" />，但在旧版浏览器和某些移动浏览器中不支持。

Answer 3

由于您使用＆＃34; HTML5＆＃34;标记了您的问题，我建议您使用<input type="date" name="bday">，如下所述：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date

限制出生日期＆＃39;表格字段数字输入

3 个答案: