Validating email addresses

Email ก็เป็นหนึ่งในตัวแปรใหม่ การใช้ตัวแปรชนิดนี้เป็นช่องกรอกข้อมูลจะทำให้ browser รู้ว่าข้อมูลที่ใส่ลงไปนั้น คือ email address แต่จะไม่สามารถรู้ได้ว่าเป็น email ปลอม แต่สิ่งที่ตรวจสอบได้เช่น ต้องไม่มีช่องว่าง, ต้องไม่มี comma ไม่ว่าผู้ใช้จะกดส่งอะไร มันจะต้องมีหน้าตาเหมือน email address การใช้ก็จะเป็นแบบด้านล่าง

<form>
	<input type="email" required /> <br />
	<input type="submit" value="Submit Now!">
</form>

บาง browser จะตรวจดูแค่ว่า มีเครื่องหมาย @ หรือไม่ หรือหลังเครื่องหมาย @ มีอักษรตามมาอย่างน้อย 1 ตัว และตามด้วยจุด

ใน Android, Internet Explorer 9.0 หรือ version ก่อนๆจะยังไม่รองรับการใช้ ตัวแปร email ในการที่จะทำ email validation เราจะต้องทำ work-around ให้กับ browser ถึงจะยุ่งยากแต่เราก็ควรจะนำมาใช้ เพราะถึงแม้ว่า browser ไม่รองรับตัวแปร browser จะประมวลผลเป็น plain text (ข้อความธรรมดา)

การใช้ตัวแปร pattern เพื่อตรวจสอบ email address

อีกทางที่จะ email validation ได้คือ การใช้ตัวแปร pattern จะใช้ regular expression ยึดเป็นหลัก แต่เราจะไม่พูดถึง regular expression ในหัวข้อนี้ (การกำหนดรูปแบบหรือกลุ่มคำ เพื่อเอาไว้ใช้ค้นหาข้อความต่างๆตามที่เราต้องการ)

สิ่งที่ควรรู้ในการใช้ pattern ตรวจสอบ email address คือ จะใช้ pattern แบบไหน ในส่วนของ HTML5 email address regular expression ส่วนมาก pattern จะหน้าตาคล้ายตัวอย่าง (ขอขอบคุณ Gervase Markham) นี่คือตัวอย่างของ pattern

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

จากที่เห็นด้านบน ถึงแม้ว่า pattern จะดูยุ่งยาก แต่มันจะตรวจสอบได้ว่า email นั้นเป็นปกติ ไม่ได้พิมพ์ผิด เช่น janedoe@unknown.com

<form>
	<input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required />
	<br />
	<input type="submit" value="Submit Now!">
</form>

ควรใช้ตัวแปร email หรือ ตัวแปร pattern?

ตัวแปร email และ ตัวแปร pattern ก็มีข้อดีและข้อเสียแตกต่างกัน แต่เราไม่ควรจะใช้ทั้ง 2 ตัวแปรในเวลาเดียวกัน การใช้ ตัวแปร email มีข้อดี คือ มันจะเป็นไปตามหลัก semantic อ่านออกและเข้าใจง่าย ส่วนตัวแปร pattern มีข้อดี คือ สามารถใช้ Polyfill (การทำให้เว็บนั่นสามารถทำงานได้ทุกบราวเซอร์) ง่าย ทำให้เรารองรับความต้องการของผู้ใช้ได้ทั่วถึง

สรุป

• ถ้าจะ email validation ให้ถูกตาม semantic HTML5 จะใช้ type=”email”
• ไม่ใช่ทุก browser จะประมวลผล email validation ใน pattern แบบเดียวกัน
• เราสามารถใช้ ตัวแปร pattern ในการ email validation
• ตัวแปร email มันจะเป็นไปตามหลัก semantic ส่วนตัวแปร pattern จะตรวจสอบได้ดีกว่า
• ตัวแปร pattern สามารถรองรับ using a polyfill ได้