首頁 >web前端 >js教程 >如何使用 JavaScript 正規表示式驗證電子郵件地址?

如何使用 JavaScript 正規表示式驗證電子郵件地址?

Linda Hamilton
Linda Hamilton原創
2024-12-26 10:40:11792瀏覽

How Can I Validate Email Addresses Using JavaScript Regular Expressions?

在JavaScript 中使用正規表示式進行電子郵件驗證

為了防止錯誤的用戶輸入,JavaScript 允許在嘗試發送電子郵件地址之前對其進行驗證到伺服器或嘗試向他們發送電子郵件。

在 JavaScript 中驗證電子郵件地址的最可靠方法就是使用正規表示式。以下正規表示式接受ASCII 字元:

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 電子郵件驗證的範例:

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);

在此範例中,使用按鈕觸發驗證並顯示結果。

以上是如何使用 JavaScript 正規表示式驗證電子郵件地址?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn