react-hook-form 为什么数字输入类型会忽略 maxLength？

Question

我正在使用react-hook-form创建一个4位数字的输入，这不会让用户输入字母或字符，但它会忽略

maxLength

值。我可以获得仅允许数字的输入，但无法限制长度。

这是我的输入：

     <input
          id="fourNumbers"
          required
          type="number"
          name="fourNumbers"
          ref={register({ required: true, pattern: /[0-9]{4}/ })}
          placeholder="0000"
          maxLength="4"
          minLength="4"
        />

Answer 1

我有一个简单的解决方案：

<input 
   onInput={(e) => {
   if (e.target.value.length > e.target.maxLength)
   e.target.value = e.target.value.slice(0,e.target.maxLength);
}}
    type = "number"
    maxLength = {6}
 />

Answer 2

嘿，在我的情况下，我遇到了和你一样的问题，将你的类型编号更改为键入 tel ，我不知道为什么react-hook-form似乎只忽略类型编号，但键入文本、电话等，而不忽略 maxLength/minLength

<input type="number" maxLength={10} />

到

<input type="tel" maxLength={10} />

Answer 3

除了 maxLength 之外，并且您希望限制用户只能包含数值，您还可以将输入组件放入受控组件中，并具有一个 on Change 处理程序，如下所示：

onChange={(e: any) => onChange(e.target.value.replace(/\D/g, ""))}

Answer 4

取自https://stackoverflow.com/a/9555196/1772933

对 type="number" 的输入使用 max 属性。它将指定您可以插入的最大可能数字

  <input type="number" max="9999" />

如果您同时添加最大值和最小值，您可以指定允许值的范围：

  <input type="number" min="1000" max="9999" />

Answer 5

尝试在寄存器中使用它，如下所示：

<input 
     ref={register({ required: true, pattern: /[0-9]{4}/, minLength: 4, 
                                                     maxLength: 4 })}
/>

并且可能会显示错误。

Answer 6

该道具似乎没有记录，但您可以通过使用 useForm 上的progressive: true 标志来启用将本机验证道具传递到输入元素。

如果只是验证，它应该说 maxLength 输入已验证或类似的内容。

仅根据 mode 属性执行验证，默认为 onSubmit。这意味着表单提交时会出现您预期的验证错误。如果您需要在 onChange 时进行验证，请考虑使用模式：“onChange”。

const { register, reset, handleSubmit, formState: {isValid, errors} } = useForm<MyForm>({ mode: "onChange", progressive: true});