时间戳

首页 > 解决方案 > HTML5 输入模式属性 - 正则表达式失败

html - HTML5 输入模式属性 - 正则表达式失败

问题描述

我试图让以下正则表达式工作有点难过

<!DOCTYPE html>
<html>
<body>

<form action="/....php">
  Amount: <input type="text" name="amount" pattern="^\$(\d{1,3}(\,\d{3})*|(\d+))(^\.\d{2})?$" title="Please enter as $XXX,XXX no decimal">
  <input type="submit">
</form>



</body>
</html>

我也尝试删除前导胡萝卜和尾随美元，因为我知道这些是隐含的，但它仍然无法验证输入的数字是 $XXX,XXX 形式，没有小数。其他正则表达式解析器工作正常并验证正则表达式应该工作：https
: //regex101.com/r/BZKMK4/1 您可以在模式属性中使用的输入正则表达式是否存在已发布的限制？

标签： html

解决方案

简化的正则表达式似乎可以解决问题：\$\d{1,3}(,\d{1,3})*

无需专门用 否定小数(^\.\d{2})?- 如果输入小数，此处不包含任何内容将使该字段无效，因为首先不允许使用点。我认为这就是问题所在，因为 JS 正则表达式不支持此功能，并且您的链接指定了 PHP 样式的正则表达式，而不是 JS

input:invalid { 
  border: 2px solid red;
}
<label for="input-amount">Amount</label>
<input type="text"
       id="input-amount"
       pattern="\$\d{1,3}(,\d{1,3})*"
       placeholder="$XXX,XXX">

另外，来自 UI 方面的一个小建议，没有必要让人们输入$符号，只需将它放在输入之外的旁边，这样它就可以隐含并且所有人都需要担心的是数字。

现在你$单独输入，这是一个无效的字段，这不是一个很好的体验。这是我建议的更改：

.prefix,
input {
  border: 2px solid #CCC;
  font-size: 14px;
  padding: 1px;
}

.prefix {
  display: inline-block;
  border-right-width: 0;
}

input {
  border-left-width: 0;
}

input:invalid { 
  border-color: red;
}
<label for="input-amount">Amount</label>
<span class="prefix">$</span><input type="text"
       id="input-amount"
       pattern="\d{1,3}(,\d{1,3})*"
       placeholder="XXX,XXX">

它并不完美，但你明白了。

推荐阅读