เช่น การตรวจสอบอีเมลด้วย JavaScript (Regex)

หลายครั้งที่เราจำเป็นต้องตรวจสอบว่ามีการป้อนที่อยู่อีเมลในช่องใดช่องหนึ่งในแบบฟอร์มของเรา อีเมลที่ถูกต้อง. ในบทความนี้ เราจะเรียนรู้วิธีตรวจสอบอีเมลโดยใช้นิพจน์ทั่วไป (หรือที่เรียกว่า regex) ใน JavaScript

นิพจน์ทั่วไป (regex) คืออะไร

นิพจน์ทั่วไปคือลำดับของอักขระที่กำหนดรูปแบบการค้นหา ในกรณีนี้ เราต้องการค้นหารูปแบบที่แสดงถึงที่อยู่อีเมลที่ถูกต้อง

นิพจน์ทั่วไปเป็นเครื่องมือที่ทรงพลังและยืดหยุ่นสำหรับการทำงานกับสตริงข้อความและตรวจสอบข้อมูลอินพุต

การตรวจสอบอีเมลด้วย regex

ในการตรวจสอบว่าอีเมลถูกต้อง เราต้องยืนยันว่ารูปแบบถูกต้อง นั่นคือมี @ และโดเมน สำหรับสิ่งนี้เราใช้นิพจน์ต่อไปนี้:

วาร์ regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;

ตัวอย่างแบบฟอร์มแบบเต็ม

ในตัวอย่างต่อไปนี้ เราจะแสดงวิธีตรวจสอบที่อยู่อีเมลโดยใช้ JavaScript และนิพจน์ทั่วไป ขั้นตอนที่เราปฏิบัติตามคือ:

1. เรากำหนดฟังก์ชันที่เรียกว่า ตรวจสอบ Mail ที่ใช้เป็นอาร์กิวเมนต์อีเมลในการตรวจสอบ
instagram story viewer
2. เราสร้างตัวแปร regex A ที่มีนิพจน์ทั่วไปเพื่อตรวจสอบความถูกต้องของอีเมล
3. เราใช้วิธีการ ทดสอบ() ของนิพจน์ทั่วไปเพื่อตรวจสอบว่าอีเมลที่ป้อนตรงกับรูปแบบหรือไม่
4. หากอีเมลถูกต้อง เราจะแสดงข้อความแจ้งเตือนที่ระบุว่าถูกต้อง มิฉะนั้น เราจะแสดงข้อความแจ้งเตือนที่ระบุว่าไม่ถูกต้อง
5. ใน HTML เราสร้างช่องป้อนข้อมูลประเภท "อีเมล" และปุ่มที่เมื่อคลิก จะเรียกใช้ฟังก์ชัน ตรวจสอบ Mail ด้วยค่าที่ป้อนในช่องป้อนข้อมูล

ฟังก์ชัน validateEmail (อีเมล) {
// นิพจน์ทั่วไปเพื่อตรวจสอบความถูกต้องของอีเมล
var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;
// ตรวจสอบว่าอีเมลตรงกับรูปแบบที่กำหนดโดยนิพจน์ทั่วไปหรือไม่
if (regex.test (จดหมาย)) {
alert("Valid email");
} else {
alert ("อีเมลไม่ถูกต้อง");
}
}

การตรวจสอบอีเมลด้วย JavaScript และ regex

ตรวจสอบความถูกต้อง

ข้อดีและข้อเสียของการตรวจสอบด้วย JavaScript

การตรวจสอบข้อมูลอินพุต เช่น ที่อยู่อีเมล โดยใช้ JavaScript ในฝั่งไคลเอ็นต์มีข้อดีและข้อเสีย:

ข้อดี	ข้อเสีย
ข้อเสนอแนะทันทีสำหรับผู้ใช้	ไม่ปลอดภัย
โหลดบนเซิร์ฟเวอร์น้อยลง	ความเข้ากันได้ของเบราว์เซอร์ข้าม
ปรับปรุงประสบการณ์ผู้ใช้	ความพยายามซ้ำซ้อน (ฝั่งไคลเอ็นต์/เซิร์ฟเวอร์)
ลดเวลาตอบสนอง	ไม่แทนที่การตรวจสอบในฝั่งเซิร์ฟเวอร์

การตรวจสอบความถูกต้องของข้อมูลโดยใช้ JavaScript ไม่สามารถทดแทนการตรวจสอบฝั่งเซิร์ฟเวอร์ได้ อย่างไรก็ตามช่วยลดภาระ ในการตรวจสอบความถูกต้องของข้อมูลทางฝั่งเซิร์ฟเวอร์ ฉันแนะนำให้คุณอ่าน:

• การตรวจสอบจดหมายด้วย PHP