先生と生徒の会話形式で理解しよう

生徒

「JavaScriptで入力されたデータが正しいか確認する方法ってありますか？」

先生

「あります。正規表現を使うと、メールアドレスや電話番号、パスワードなどの形式を簡単にチェックできます。」

生徒

「正規表現って難しそうですが、具体的な例を教えてもらえますか？」

先生

「もちろんです。今回はJavaScriptの正規表現を使った代表的なバリデーション例をまとめて紹介します。」

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. 電話番号のバリデーション

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


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. パスワードのバリデーション

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


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. 郵便番号のバリデーション

日本の郵便番号は、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のバリデーション

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

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