จะทำการตรวจสอบอีเมลใน JavaScript ได้อย่างไร? [พร้อมตัวอย่าง]
เผยแพร่แล้ว: 2021-02-23JavaScript เป็นภาษาโปรแกรมที่ออกแบบมาเพื่อสร้างแอปพลิเคชัน เร็วกว่าภาษาอื่นมากเพราะมีน้ำหนักเบาและใช้งานง่าย ใช้สำหรับสร้างแอปพลิเคชันที่ออกแบบมาอย่างดี
การตรวจสอบอีเมลใน JavaScript มีความสำคัญต่อประสบการณ์ผู้ใช้ในการสร้างเว็บแอปพลิเคชัน การตรวจสอบความถูกต้องช่วยในการส่งข้อมูลที่ถูกต้องไปยังเซิร์ฟเวอร์จากไคลเอนต์ของเว็บแอปพลิเคชัน
สารบัญ
การตรวจสอบความถูกต้องคืออะไร?
การตรวจสอบความถูกต้องหมายถึงกระบวนการตรวจสอบค่าที่ผู้ใช้ป้อน มีบทบาทสำคัญในการสร้างแอปพลิเคชันและยกระดับประสบการณ์ผู้ใช้ หลายช่อง เช่น หมายเลขโทรศัพท์มือถือ อีเมล วันที่ และรหัสผ่าน ได้รับการตรวจสอบผ่านกระบวนการนี้
JavaScript ทำให้กระบวนการตรวจสอบความถูกต้องเร็วขึ้นเนื่องจากการประมวลผลข้อมูลได้เร็วกว่าการตรวจสอบฝั่งเซิร์ฟเวอร์อื่นๆ ตอนนี้ มาดูการใช้งานการ ตรวจสอบอีเมลใน JavaScript กัน
การตรวจสอบอีเมลใน JavaScript
การตรวจสอบความถูกต้องของอีเมลเป็นส่วนสำคัญในการรับรองความถูกต้องของแบบฟอร์ม HTML อีเมลเป็นส่วนย่อยหรือสตริงของอักขระ ASCII ซึ่งแบ่งออกเป็นสองส่วนโดยใช้สัญลักษณ์ @ ส่วนแรกประกอบด้วยข้อมูลส่วนตัว และส่วนที่สองประกอบด้วยชื่อโดเมนที่ใช้ลงทะเบียนอีเมล
นี่คืออักขระ ASCII ของส่วนแรก:

- อักขระพิเศษ เช่น # * + & ' ! %@ ? { ^ } ”
- อักขระตัวเลข (0 ถึง 9)
- ตัวหยุดเต็ม จุด ฯลฯ มีเงื่อนไขว่าต้องไม่ใช่ตัวสุดท้ายของอีเมลหรือตัวแรกสุดของอีเมล และไม่สามารถทำซ้ำได้อีก
- ตัวอักษรตัวพิมพ์ใหญ่ (A ถึง Z) และตัวอักษรตัวพิมพ์เล็ก (a ถึง z)
ส่วนที่สองรวมถึงต่อไปนี้:
- จุด
- ตัวเลข
- ยัติภังค์
- จดหมาย
การใช้นิพจน์ทั่วไปเป็นวิธีที่ดีที่สุดวิธีหนึ่งใน การ ตรวจสอบอีเมลใน JavaScript ใช้นิพจน์ทั่วไปเพื่อกำหนดรูปแบบของอักขระ
ตัวอย่าง ID อีเมลที่ถูกต้องบางส่วน:
ตัวอย่างอื่นๆ ของรหัสอีเมลไม่ถูกต้อง
- [email protected] (ไม่อนุญาตให้ใส่ทีละจุด)
- Inownzsite()&@abcd.com (อนุญาตให้ใช้เฉพาะอักขระ ขีดกลาง ขีดล่าง และตัวเลขในนิพจน์ทั่วไป)
- Ourwebsiteismne.azbyz.com (ที่นี่ไม่มีสัญลักษณ์ @)
- [email protected] (โดเมนระดับบนสุดไม่สามารถเริ่มต้นด้วยจุด)
- @youmenandwe.we.net (ไม่สามารถขึ้นต้นด้วย @ สัญลักษณ์ได้)
- [email protected] (“.b” ไม่ใช่โดเมนระดับบนสุดที่ถูกต้อง)email.js
ไฟล์ประกอบด้วยรหัส JavaScript ที่จำเป็นสำหรับการตรวจสอบอีเมล ที่นี่ใช้นิพจน์ทั่วไปเพื่อตรวจสอบความถูกต้องของอีเมลที่ฝั่งไคลเอ็นต์ของแอปพลิเคชัน
จุดตรวจสำหรับการตรวจสอบอีเมลอย่างมีประสิทธิภาพในโค้ด JavaScript:
- อธิบายนิพจน์ทั่วไปเพื่อตรวจสอบที่อยู่อีเมล
- หากค่าที่ป้อนเข้าตรงกับนิพจน์ทั่วไป
- หากตรงกัน ให้ส่งการแจ้งเตือนว่า "ที่อยู่อีเมลถูกต้อง"
- หากไม่ตรงกัน ให้ส่งการแจ้งเตือนว่า "ที่อยู่อีเมลไม่ถูกต้อง"
ที่เกี่ยวข้อง: การ ตรวจสอบรหัสผ่านใน Javascript
รหัสตรวจสอบอีเมลใน JavaScript
รับด้านล่างเป็นรหัสตรวจสอบอีเมลใน JavaScript รหัสนี้สามารถตรวจสอบได้ว่าอีเมลที่ผู้ใช้สร้างหรือป้อนนั้นถูกต้องหรือไม่ บันทึกไฟล์เป็น filename.js

