ตรวจสอบหมายเลขโทรศัพท์ใน JavaScript ด้วย Regular Expressions

บทนำ

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

การตรวจสอบความถูกต้องของหมายเลขโทรศัพท์มีความสำคัญเนื่องจากช่วยให้มั่นใจได้ว่าข้อมูลจะถูกบันทึกไว้ในรูปแบบที่สอดคล้องกันทั่วทั้งฐานข้อมูล ตัวอย่างเช่น ผู้ใช้อาจต้องการคำชี้แจงว่าควรป้อนรหัสประเทศก่อนหมายเลขโทรศัพท์หรือไม่ ด้วยการตรวจสอบที่เหมาะสม ผู้ใช้สามารถระบุได้อย่างง่ายดายว่าจำเป็นหรือไม่ ในทำนองเดียวกัน ประสบการณ์ของผู้ใช้จะดีขึ้นด้วยรูปแบบที่สอดคล้องกัน เนื่องจากคุณรู้ว่าควรคาดหวังอะไรจากผู้ใช้และสามารถนำตรรกะไปใช้ได้ มันจะเป็นประสบการณ์ที่ไม่ดีสำหรับผู้ใช้หากรหัสแตกในภายหลังเนื่องจากข้อมูลไม่สอดคล้องกัน

นิพจน์ทั่วไปเป็นเครื่องมือที่มีประสิทธิภาพสำหรับการจับคู่รูปแบบ พวกมันให้ความยืดหยุ่นในการจับคู่รูปแบบประเภทต่างๆ ขึ้นอยู่กับกรณีการใช้งานของคุณ นอกจากนี้ นิพจน์ทั่วไปยังไม่เชื่อเรื่องภาษา ทำให้ตรรกะการตรวจสอบของคุณพกพาสะดวกยิ่งขึ้น เนื่องจากคุณสามารถผสานรวมการตรวจสอบหลักได้อย่างง่ายดาย การทำงานกับ regex ใน JavaScript เป็นงานที่ไม่ซับซ้อน

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

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

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

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

นิพจน์ทั่วไปใช้อักขระพิเศษเพื่อแสดงประเภทต่างๆ ของรูปแบบ ตัวอย่างเช่น:

• . (จุด) เป็นอักขระพิเศษที่สามารถจับคู่กับอักขระใดก็ได้
• * (เครื่องหมายดอกจัน) จับคู่อักขระนำหน้า 0 ครั้งขึ้นไป
• + (บวก) จับคู่อักขระก่อนหน้าอย่างน้อยหนึ่งครั้ง
• ? (เครื่องหมายคำถาม) ทำให้อักขระข้างหน้าเป็นตัวเลือก
• [abc] ตรงกับอักขระใด ๆ a, b,หรือ c.
• (abc) จัดกลุ่มตัวละครเข้าด้วยกัน
• ^ (คาเร็ต) ตรงกับจุดเริ่มต้นของบรรทัด
• $ (ดอลลาร์) ตรงกับจุดสิ้นสุดของบรรทัด

นี่เป็นเพียงไม่กี่ หากคุณต้องการเจาะลึกและเรียนรู้เกี่ยวกับรูปแบบเพิ่มเติม คุณสามารถอ้างอิงจาก เอกสารนี้จาก Microsoft.

มาสร้าง Regular Expression ที่ตรวจสอบว่าชุดตัวเลขเป็นรหัสไปรษณีย์ XNUMX หลักหรือไม่ ในการเริ่มต้นเขียนนิพจน์ เราจะใช้ ^ เครื่องหมาย (คาเร็ต) เนื่องจากตรงกับจุดเริ่มต้นของบรรทัด ในนิพจน์ทั่วไป d ตรงกับตัวเลขใด ๆ และตัวเลขที่อยู่ในวงเล็บปีกกา ({}) จับคู่องค์ประกอบก่อนหน้าตรงกับจำนวนครั้งที่ระบุในวงเล็บปีกกา จากรายการด้านบน เรารู้ว่า $ ใช้สำหรับจับคู่ท้ายบรรทัด

เมื่อรวมข้อมูลนี้เข้าด้วยกัน เราจะได้นิพจน์ทั่วไปดังนี้:

/^d{5}$/

