HTML5輸入模式屬性 - 正則表達式失敗
[英]HTML5 input pattern attribute - regex fails
問題描述
我試圖讓以下正則表達式工作有點難過
<!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
您是否可以在模式屬性中使用輸入正則表達式的已發布限制？
2 個解決方案
解決方案1
0 已采納 2019-05-30 21:11:34
簡化的正則表達式似乎可以解決這個問題： \\$\\d{1,3}(,\\d{1,3})*
不需要用(^\\.\\d{2})?專門否定小數(^\\.\\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">
它並不完美，但你明白了。
解決方案2
0 2019-05-31 18:16:03
謝謝。 這讓我成為了我需要的地方。 這是我最后的正則表達式：
^\$[1-9]\d{0,2}((,\d{3})*|\d*)$
支持帶或不帶逗號，即10,000美元有效，10000美元也是如此
用於html5輸入的高級正則表達式模式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.