// ข้อมูลโค้ด
ฟังก์ชัน EmailValidation (ป้อนอีเมล)
{
var mail_format = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
ถ้า(ป้อนEmail.value.match(ป้อนอีเมล))
{
alert("ใช่! อีเมลที่ถูกต้อง!");
document.form1.text1.focus();
คืนค่าจริง;
}
อื่น
{
alert("ขออภัย! อีเมลไม่ถูกต้อง!");
document.form1.text1.focus();
คืนค่าเท็จ;
}
}
ฟังก์ชัน JavaScript ใช้ในรูปแบบ HTML ดังนี้ บันทึกไฟล์เป็น filename.html:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>การตรวจสอบอีเมลใน JavaScript</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>ป้อนอีเมลสำหรับตรวจสอบความถูกต้อง</h2>
<form name=”form1″ action=”#”>
<ul>
<li><input type='text' name='text1'/></li>
<li> </li>
<li class=”Validate”><input type=”submit” name=”Validate” value=”Validate” onclick=”ValidateEmail(document.form1.text1)”/></li>
<li> </li>
</ul>
</form>
</div>
<script src="filename.js"></script>
</body>
</html>
รหัสต่อไปนี้สามารถเพิ่มรูปแบบให้กับแบบฟอร์มโดยใช้ CSS บันทึกไฟล์เป็น filename.css
ลี {list-style-type: none;
ขนาดตัวอักษร: 16pt;
}
.mail {
ระยะขอบ: อัตโนมัติ;
ช่องว่างภายในด้านบน: 20px;
padding-ด้านล่าง: 20px;
ความกว้าง: 850px;
พื้นหลัง : rgb (150, 195, 208);
เส้นขอบ: 1px ดิน rgb (1, 20, 24);
}
.mail h2 {
ระยะขอบซ้าย: 36px;
}
ป้อนข้อมูล {
ขนาดตัวอักษร: 28pt;
}
อินพุต:โฟกัส, พื้นที่ข้อความ:โฟกัส{
พื้นหลังสี: ขาว;
}
อินพุตส่ง {
ขนาดตัวอักษร: 18pt;
}

ตอนนี้คุณสามารถรันโค้ด HTML และทำการ ตรวจสอบอีเมลใน JavaScript ให้เสร็จสิ้นได้
อ่าน: โครงการ Javascript ใน GitHub
เรียนรู้ หลักสูตรซอฟต์แวร์ออนไลน์ จากมหาวิทยาลัยชั้นนำของโลก รับโปรแกรม PG สำหรับผู้บริหาร โปรแกรมประกาศนียบัตรขั้นสูง หรือโปรแกรมปริญญาโท เพื่อติดตามอาชีพของคุณอย่างรวดเร็ว
บทสรุป
การตรวจสอบความถูกต้องของอีเมลเป็นสิ่งสำคัญมากในการหลีกเลี่ยงการสร้างที่อยู่อีเมลที่ไม่ถูกต้อง ในบทความนี้มีคำอธิบายพร้อมรหัสเพื่อตรวจสอบว่ารหัสอีเมลถูกต้องหรือไม่และให้ระบบตรวจสอบและแจ้งให้ผู้ใช้ทราบว่ารหัสอีเมลที่ป้อนไม่ถูกต้อง
หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาแบบฟูลสแตก โปรดดูโปรแกรม Executive PG ของ upGrad & IIIT-B ในการพัฒนาซอฟต์แวร์ฟูลสแตก ซึ่งออกแบบมาสำหรับมืออาชีพที่ทำงานและมีการฝึกอบรมที่เข้มงวดมากกว่า 500 ชั่วโมง โครงการและการมอบหมายมากกว่า 9 รายการ , สถานะศิษย์เก่า IIIT-B, โครงการหลักที่นำไปปฏิบัติได้จริง & ความช่วยเหลือด้านงานกับบริษัทชั้นนำ
