Question

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

<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。 / p>

编辑：重置值比限制范围更重要。谢谢

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，而不是{ {1}}。无论如何，您都需要覆盖处理程序中所有可能的输入，并以用户友好的方式进行响应。

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

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

如何使用Regex来限制和重置<input type =“ number” />？

1 个答案: