在HTML输入值的最后位置匹配几个字符之一

Question

问题：

我将以下代码作为表单的一部分。

<input type="text" pattern="[0|3|7]+$" title="Value must end in either 0, 3 or 7" required>

尝试提交表单时，只有在输入值以0，3或7结尾时，表单才应正确提交。

当前，它不能按预期方式工作，只会匹配以下值：

• 0
• 3
• 7

如果输入中还有其他字符，则该字符将不匹配。

示例/演示：

演示：http://jsfiddle.net/9of0w2cm/

正则表达式工作示例：https://regexr.com/3sii4

应匹配的示例：

• 1.0
• 1.3
• 7.3
• 8.7

不应匹配的示例：

• 1.1
• 1.5
• 7.9
• 8.2

是什么导致正则表达式与预期结果不符？

Answer 1

pattern在默认情况下已经锚定，因此[0|3|7]+$从开头到行尾将匹配037或管道。

您可以使用：

(?:[0-9]\.)*[037]

说明

• (?:[0-9]\.)*在一个非捕获组中重复一个数字，然后重复零次或多次。
• [037]使用character class匹配0、3或7

要匹配点前的一位或多位数字和点后的一位或多位数字，您可以使用[0-9]+\.[0-9]*[037]。

要匹配一位，点和一位，请使用[0-9]\.[037]

<form id="" name="">
  <input type="text" pattern="(?:[0-9]\.)*[037]" title="Value must end in either 0, 3 or 7" required>
  <input type="submit" name="submit">
</form>