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

我一直在开发react表单，我需要限制用户使用特殊字符，并且只允许使用以下字符：[a-Za-z]

我已经尝试了下面的代码，但我仍然能够在其中插入特殊字符，例如：'♥', '>', '+', 等等

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

导出默认组件（道具）{
...
返回(
)
}

我把它作为道具发送到我的表格中：

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

---

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

input

上的

pattern

属性只适用于普通HTML表单中的

submit

如果您使用的是

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表单文档。此外，对于简单表单用例，您可以尝试使用库。

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

{formState.errors.email？.message&&(
)}

您需要一个onChange事件来使用pattern.test函数验证模式。您可以查看表单和one的完整表单验证演示。希望其中任何一个都能为您提供解决问题的线索。您可以尝试

pattern=“^[a-zA-Z]+$”

这只适用于提交，但我需要限制用户在提交前输入特殊字符。我不知道如何在react hook表单中最好地使用它，但将字段转换为受控组件和使用html5验证api可能会起作用。请检查。firstName字段受模式限制。我将在cksform库中添加此用例.