reactjs - 使用 react-hook-form 进行表单模式验证

Question

我一直在研究一种 react 形式，我需要限制用户输入特殊字符并只允许这些字符:[A-Za-z]。
我已经尝试了以下代码，但我仍然能够插入特殊字符，例如:'♥'、'>'、'+' 等。

export default Component (props {
  ...
  return (
   <input 
    pattern={props.pattern}
   /> 
  )
}

我将它作为 Prop 发送到我的表单中:

<Component 
pattern="[A-Za-z]+"
/>

你能告诉我我遗漏了什么并指出可能是什么问题吗？非常感谢。

Answer 1

pattern input 上的属性仅适用于 submit在普通的 HTML 表单中。
如果您使用的是 react-hook-form ，它应该在 ref 中，像这样:

<input
    name="email"
    ref={register({
      required: "Required",
      pattern: {
        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
        message: "invalid email address"
      }
    })}
  />

请查看 react-hook-form 文档。此外，对于简单的表单用例，您可以尝试 cksform图书馆。