React Hook Form を使って入力チェックをするとき、正規表現を使うところでつまづきました。

特に「英字だけを入力させたい」という条件で、正規表現の意味が理解できず混乱…。
この記事では、私がハマった正規表現 /^[a-zA-Z]+$/ を例に、どんな意味なのか整理します。

フォームのバリデーションに以下のコードを書きました：

<Input
  {...register("userId", {
    required: "IDは必須です",
    pattern: {
      value: /^[a-zA-Z]+$/,
      message: "英字のみ",
    },
  })}
/>

一見うまく動くように見えましたが、

数字を入れるとエラー

記号を入れるとエラー

でも「なんでそうなるのか？」が分からない
という状態に。

/^[a-zA-Z]+$/ の1つ1つの意味を分解して考えてみます。

つまりこの正規表現は：

「最初から最後まで全部が半角英字で構成されていないとエラー」