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

Question

我一直在研究一个反应表单，我需要限制用户放置特殊字符并只允许这些字符：[A-Za-z]。

我已经尝试了下面的代码，但我仍然可以在特殊字符中插入，例如：'♥'、'>'、'+'等。

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

我将它作为道具发送到我的表单：

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

你能让我知道我错过了什么并指出可能是什么问题吗？非常感谢。

Answer 1

patternon 属性input仅适用于普通submitHTML 表单。

如果您使用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库。

Answer 2

如果您使用的是 react-hook-form v7，请使用：

<input
    placeholder="Email"
    {...register('email', {
        required: 'Email is required',
        pattern: {
            value: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: 'Please enter a valid email',
        },
    })}
    type="email"
    required
    className="input"
/>
{formState.errors.email?.message && (
     <FormError errorMessage={formState.errors.email?.message} />
)}