จะทำการตรวจสอบอีเมลใน JavaScript ได้อย่างไร? [พร้อมตัวอย่าง]

เผยแพร่แล้ว: 2021-02-23

JavaScript เป็นภาษาโปรแกรมที่ออกแบบมาเพื่อสร้างแอปพลิเคชัน เร็วกว่าภาษาอื่นมากเพราะมีน้ำหนักเบาและใช้งานง่าย ใช้สำหรับสร้างแอปพลิเคชันที่ออกแบบมาอย่างดี

การตรวจสอบอีเมลใน 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, โครงการหลักที่นำไปปฏิบัติได้จริง & ความช่วยเหลือด้านงานกับบริษัทชั้นนำ

ลงจอดบนงานในฝันของคุณ

สมัครเลยตอนนี้สำหรับโปรแกรม Executive PG ในการพัฒนา Full Stack