Thuộc tính pattern của HTML DOM Input Email

Thuộc tính pattern của đối tượng Input Email đặt hoặc lấy biểu thức chính quy (RegExp) để kiểm tra định dạng email nhập vào. Trình duyệt sẽ validate dựa trên pattern này khi submit form.

Cú pháp

Lấy pattern (RegExp)

inputEmailObject.pattern

Thiết lập pattern

inputEmailObject.pattern = 'RegExp'

Ví dụ minh họa

Yêu cầu email phải thuộc miền @MNC.com:

<!DOCTYPE html>
<html>
<head>
<title>Input Email pattern</title>
<style>
  form { width:70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin:5px; }
  input[type="submit"] { border-radius: 10px; }
</style>
</head>
<body>
<form onsubmit="checkPattern()">
  <fieldset>
    <legend>Email-pattern</legend>
    <label for="EmailSelect">Email nhân viên: <input type="email" id="EmailSelect" pattern="[a-zA-Z0-9]+@MNC\.com" title="Định dạng: tên@MNC.com"> </label>
    <input type="submit" value="Gửi">
    <div id="divDisplay"></div>
  </fieldset>
</form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var inputEmail = document.getElementById("EmailSelect");
  divDisplay.textContent = 'Pattern: ' + inputEmail.pattern;
  function checkPattern() {
    if(inputEmail.value !== ''){
      var User = inputEmail.value.split("@")[0];
      alert("Chào mừng " + User);
    }
  }
</script>
</body>
</html>

Kết quả

Nếu submit với email không khớp pattern (ví dụ: abc@gmail.com), trình duyệt chặn và hiển thị tooltip "Định dạng: tên@MNC.com". Nếu khớp (xyz@MNC.com), alert chào mừng tên người dùng.