Cách validate địa chỉ email trong Javascript?

 Làm thế nào để ràng buộc địa chỉ email hợp lệ khi người dùng nhập vào đơn giản và dễ hiểu nhất?

Môi trường

Javascript

Giải pháp

Ở đây, mình sẽ hướng dẫn các bạn sử dụng regex (regular expressions) trong Javascript để ràng buộc. Và dưới đây là code:

function validateEmail(email) {
    const re = /^(([^<>()\[\]\\.,;:\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,}))$/;
    return re.test(String(email).toLowerCase());
}

Sau đây là một ví dụ về regex cho phép sử dụng unicode:

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

Nhưng hãy nhớ rằng không nên chỉ dựa vào xác thực JavaScript. JavaScript có thể dễ dàng bị vô hiệu hóa. Điều này cũng nên được xác nhận ở phía máy chủ.

Đây là một ví dụ về hoạt động ở trên:

function validateEmail(email) {
  const re = /^(([^<>()[\]\\.,;:\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,}))$/;
  return re.test(email);
}

function 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 not valid :(");
    $result.css("color", "red");
  }
  return false;
}

$("#validate").on("click", validate);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' id='validate'>Validate!</button>
</form>

<h2 id='result'></h2>

Từ khóa

How to validate an email address in JavaScript,

How to validate an email address in JavaScript using regular expressions