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

Question

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

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

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

我将其作为我的表格的支柱发送：

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

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

Answer 1

pattern

上的

input

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

submit

。

如果您使用

react-hook-form

，它应该在参考中，如下所示：

<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文档。

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} />
)}

Answer 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>

Answer 4

https://regexr.com/

详细文档 RegExp 模式，