☰

react-hook-form によるフォームパターン検証 質問する

tag-icon • tag-icon reactjs forms react-hooks react-props react-forms
react-hook-form によるフォームパターン検証 質問する

私はReactフォームに取り組んでおり、ユーザーが特殊文字を入力できるように制限し、[A-Za-z]のみを許可する必要があります。

以下のコードを試しましたが、「♥」、「>」、「+」などの特殊文字を挿入することはできます。

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

そして、私はそれをフォームの小道具として送信しています:

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

何が足りないのか、何が問題なのかを教えていただけますか? よろしくお願いします。

ベストアンサー1

属性patternは、標準の HTML フォームでinputのみ機能します。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 のドキュメントを確認してください。

おすすめ記事