ตอนนี้ เรามาตรวจสอบกราฟิกด้านล่างเพื่อทำความเข้าใจนิพจน์ให้ดียิ่งขึ้น

นิพจน์ทั่วไปเพื่อให้ตรงกับรหัสไปรษณีย์ห้าหลัก

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

นิพจน์ทั่วไปของ JavaScript

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

ใน JavaScript, the RegExp วัตถุใช้สำหรับการจับคู่รูปแบบ วัตถุนี้สามารถใช้ได้สองวิธี:

• การใช้สัญกรณ์ตัวอักษร โดยที่รูปแบบถูกจัดรูปแบบระหว่างเครื่องหมายทับสองตัว
• การใช้สัญกรณ์คอนสตรัคเตอร์ โดยที่สตริงหรือ a RegExp วัตถุจะถูกส่งผ่าน

สามารถใช้สัญกรณ์ตามตัวอักษรได้ง่ายๆ ดังนี้:

const expr = /^d{5}$/i;

ในทางกลับกัน สำหรับสัญกรณ์คอนสตรัคเตอร์ คุณจะต้องใช้ RegExp ตัวสร้างเพื่อสร้างอินสแตนซ์ของมัน นี่คือลักษณะ:

const expr = new RegExp(/^d{5}$/, "i");

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับวัตถุ RegExp ได้จาก เอกสาร MDN อย่างเป็นทางการ. ตอนนี้ เรามาสำรวจความสำคัญของการตรวจสอบหมายเลขโทรศัพท์และองค์ประกอบต่างๆ ของหมายเลขโทรศัพท์กัน

การตรวจสอบหมายเลขโทรศัพท์และส่วนประกอบ

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

ตัวอย่างเช่น สมมติว่าคุณกำลังใช้บริการที่ต้องใช้รหัสประเทศพร้อมกับหมายเลขโทรศัพท์ แต่ผู้ใช้ของคุณไม่ได้รวมไว้เนื่องจากขาดการตรวจสอบความถูกต้อง ตอนนี้คุณมีเพียงหมายเลข ไม่มี รหัสประเทศและบริการที่ส่งข้อความ SMS อาจล้มเหลวเนื่องจากสาเหตุนี้ นี่เป็นเพียงสถานการณ์สมมติอย่างหนึ่งเท่านั้น ปัญหาอื่นๆ อาจทำให้แอปพลิเคชันของคุณขัดข้องได้ สิ่งสำคัญคือต้องจัดการข้อมูลของคุณในส่วนหน้าอย่างเหมาะสม เพื่อให้แน่ใจว่าคุณได้บันทึกข้อมูลที่ชัดเจนและสอดคล้องกันทั่วทั้งฐานข้อมูลของคุณ

โดยทั่วไป หมายเลขโทรศัพท์ประกอบด้วยสี่ส่วน:

• รหัสประเทศ: ตัวเลข 1 ถึง 3 หลักแรก (ขึ้นอยู่กับประเทศ) กำหนดประเทศของหมายเลขโทรศัพท์ รหัสนี้ช่วยให้สามารถกำหนดเส้นทางการโทรไปยังประเทศที่ถูกต้องได้ รหัสประเทศไม่สามารถเริ่มต้นด้วย 0

บทความที่คุณกำลังแก้ไขมีชื่อว่า “ตรวจสอบหมายเลขโทรศัพท์ใน JavaScript ด้วย Regular Expressions” ส่วนของข้อความที่จะแก้ไข:

