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

【问题标题】：Form pattern validation with react-hook-form使用 react-hook-form 进行表单模式验证
【发布时间】：2020-07-20 17:17:04
【问题描述】：

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

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

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

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

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

您能否让我知道我缺少什么并指出可能是什么问题？非常感谢。

【问题讨论】：

您需要一个 onChange 事件来使用 pattern.test 函数验证模式。
您可以查看MaterialUI-styled 表单和based on SemanticUI 表单验证的完整演示。希望其中任何一个都能为您提供有关如何解决问题的线索。
你可以试试pattern="^[a-zA-Z]+$"

标签： reactjs forms react-hooks react-props react-forms

【解决方案1】：

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

【讨论】：

这仅适用于提交，但我需要限制用户输入特殊字符。
我不知道如何将它与 react-hook-form 最好地结合使用，但是将字段转换为受控组件并使用 html5 验证 api 可能会起作用。请检查codesandbox.io/s/react-hook-form-v6-seterror-swr80。 firstName 字段受模式限制。我将在 cksform 库中添加这个用例。

【解决方案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} />
)}

【讨论】：

如何在 React Native 组件上实现这个功能请帮忙
出现错误：找不到名称'FormError'

【解决方案3】：

假设您的输入是名称，那么您可以排除这些特殊字符，使用模式上的每个函数，基本上检查每个模式是否为真，否则会抛出错误消息，您可以根据需要覆盖该消息

 <label htmlFor="name">Name</label>
  <input
    type="text"
    name="name"
    id="name"
    ref={register({
    required: "required",
    maxLength: {
    value: 15,
          message: "must be max 15 chars",
        },
        validate: (value) => {
          return (
            [/[a-z]/, /[A-Z]/, /[0-9]/].every((pattern) =>
              pattern.test(value)
            ) || "cannot special chars, only lower, upper, number"
          );
        },
      })}
    />
    {errors.email ? <div>{errors.email.message}</div> : null}

或者例如，如果您的字段是密码并且您希望用户至少包含一个特殊字符，那么它将是这样的：

<label htmlFor="password">Password</label>
    <input
      type="password"
      name="password"
      id="password"
      ref={register({
        required: "required",
        minLength: {
          value: 8,
          message: "must be 8 chars",
        },
        validate: (value) => {
          return (
            [/[a-z]/, /[A-Z]/, /[0-9]/, /[^a-zA-Z0-9]/].every((pattern) =>
              pattern.test(value)
            ) || "must include lower, upper, number, and special chars"
          );
        },
      })}
    />
    {errors.password ? <div>{errors.password.message}</div> : null}
  </div>

【讨论】：