如何阻止在 React Hook 表单输入中输入 "e" 和“-”字符？

Question

我正在尝试在 react-hook-form 库中设置 phone 数字输入。我将输入类型设置为数字，但它仍然接受“e”和“-”字符。我试图这样阻止它：

<Controller
  name="phone"
  control={control}
  rules={{ required: true }}
  render={({ onChange, value, ref }) => (
    <Input
      ref={ref}
      type="number"
      label="phone"
      onChange={(e) =>
        /[^e]/.test(e.target.value) && onChange(e.target.value)
      }
      val={value}
    />

但它不能正常工作。有什么解决这个问题的建议吗？

Answer 1

如果要防止某些按键被按下，可以在检查失败后抑制keydown事件：

<Input
  onKeyPress={(e) => {
    if (e.key === "e" || e.key === "-") {
      e.preventDefault();
    }
  }}
/>

但是如果您允许所有键但在按下后验证它，您可以像这样使用 pattern 选项：

<Controller
  name="phone"
  control={control}
  rules={{ required: true, pattern: /^\d+$/ }}
  render={(props) => {
    const { onChange, value, ref } = props.field; // v7. use props if you're using v6
    const { error } = props.meta;

    return (
      <Input
        ref={ref}
        type="number"
        label="phone"
        onChange={onChange}
        val={value}
      />
    );
  }}
/>

如何阻止在 React Hook 表单输入中输入 "e" 和“-”字符？

How to block typing "e" and "-" characters in React Hook Form input?

javascript

validation

reactjs

react-hook-form