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

Question

我一直在研究一种反应形式，我需要限制用户输入特殊字符并只允许这些字符：[A-Za-z]。

我已经尝试了下面的代码，但我仍然能够插入特殊字符，例如：“?”、“>”、“+”等。

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

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

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

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

Answer 1

如果您使用的是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} />
)}

Answer 2

在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库。