regex - html5 模式匹配 float 和/或百分比

Question

我正在处理表单验证并想使用 pattern 属性来验证输入字段。该字段具有以下条件:

1. 必须是数字(整数或 float )
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 %">