javascript - 用于验证整数或带两位小数的 float 的正则表达式

Question

我愿意得到一个 regexp 以允许下面的价格格式(这是一个表单中的string)

允许

• (任何不带小数的价格。可以是 [0-9] 1 次或多次)
• ,#(任何带一位小数的价格)
• ,##(带两位小数的任何价格)

不允许

• 任何其他...例如:
• 5,555...(3 个 decmail 或更长)
• 任何包含超过 1 个逗号的字符串
• 任何包含不是数字的字符的字符串
• 等

到目前为止我得到了这个:

/^[0-9]+(,[0-9][0-9]?)?$/

这似乎是有效的。但它真的如我所愿吗？

const priceRegex = /^[0-9]+(,[0-9][0-9]?)?$/;

const span1 = document.getElementById('span1');
const span2 = document.getElementById('span2');
const span3 = document.getElementById('span3');
const span4 = document.getElementById('span4');
const span5 = document.getElementById('span5');
const span6 = document.getElementById('span6');
const span7 = document.getElementById('span7');
const span8 = document.getElementById('span8');
const span9 = document.getElementById('span9');
const span10 = document.getElementById('span10');
const span11 = document.getElementById('span11');
const span12 = document.getElementById('span12');
const span13 = document.getElementById('span13');

span1.innerHTML = priceRegex.test('5') ? ' IS VALID' : ' IS NOT VALID';
span2.innerHTML = priceRegex.test('5,5') ? ' IS VALID' : ' IS NOT VALID';
span3.innerHTML = priceRegex.test('5,55') ? ' IS VALID' : ' IS NOT VALID';

span4.innerHTML = priceRegex.test('5,') ? ' IS VALID' : ' IS NOT VALID';
span5.innerHTML = priceRegex.test('5,555') ? ' IS VALID' : ' IS NOT VALID';
span6.innerHTML = priceRegex.test('5,5555') ? ' IS VALID' : ' IS NOT VALID';

span7.innerHTML = priceRegex.test('a') ? ' IS VALID' : ' IS NOT VALID';
span8.innerHTML = priceRegex.test('5a') ? ' IS VALID' : ' IS NOT VALID';
span9.innerHTML = priceRegex.test('a5') ? ' IS VALID' : ' IS NOT VALID';

span10.innerHTML = priceRegex.test('a,5') ? ' IS VALID' : ' IS NOT VALID';
span11.innerHTML = priceRegex.test('5,a') ? ' IS VALID' : ' IS NOT VALID';
span12.innerHTML = priceRegex.test('a5,5') ? ' IS VALID' : ' IS NOT VALID';
span13.innerHTML = priceRegex.test('5a,5') ? ' IS VALID' : ' IS NOT VALID';

div {
  color: black;
}

span {
  color: blue;
}

.notValid {
  color: red;
}

<div>5<span id="span1"></span><div>
<div>5,5<span id="span2"></span></div>
<div>5,55<span id="span3"></span></div>

<br/>

<div>5,<span id="span4" class="notValid"></span><div>
<div>5,555<span id="span5" class="notValid"></span></div>
<div>5,5555<span id="span6" class="notValid"></span></div>

<div>a<span id="span7" class="notValid"></span></div>
<div>5a<span id="span8" class="notValid"></span></div>
<div>a5<span id="span9" class="notValid"></span></div>
 
<div>a,5<span id="span10" class="notValid"></span></div>
<div>5,a<span id="span11" class="notValid"></span></div>
<div>a5,5<span id="span12" class="notValid"></span></div>
<div>5a,5<span id="span13" class="notValid"></span></div>

Answer 1

在这里，我们可能会从两个简单的表达式开始，然后用逻辑或将它们连接起来，可能类似于:

^[0-9]+$|^[0-9]+,[0-9]{1,2}$

DEMO

测试

const regex = /^[0-9]+$|^[0-9]+,[0-9]{1,2}$/gm;
const str = `5
5,5
5,55

5,
5,555
5,5555
a
5a
a5
a,5
5,a
a5,5
5a,5`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

正则表达式电路

jex.im可视化正则表达式:

正则表达式

如果不需要此表达式，可以在 regex101.com 中对其进行修改/更改.