JavaScriptの正規表現でメールアドレス・電話番号などのバリデーション・チェックパターンまとめ

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptの正規表現でメールアドレス・電話番号などのバリデーション・チェックする方法についてまとめて解説していきます。

1 正規表現でバリデーション・チェックパターンまとめ
2 関連記事
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 Twitterやってます！Follow Me！
6 最近の投稿

正規表現でバリデーション・チェックパターンまとめ

それでは、JavaScriptの正規表現でメールアドレス・電話番号などのバリデーション・チェックパターンを、それぞれ紹介していきます。

Emailのバリデーション・チェックパターン

let email = 'robotama@gmail.com';
let no_email = 'robotama@gmail.';

const validateEmail = (value) => {
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      return 'Emailを入力してください';
  }
  return 'Email-OK';
};

console.log(validateEmail(email)); // Email-OK
console.log(validateEmail(no_email)); // Emailを入力してください

PhoneNumberのバリデーション・チェックパターン

let phoneNum = '080-1234-0123';
let no_phoneNum = '012345';

//　PhoneNumber: ハイフンあり
const validatePhoneNumber = (value) => {
  if (!(/^0\d{1,4}-\d{1,4}-\d{3,4}$/).test(value)) {
    return 'PhoneNumberを入力してください';
  }
  return 'PhoneNumber-OK';
};

console.log(validatePhoneNumber(phoneNum)); // PhoneNumber-OK
console.log(validatePhoneNumber(no_phoneNum)); // PhoneNumberを入力してください

PostNumberのバリデーション・チェックパターン

let postNum = '376-0025';
let no_postNum = '12345';

// PostNumber: ハイフンあり
const validatePostNumber = (value) => {
  if (!(/^\d{3}-\d{4}$/).test(value)) {
    return 'PostNumberを入力してください';
  }
  return 'PostNumber-OK';
};

console.log(validatePostNumber(postNum)); // PostNumber-OK
console.log(validatePostNumber(no_postNum)); // PostNumberを入力してください