今天我来写个文章，说说怎么用HTML的pattern属性来限制输入框只能输入一些特定的数字组合。这个东西其实挺有用的，特别是你不想让别人乱输东西的时候，白嫖。。

什么是pattern属性

我的看法是... pattern属性是HTML5里面的一个功能，可以让我们在用户提交表单之前就检查他输入的东西是不是我们想要的那种格式。比如我们可以用它来让输入框只能输入0到23之间的数字， 然后加个逗号，再加00、25、50或者75这样的数字组合。这样就能保证输入的内容是我们需要的那种格式。

最后强调一点。 这个功能特别适合用来做时间相关的输入，比如小时和分钟的格式。我们可以通过正则表达式来定义允许的输入格式，这样用户如果输错了浏览器就会提醒他。

先说说我们要知道， pattern属性是HTML5里面的一个新功能，它可以让我们在前端就控制用户输入的内容。比如我们想让用户只能输入0到23之间的数字， 与君共勉。 然后是逗号，再然后是00、25、50或75这几个数字。我们就可以用下面这个正则表达式：

^,$

这个正则表达式的意思是：

• ^表示前面的数字只能是0到23之间。
• 表示后面的数字只能是00、25、50或75。

这样， 只要用户输入的不是这些数字，浏览器就会阻止提交，并提示用户输入错误。

代码示例

下面是一个例子， 展示怎么用pattern属性来限制输入框只接受特定的数字组合：

上面这段代码的意思是我们用pattern属性来限制输入框只能输入0到23之间的数字，然后是00、25、50或75这几个数字。如果用户输入的不是这几个数字，就会提示错误，改进一下。。

注意事项

• 只能包含三个字母的输入字段
• pattern属性只在表单提交时验证输入内容
• pattern属性只对input元素有效

站在你的角度想... 这个方法可以确保用户输入的格式是正确的， 比如0-23,00、0-23,25、0-23,50或0-23,75。如果用户输入的不是这几个数字，就会提示错误。

支持的浏览器

Internet Explorer 10、 Firefox、Opera 和 Chrome 都支持pattern属性。 百感交集。 所以大体上现在大部分现代浏览器都支持这个功能。

压力。如果你需要限制用户输入特定的数字组合， 比如0-23,00、0-23,25、0-23,50或0-23,75，那么这个方法就非常适合你。