คุณสมบัติ pattern ของ HTML DOM Input Email

คุณสมบัติ pattern ของ HTML DOM Input Email ใช้สำหรับดึงหรือกำหนดนิพจน์ปกติ (regular expression) เพื่อตรวจสอบรูปแบบอีเมลที่อนุญาตให้กรอกได้ ค่าของ pattern จะถูกตรวจสอบกับข้อความที่พิมพ์ในช่องอีเมล

ไวยากรณ์ (Syntax)

การดึงค่า (คืนค่า regular expression)

inputEmailObject.pattern

การกำหนดค่า pattern

inputEmailObject.pattern = 'RegExp'

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างกำหนด pattern ให้รับเฉพาะอีเมลที่ลงท้ายด้วย @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">Employee Email : <input type="email" id="EmailSelect" pattern="[a-zA-z0-9]+@+MNC.com" title="[a-zA-z0-9]+@+MNC.com"> </label>
    <input type="submit" value="Submit">
    <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("Welcome " + User);
    }
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนคลิกปุ่ม: แสดง pattern ที่ตั้งไว้ กรอกอีเมลไม่ตรง pattern (เช่น user@gmail.com): บราวเซอร์จะแสดงข้อความผิดพลาด ตาม title attribute กรอกอีเมลตรง pattern (เช่น user@MNC.com): ส่งฟอร์มสำเร็จ แสดง alert "Welcome user"

หมายเหตุ: แอตทริบิวต์ title จะแสดงเป็นข้อความแจ้งเตือนเมื่อกรอกไม่ตรง pattern