尝试让以下正则表达式工作时,我有些困惑
<!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属性中使用的输入正则表达式是否存在已发布的限制?
答案 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也是如此