• รหัสพื้นที่: หรือที่เรียกว่าเมืองหรือรหัสโทรศัพท์ หมายเลขส่วนนี้จะช่วยกำหนดเส้นทางการโทรไปยังพื้นที่ทางภูมิศาสตร์ที่ถูกต้องภายในประเทศ ในบางประเทศ เช่น สหรัฐอเมริกา รหัสพื้นที่ยังสามารถระบุชุดหมายเลขโทรศัพท์เฉพาะสำหรับบริการเฉพาะได้อีกด้วย นอกจากนี้ ในอเมริกาเหนือ รหัสพื้นที่ไม่สามารถขึ้นต้นด้วย 0 หรือ 1
• คำนำหน้าโทรศัพท์: ลำดับของหมายเลขนี้กำหนดให้กับสำนักงานกลางหรือชุมสายโทรศัพท์โดยบริษัทโทรศัพท์ ทำให้พื้นที่ทางภูมิศาสตร์หรือพื้นที่ใกล้เคียงแคบลงไปอีก
• หมายเลขคู่สาย: เป็นหมายเลขเฉพาะที่กำหนดให้กับสายโทรศัพท์เฉพาะสำหรับครัวเรือนหรือธุรกิจภายในพื้นที่นำหน้า หมายเลขส่วนนี้มักจะช่วยให้แน่ใจว่าหมายเลขโทรศัพท์แต่ละหมายเลขในประเทศ พื้นที่ และคำนำหน้าไม่ซ้ำกัน

หากไม่รวมรหัสประเทศ การรวมส่วนที่เหลือจะได้หมายเลขโทรศัพท์ XNUMX หลัก โดยที่รหัสพื้นที่และรหัสนำหน้าเป็น XNUMX หลัก และหมายเลขคู่สายเป็น XNUMX หลัก

ตอนนี้เรามาเขียนฟังก์ชัน JavaScript ที่ตรวจสอบหมายเลขโทรศัพท์ตามเกณฑ์เหล่านี้โดยใช้นิพจน์ทั่วไป

สร้าง RegEx สำหรับการตรวจสอบหมายเลขโทรศัพท์

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

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

ตัวอย่างเช่น หมายเลขโทรศัพท์ที่ถูกต้องสำหรับฟังก์ชันของเราจะเป็นแบบนี้ +123-456-789-1234แต่ไม่ +012-123-456-7890 or +12-123-456-789เนื่องจากหมายเลขโทรศัพท์เหล่านี้ไม่เป็นไปตามกฎของหมายเลขโทรศัพท์ที่เรากล่าวถึงก่อนหน้านี้

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

หากต้องการระบุจุดเริ่มต้นของนิพจน์ทั่วไป ให้ใช้เครื่องหมายรูปหมวก (^) จากนั้นตรวจสอบว่ามีเครื่องหมายบวกอยู่ที่จุดเริ่มต้น เพื่อจุดประสงค์นี้มาใช้กันเถอะ +ซึ่งจะตรงกับเครื่องหมายบวกที่มีอยู่ตอนเริ่มต้น ตอนนี้ เพื่อให้แน่ใจว่ารหัสประเทศอยู่ระหว่าง XNUMX-XNUMX หลัก และหลักแรกไม่ใช่ศูนย์ เราสามารถเขียนดังนี้: [1-9]{1}[0-9]{0,2}. ที่นี่ [1-9]{1} ระบุว่าตัวเลขตั้งแต่ 1 ถึง 9 ใดๆ สามารถมีอยู่เพียงครั้งเดียว และในทำนองเดียวกัน [0-9]{0,2} ระบุว่าตัวเลขตั้งแต่ 0 ถึง 9 สามารถมีค่าเป็นศูนย์ถึงสองครั้ง

สำหรับตัวคั่น เราสามารถเพิ่ม - (ยัติภังค์) ระหว่างส่วนของตัวเลข หนึ่ง - สามารถเพิ่มได้หลังจากการตรวจสอบรหัสประเทศ ณ จุดนี้ regex จะมีลักษณะดังนี้:

^+[1-9]{1}[0-9]{0,2}-$

พื้นที่ $ ในตอนท้ายระบุจุดสิ้นสุดของบรรทัด ตอนนี้สำหรับรหัสพื้นที่จะค่อนข้างคล้ายกัน รหัสพื้นที่ไม่สามารถเริ่มต้นด้วยศูนย์หรือหนึ่ง ดังนั้นส่วนแรกจะเป็น [2-9]{1}. ซึ่งตรงกับหมายเลขแรกอยู่ระหว่าง 2 และ 9 การจับคู่นี้เกิดขึ้นครั้งเดียว จากนั้นเราจะเขียนโค้ดที่เหลือ [0-9]{2}. เพื่อให้แน่ใจว่ามีตัวเลขสองหลักหลังจากตัวเลขแรก และสำหรับแต่ละหลัก ช่วงจะอยู่ระหว่าง 0 ถึง 9 เพิ่มเครื่องหมายยัติภังค์ที่ส่วนท้ายอีกครั้ง

