html5 模式匹配浮点数和/或百分比

Question

我正在处理表单验证并希望使用模式属性来验证输入字段。该字段具有以下条件：

1. 它必须是一个数字（整数或浮点数）
2. 最多允许 2 个小数点（例如：100.24）
3. 只允许一个点（例如：100.25.35 无效）
4. 可能以百分号 (%) 结尾（但并非总是必要）

那么确切的模式应该是什么RegEx。我正在尝试使用以下代码，但如何实现百分比条件？

<input type="text" 
       pattern="[0-9]+([\.][0-9]{0,2})?" 
       title="This must be a number with up to 2 decimal places and/or %">

Answer 1

你快到了。添加%?到您的模式：

input:invalid {
  color: red;
}

<input type="text"
       pattern="[0-9]+(\.[0-9]{1,2})?%?"
       title="This must be a number with up to 2 decimal places and/or %">