☰

JavaScript でメールアドレスを検証するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript html regex email-validation
JavaScript でメールアドレスを検証するにはどうすればいいですか? 質問する

最も基本的な入力ミスを防ぐために、サーバーに送信したり、サーバーにメールを送信しようとする前に、ユーザー入力がメール アドレスであるかどうかを JavaScript で確認したいと思います。どうすればこれを実現できますか?

ベストアンサー1

使用正規表現おそらく、JavaScript で電子メール アドレスを検証する最良の方法です。JSFiddleで一連のテストを見るから取られたクロム。

const validateEmail = (email) => {
  return String(email)
    .toLowerCase()
    .match(
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    );
};

以下は、Unicode を受け入れる正規表現の例です。

const re =
  /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

JavaScript はクライアントによって簡単に無効にできるため、JavaScript 検証だけに頼るべきではないことに注意してください。さらに、サーバー側で検証することが重要です。

次のコード スニペットは、クライアント側で電子メール アドレスを検証する JavaScript の例です。

const validateEmail = (email) => {
  return email.match(
    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  );
};

const validate = () => {
  const $result = $('#result');
  const email = $('#email').val();
  $result.text('');

  if(validateEmail(email)){
    $result.text(email + ' is valid.');
    $result.css('color', 'green');
  } else{
    $result.text(email + ' is invalid.');
    $result.css('color', 'red');
  }
  return false;
}

$('#email').on('input', validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="email">Enter email address</label>
<input id="email" type="email">

<p id="result"></p>

おすすめ記事