ตอนนี้ regexp ที่สมบูรณ์จะมีลักษณะดังนี้:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|

ลองใช้รูปแบบเดียวกันอีกครั้งในการตรวจสอบคำนำหน้าโทรศัพท์ สมมติว่าคำนำหน้าโทรศัพท์ไม่สามารถขึ้นต้นด้วยศูนย์หรือหนึ่ง ดังนั้นการเพิ่ม [2-9]{1}[0-9]{2} และยัติภังค์อีกครั้งจะทำให้การแสดงออกเช่นนี้:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|

ส่วนเดียวที่เหลืออยู่ตอนนี้คือหมายเลขบรรทัด ซึ่งสามารถเป็นตัวเลขใดๆ ที่มีความยาวเท่ากับสี่ก็ได้ นี่ง่ายกว่าอย่างอื่น การแสดงออกคือ [0-9]{4}.

นิพจน์ที่สมบูรณ์มีดังนี้:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|-Line-|

คุณต้องสังเกตเห็นการใช้วงเล็บปีกกาบ่อยๆ ใช้เพื่อจับคู่อินสแตนซ์ที่มีให้ในวงเล็บปีกกา หากเป็นตัวเลขเฉพาะเช่น {1}จะตรงกับรูปแบบก่อนหน้าเพียงครั้งเดียว แต่ถ้าเป็นช่วงเช่น {0, 2}กำหนดจำนวนการแข่งขันขั้นต่ำและสูงสุด ดังนั้นในกรณีของ {0, 2}จะตรงกับรูปแบบอย่างน้อย XNUMX ครั้งและสูงสุด XNUMX ครั้ง

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

function validatePhoneNumber(phoneNumber) { const pattern = new RegExp("^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$"); if (pattern.test(phoneNumber)) { console.log("Phone number is valid"); return true; } else { console.log("Phone number is not valid"); return false; }
} validatePhoneNumber("+123-456-789-1234"); validatePhoneNumber("+0-123-456-7890"); validatePhoneNumber("+12-012-123-1234"); 

ฟังก์ชั่นค่อนข้างตรงไปตรงมา ใช้หมายเลขโทรศัพท์เป็นอินพุต รูปแบบนิพจน์ทั่วไปถูกเก็บไว้ภายในตัวแปรที่เรียกว่า pattern. รูปแบบนี้สร้างอินสแตนซ์โดยใช้ตัวสร้าง RegExp และส่งนิพจน์เป็นพารามิเตอร์ไปยังตัวสร้าง จากนั้นเราทดสอบหมายเลขโทรศัพท์โดยใช้ test วิธีการที่มีอยู่ในวัตถุ ใช้คำสั่ง if-else เพื่อตรวจสอบว่าหมายเลขโทรศัพท์ผ่านการทดสอบหรือไม่ หากเป็นเช่นนั้น เราจะส่งคืนค่าจริงและส่งข้อความคอนโซลที่ระบุว่า Phone number is valid. มิฉะนั้น จะส่งคืนค่าเท็จและแสดงข้อความคอนโซลที่ระบุว่าหมายเลขโทรศัพท์ไม่ถูกต้อง

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

สรุป

บทความนี้มีวัตถุประสงค์เพื่อให้ภาพรวมโดยย่อของ Regular Expression การใช้งาน และวิธีการนำไปใช้ตรวจสอบหมายเลขโทรศัพท์ เรายังกล่าวถึงส่วนประกอบต่างๆ ของหมายเลขโทรศัพท์และวิธีทดสอบส่วนประกอบแต่ละรายการ

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

• เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• การเงิน EVM ส่วนต่อประสานแบบครบวงจรสำหรับการเงินแบบกระจายอำนาจ เข้าถึงได้ที่นี่.
• กลุ่มสื่อควอนตัม IR/PR ขยาย เข้าถึงได้ที่นี่.
• เพลโตไอสตรีม. ข้อมูลอัจฉริยะ Web3 ขยายความรู้ เข้าถึงได้ที่นี่.
• ที่มา: https://stackabuse.com/validate-phone-numbers-in-javascript-with-regular-expressions/