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

时间:2019-05-30 20:55:54

标签: html

尝试让以下正则表达式工作时,我有些困惑

<!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
您可以在pattern属性中使用的输入正则表达式是否存在已发布的限制?

2 个答案:

答案 0 :(得分:0)

简化的正则表达式似乎可以解决问题:\$\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">

这不是完美的,但您明白了。

答案 1 :(得分:0)

谢谢。那把我带到了我需要去的地方。这是我最后的正则表达式:

   ^\$[1-9]\d{0,2}((,\d{3})*|\d*)$

带或不带逗号的支持,即$ 10,000有效,$ 10,000也是如此