自定义输入增量：如何自定义数字范围

Question

所以我有一些带有html输入验证的表格，如：

<input type="number" min="1" max="50" ...

现在我需要添加一些自定义范围，例如1-40,45和＆amp; 50。 以前我刚刚编写了javascript来处理这个问题，但我宁愿只使用html输入验证。有没有办法实现这个，除了用javascript / jquery检查？

我想我可以使用<input pattern="regularExp" ... 这也可以是一个选项，但我没有经验......

由于

Answer 1

除了min和max之外，HTML5还为您提供了step属性。例如，<input type="number" min="1" max="50" step="10">为您提供可接受的值1,11,21,31和41.除了这三个属性之外，还有JavaScript。

如果您确实不想使用JavaScript，则可以尝试使用pattern元素的input属性的正则表达式。请注意，pattern属性要求您的输入类型设置为text而不是number并包含title that is used to describe the pattern。另请注意，正则表达式用于逐字符解析文本，这使得处理超过一位数的数字变得困难。

这是一个允许1-40,45和50的示例（但如果数字前面有零，则不行）：

<input type="text" name="example-number"
 pattern="(^40$)|(^45$)|(^50$)|(^1[0-9]$)|(^2[0-9]$)|(^3[0-9]$)|(^[1-9]$)" 
 title="A number in the range of 1-40, 45, or 50">

Plenty of people建议使用代码（例如JavaScript）代替正则表达式来验证数值范围，这可能就是entire site dedicated to input patterns没有列出任何数值范围的原因。