使用 react-hook-form 進行表單模式驗證

Question

我一直在研究一個反應表單，我需要限制用戶放置特殊字符並只允許這些字符：[A-Za-z]。

我已經嘗試了下面的代碼，但我仍然可以在特殊字符中插入，例如：'♥'、'>'、'+'等。

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

我將它作為道具發送到我的表單：

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

你能讓我知道我錯過了什么並指出可能是什么問題嗎？ 非常感謝。

Answer 1

input上的pattern屬性僅適用於 vanilla HTML forms 中的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庫。

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

假設您的輸入是名稱，那么您可以排除這些特殊字符，使用每個 function 模式，基本上檢查每個模式是否為真，否則拋出一個錯誤消息，您可以根據需要覆蓋

 <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 模式，