如何限制在使用Regex的反应中？

Question

我有一个类型为的输入，它可以修改购物车中的物品数量。代码如下：

<input 
       type="number" 
       value={quantity} 
       onChange={ (e)=> {
            const regEx= /^([1-9]{1,2})$/;
            if ( !e.target.value || regEx.test(e.target.value)) {
                 dispatch(adjustQuantity(id, e.target.value));
               }
            }}
       className='value' />

如您所见，我正在使用正则表达式，并且我希望以只能接受数字1-20的方式限制输入。问题在于它也删除了非前导零，并且数字可能大于20。

我还需要确保用户不能将输入留空，就像用户没有输入数字或只是将其留空一样，该值需要在3秒后自动重置为1。

谢谢

Answer 1

您可以使用以下正则表达式匹配数字1至20：

/^([1-9]|1\d|20)$/

但是，我建议您解析数字并进行常规比较，因为这种正则表达式难以阅读且难以维护，更不用说在执行过程中进行配置了。

const value = Number(e.target.value);
const notTooSmall = value >= 1;
const notTooBig = value <= 20;
const inRange = notTooSmall && notTooBig;

这可以让您以更加用户友好的方式钳制值。例如。如果用户复制粘贴2019，您会发现它太大了，可以放20个。

注：使用Number构造函数实际上与parseInt相同，只是空字符串''将产生0，而不是NaN。无论如何，您都需要覆盖处理程序中所有可能的输入，并以用户友好的方式进行响应。

但是–您可能根本不需要这样做。

HTML5输入具有min和max属性，它们指示浏览器以最佳方式进行处理。这可能在过时的浏览器中不起作用，但是无论如何您都不能依赖浏览器端验证-只是为了使用户更容易。