React Hook Form仅允许数字输入问题：如何实现纯数字输入限制？

你当前使用的pattern: /[0-9]/规则只会检查输入中存在数字字符，而非要求全部字符都是数字，所以像ms3这类包含数字的非纯数字输入会被通过。要实现仅接受纯数字输入，需要修改正则表达式，确保整个输入字符串从开头到结尾都由数字组成：

修改正则规则 #

将pattern改为/^\d+$/（\d是[0-9]的简写），或者/^[0-9]+$/，其中：

• ^ 匹配字符串的起始位置
• $ 匹配字符串的结束位置
• + 表示至少有一个数字字符（因你的字段设为required，用+可避免空值通过正则校验）

修改后的完整代码 #

<td>
    <input
        type="text"
        className="form-control text-uppercase"
        id="date_of_delivery"
        name="date_of_delivery"
        defaultValue={offer.date_of_delivery}
        {...register("date_of_delivery", {
            required: true,
            pattern: /^\d+$/,
        })}
    />
    {errors?.date_of_delivery?.type === "required" &&
        <p>Bu alan zorunludur.</p>}
    {errors?.date_of_delivery?.type === "pattern" && <p>Lütfen sayısal bir değer giriniz.</p>}
</td>

额外优化（可选） #

如果希望用户在输入时就无法输入非数字字符，可以添加onKeyPress事件过滤：

<input
    // 其他属性保持不变
    onKeyPress={(e) => {
        if (!/[0-9]/.test(e.key)) {
            e.preventDefault();
        }
    }}
/>

这样用户无法输入非数字按键，从源头避免不符合要求的输入。

内容的提问来源于stack exchange，提问作者Melike Kozan