JavaScriptの正規表現を使ったバリデーション例まとめ

1. メールアドレスのバリデーション

1. メールアドレスのバリデーション

メールアドレスの形式を確認するには、@やドメインの部分を正規表現でチェックします。

function validateEmail(email) {
  const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return regex.test(email);
}
console.log(validateEmail("test@example.com")); // true
console.log(validateEmail("test@@example.com")); // false

ここでは、英数字やドット、ハイフンなどを許可し、@とドメイン部分の形式を確認しています。

2. 電話番号のバリデーション

2. 電話番号のバリデーション

日本の電話番号をチェックする場合、数字とハイフンの形式を確認できます。

function validatePhone(phone) {
  const regex = /^\d{2,4}-\d{2,4}-\d{4}$/;
  return regex.test(phone);
}
console.log(validatePhone("03-1234-5678")); // true
console.log(validatePhone("0312345678"));   // false

正規表現で桁数やハイフンの位置を指定して、正しい形式だけを通すことができます。

3. パスワードのバリデーション

3. パスワードのバリデーション

安全なパスワードには、英大文字・小文字・数字・特殊文字を含めることが望ましいです。

function validatePassword(password) {
  const regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/;
  return regex.test(password);
}
console.log(validatePassword("Abc123!@")); // true
console.log(validatePassword("abc123"));   // false

この正規表現では、先読みを使ってそれぞれの条件を確認しています。8文字以上であることもチェックしています。

4. 郵便番号のバリデーション

4. 郵便番号のバリデーション

日本の郵便番号は、3桁-4桁の形式が一般的です。

function validateZip(zip) {
  const regex = /^\d{3}-\d{4}$/;
  return regex.test(zip);
}
console.log(validateZip("123-4567")); // true
console.log(validateZip("1234567"));  // false

ハイフンの有無や桁数を正規表現で制御できます。

5. URLのバリデーション

5. URLのバリデーション

WebサイトのURLをチェックする場合、httpやhttpsを含む形式を確認します。

function validateURL(url) {
  const regex = /^https?:\/\/[^\s/$.?#].[^\s]*$/;
  return regex.test(url);
}
console.log(validateURL("https://example.com")); // true
console.log(validateURL("ftp://example.com"));   // false

正規表現で先頭のスキームを確認し、空白が含まれないかもチェックできます。

6. バリデーションをまとめて活用するポイント

6. バリデーションをまとめて活用するポイント

• 正規表現を使うことで入力形式のチェックが簡単にできる
• 複雑な条件でも先読み・後読みを使うと実用的
• メールアドレス、電話番号、パスワード、郵便番号、URLなど共通のパターンをまとめて使うと便利
• 初心者はまず簡単な形式から試すことが大切

JavaScriptの正規表現を覚えると、フォーム入力のバリデーションやデータ検証が効率的に行えます。繰り返し練習して慣れることが上達の近道です。