รูปแบบการตรวจสอบความถูกต้องแบบกำหนดเองสำหรับช่องข้อความ

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

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

รูปแบบการตรวจสอบความถูกต้องคืออะไร?

แนวคิด

รูปแบบการตรวจสอบความถูกต้อง คือ กฎที่กำหนดว่าข้อมูลป้อนเข้าแบบใดถูกต้อง:

• “ต้องมีเฉพาะตัวอักษรเท่านั้น”
• “ต้องเป็น URL ที่ถูกต้อง”
• “ต้องตรงกับรูปแบบ ABC-1234”
• “ต้องมีตัวอักษรอย่างน้อย 10 ตัว”

พวกเขาทำงานอย่างไร

1. ผู้ใช้พิมพ์ในช่องข้อความ
2. เมื่อกดส่ง (หรือขณะที่กำลังพิมพ์) ระบบจะตรวจสอบข้อมูลที่ป้อนกับรูปแบบที่กำหนดไว้
3. ถ้าตรงกัน: การตรวจสอบผ่าน
4. หากไม่เป็นเช่นนั้น: จะแสดงข้อความแสดงข้อผิดพลาด

ประโยชน์

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

รูปแบบการตรวจสอบความถูกต้องในตัว

เครื่องมือสร้างแบบฟอร์มอัตโนมัติ รวมถึงรูปแบบทั่วไป:

การใช้แพทเทิร์นสำเร็จรูป

ขั้นตอนที่ 1: เพิ่มช่องข้อความ

1. เปิดแบบฟอร์มของคุณใน เอเอฟบี
2. ลาก ข้อความ แบบฟอร์มฟิลด์
3. คลิกเพื่อตั้งค่า

ขั้นตอนที่ 2: เลือกรูปแบบการตรวจสอบความถูกต้อง

1. หา รูปแบบการตรวจสอบความถูกต้อง ในการตั้งค่า
2. เลือกจากเมนูแบบเลื่อนลง:
   • ไม่มี (ไม่มีรูปแบบ)
   • อีเมล
   • URL
   • เฉพาะตัวอักษร
   • เฉพาะตัวเลข
   • จอแสดงผลแบบตัวอักษร
   • แผ่นกระดาษ
3. บันทึกการตั้งค่า

ขั้นตอนที่ 3: การตรวจสอบความถูกต้องของการทดสอบ

1. แบบฟอร์มดูตัวอย่าง
2. ลองป้อนข้อมูลที่ถูกต้องดู น่าจะผ่านได้
3. ลองป้อนข้อมูลที่ไม่ถูกต้องดู—น่าจะแสดงข้อผิดพลาด

ตัวอย่างรูปแบบและกรณีการใช้งาน

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

ใช้สำหรับ:

• ฟิลด์เว็บไซต์
• ลิงก์ผลงาน
• โปรไฟล์โซเชียลมีเดีย
• URL อ้างอิง

ตัวอย่างที่ถูกต้อง:

• https://example.com
• http://www.example.com/page
• https://example.com/path?query=value

ตัวอย่างที่ไม่ถูกต้อง:

• example.com (โปรโตคอลหายไป)
• www.example.com (โปรโตคอลหายไป)
• แค่ข้อความบางส่วน

เฉพาะตัวอักษร

ใช้สำหรับ:

• ชื่อ/นามสกุล (ตรวจสอบความถูกต้องเบื้องต้น)
• ชื่อเมือง
• รหัสประเทศ
• ตัวระบุตามตัวอักษร

ตัวอย่างที่ถูกต้อง:

• จอห์น
• Smith
• NewYork

ตัวอย่างที่ไม่ถูกต้อง:

• John123
• นิวยอร์ก (พื้นที่)
• โอ'ไบรอัน (เครื่องหมายอะพอสโทรฟ)

หมายเหตุ การใช้ตัวอักษรอย่างเดียวเป็นวิธีการที่เข้มงวดมาก โปรดพิจารณาว่าคุณต้องการเว้นวรรค เครื่องหมายยัติภังค์ หรือเครื่องหมายเน้นเสียงหรือไม่

เฉพาะตัวเลข

ใช้สำหรับ:

• หมายเลขประจำตัวประชาชน
• เลขที่บัญชี
• ปริมาณ (เมื่อไม่ได้ใช้ช่องตัวเลข)
• รหัส PIN

ตัวอย่างที่ถูกต้อง:

• 12345
• 00123
• 9876543210

ตัวอย่างที่ไม่ถูกต้อง:

• 123-456 (เครื่องหมายขีดกลาง)
• 123.45 (ทศนิยม)
• 12345A

จอแสดงผลแบบตัวอักษร

ใช้สำหรับ:

• รหัสสินค้า
• หมายเลขอ้างอิง
• ชื่อผู้ใช้
• หมายเลขซีเรียล

ตัวอย่างที่ถูกต้อง:

• ABC123
• User42
• PROD001

ตัวอย่างที่ไม่ถูกต้อง:

• ABC-123 (เครื่องหมายขีดกลาง)
• ABC 123 (เว้นวรรค)
• ABC_123 (ขีดล่าง)

รูปแบบการตรวจสอบความถูกต้องแบบกำหนดเอง (Regex)

Regex คืออะไร?

นิพจน์ปกติ (regex) คือรูปแบบที่ใช้อธิบายรูปแบบของข้อความ:

• ^ = จุดเริ่มต้นของสตริง
• $ = สิ้นสุดสตริง
• [A-Z] = ตัวอักษรพิมพ์ใหญ่ใดๆ
• [a-z] = ตัวอักษรพิมพ์เล็กใดๆ
• [0-9] = ตัวเลขใดๆ
• {3} = 3 พอดีจากครั้งก่อน
• {2,5} = ระหว่าง 2 ถึง 5 ของครั้งก่อนหน้า
• + = หนึ่งหรือมากกว่า
• * = ศูนย์หรือมากกว่า
• ? = ตัวเลือก (ศูนย์หรือหนึ่ง)

การสร้างลวดลายแบบกำหนดเอง

1. เลือก “กำหนดเอง” จากเมนูแบบเลื่อนลงสำหรับการตรวจสอบความถูกต้อง
2. ป้อนรูปแบบ regex ของคุณ
3. ทดสอบด้วยข้อมูลป้อนเข้าที่หลากหลาย

ตัวอย่างรูปแบบกำหนดเองทั่วไป

รหัสไปรษณีย์ของสหรัฐอเมริกา

รูปแบบ: ^\d{5}(-\d{4})?$

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

• 12345 (5 หลัก)
• 12345-6789 (รหัสไปรษณีย์+4)

ปฏิเสธ:

• 1234 (สั้นเกินไป)
• 123456 (ยาวเกินไป)
• ABCDE (ตัวอักษร)

หมายเลขโทรศัพท์ในสหรัฐอเมริกา

รูปแบบ: ^\d{3}-\d{3}-\d{4}$

ตรวจสอบความถูกต้อง: 555-123-4567

สำหรับรูปแบบที่ยืดหยุ่น: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

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

• 555-123-4567
• (555) 123-4567
• 555.123.4567
• 555 123 4567

รหัสสินค้า (รูปแบบ ABC-1234)

รูปแบบ: ^[A-Z]{3}-\d{4}$

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

• เอบีซี 1234
• เอ็กซ์วายแซด-9999
• PRO-0001

ปฏิเสธ:

• abc-1234 (ตัวพิมพ์เล็ก)
• AB-1234 (มีเพียง 2 ตัวอักษร)
• ABC1234 (เครื่องหมายยัติภังค์หายไป)

ป้ายทะเบียนรถ (รูปแบบต่างๆ)

รูปแบบ (ทั่วไปของสหรัฐอเมริกา): ^[A-Z0-9]{1,7}$

ตรวจสอบความถูกต้อง: 1-7 ตัวอักษรพิมพ์ใหญ่/ตัวเลข

บัตรเครดิต (รูปแบบพื้นฐาน)

รูปแบบ: ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$

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

• 1234567890123456
• 1234 5678 9012 3456
• 1234-5678-9012-3456

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

ชื่อผู้ใช้ (ตัวอักษร ตัวเลข เครื่องหมายขีดล่าง)

รูปแบบ: ^[a-zA-Z][a-zA-Z0-9_]{2,19}$

กฎ:

• ขึ้นต้นด้วยตัวอักษร
• จำนวนตัวอักษรทั้งหมด 3-20 ตัว
• อนุญาตเฉพาะตัวอักษร ตัวเลข และเครื่องหมายขีดล่างเท่านั้น

ตรวจสอบความถูกต้อง: user_123, JohnDoe, test42

รหัสสีฐานสิบหก

รูปแบบ: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

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

• # FF5733
• # fff
• #ABC123

วันที่ (ปี ค.ศ.-เดือน ค.ศ.)

รูปแบบ: ^\d{4}-\d{2}-\d{2}$

ตรวจสอบความถูกต้อง: 2026-01-15

หมายเหตุ สำหรับการระบุวันที่ การใช้ช่องข้อมูลวันที่พร้อมตัวเลือกวันที่มักจะดีกว่า

เวลา (HH:MM ระบบ 24 ชั่วโมง)

รูปแบบ: ^([01]\d|2[0-3]):[0-5]\d$

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

• 09:30
• 14:45
• 23:59

หมายเลขใบแจ้งหนี้ (INV-YYYY-NNNN)

รูปแบบ: ^INV-\d{4}-\d{4}$

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

• อินวี-2026-0001
• อินวี-2025-1234

หมายเลขประกันสังคม (สหรัฐอเมริกา)

รูปแบบ: ^\d{3}-\d{2}-\d{4}$

ตรวจสอบความถูกต้อง: 123-45-6789

คำเตือน: ควรระมัดระวังในการเก็บรวบรวมหมายเลขประกันสังคม (SSN) เนื่องจากมีผลกระทบด้านความปลอดภัยและความเป็นส่วนตัว

การสร้างแพทเทิร์นของคุณเอง

กระบวนการทีละขั้นตอน

1. กำหนดความต้องการ: คุณต้องการรูปแบบใด?
2. ทำลายมันลง: ตัวละครอะไรบ้าง กี่ตัว และเรียงลำดับอย่างไร?
3. รูปแบบการสร้าง: แปลงเป็นนิพจน์ปกติ (regex)
4. ทดสอบอย่างละเอียด: ข้อมูลป้อนเข้าที่ถูกต้องและไม่ถูกต้อง
5. เขียนข้อความแสดงข้อผิดพลาด: ช่วยให้ผู้ใช้เข้าใจรูปแบบ

ตัวอย่าง: รหัสพนักงาน

ต้องการ: ตัวอักษร 2 ตัว + ตัวเลข 4 ตัว + ตัวอักษร 1 ตัว (เช่น AB1234C)

ชำรุด:

• ตัวอักษรพิมพ์ใหญ่ 2 ตัว: [A-Z]{2}
• 4 หลัก: \d{4}
• ตัวอักษรพิมพ์ใหญ่ 1 ตัว: [A-Z]
• ไม่มีสิ่งใดก่อนหรือหลัง: ^ และ $

แบบสุดท้าย: ^[A-Z]{2}\d{4}[A-Z]$

รูปแบบการทดสอบ

ก่อนนำไปใช้ในรูปแบบ:

• ทดสอบด้วยข้อมูลป้อนเข้าที่ถูกต้อง (ควรผ่าน)
• ทดสอบการป้อนข้อมูลที่ไม่ถูกต้อง (ควรล้มเหลว)
• ทดสอบกรณีพิเศษ (ขอบเขต, อักขระพิเศษ)
• ใช้เครื่องมือทดสอบ regex ออนไลน์เพื่อแก้ไขข้อผิดพลาด

ข้อความแสดงข้อผิดพลาดสำหรับการตรวจสอบความถูกต้อง

ข้อความเริ่มต้น

• “โปรดป้อนค่าที่ถูกต้อง”
• “ข้อมูลในช่องนี้ไม่ถูกต้อง”

ข้อความที่กำหนดเองที่ดีกว่า

แจ้งรูปแบบที่คาดหวังให้ผู้ใช้ทราบ:

การใช้ข้อความตัวอย่างและข้อความช่วยเหลือ

ป้องกันข้อผิดพลาดโดยการแสดงรูปแบบล่วงหน้า:

• ตัวแทน: “เอบีซี-1234”
• ข้อความช่วยเหลือ: “กรุณาป้อนรหัสสินค้าของคุณ (เช่น ABC-1234)”

ปฏิบัติที่ดีที่สุด

1. เริ่มง่ายๆ

ควรใช้รูปแบบมาตรฐานที่มีอยู่แล้วเมื่อเป็นไปได้ การใช้ regex แบบกำหนดเองจะเพิ่มความซับซ้อน

2. อย่าตรวจสอบความถูกต้องมากเกินไป

รูปแบบที่เข้มงวดเกินไปทำให้ผู้ใช้รู้สึกหงุดหงิด:

• ชื่อที่มีเครื่องหมายขีดกลาง (เช่น แมรี่-เจน)
• ชื่อที่มีเครื่องหมายอะพอสโทรฟี (โอ'ไบรอัน)
• ตัวละครนานาชาติ (โฮเซ่, มุลเลอร์)

3. แสดงรูปแบบที่คาดหวัง

ควรแจ้งให้ผู้ใช้ทราบเสมอว่าคุณคาดหวังอะไร:

• ตัวอย่างสำหรับใส่ในช่องว่าง
• ข้อความช่วยเหลืออธิบายรูปแบบ
• ล้างข้อความแสดงข้อผิดพลาด

4. ทดสอบกรณีพิเศษ

• อินพุตว่างเปล่า
• เว้นวรรคที่ต้น/ท้าย
• ตัวละครพิเศษ
• ความยาวสูงสุด

5. พิจารณาทางเลือก

บางครั้งวิธีการอื่นอาจดีกว่า:

• วันที่ → ใช้ช่องวันที่
• ตัวเลข → ใช้ช่องตัวเลข
• โทรศัพท์ → ใช้ช่องหมายเลขโทรศัพท์ตามรูปแบบที่กำหนด
• ตัวเลือกคงที่ → ใช้เมนูแบบดรอปดาวน์

การรวมกับการตรวจสอบความถูกต้องอื่นๆ

แบบ + จำเป็น

• ต้องกรอกข้อมูลในช่องให้ครบถ้วน และต้องตรงกับรูปแบบที่กำหนด
• ค่าว่างไม่ตรงตามข้อกำหนด “จำเป็น”
• รูปแบบไม่ถูกต้องทำให้รูปแบบไม่ตรงกัน

รูปแบบ + ความยาวต่ำสุด/สูงสุด

• รูปแบบตรวจสอบความถูกต้องของรูปแบบ
• ความยาวเป็นตัวกำหนดขนาด
• ทั้งคู่ต้องผ่าน

รูปแบบการแก้ไขปัญหา

รูปแบบไม่ทำงาน

ตรวจสอบ:

• ไวยากรณ์ถูกต้อง (ไม่มีคำผิด)
• อักขระพิเศษถูกแปลงอย่างถูกต้อง
• ^ และ $ หากจำเป็น

ข้อมูลป้อนเข้าที่ถูกต้องถูกปฏิเสธ

ตรวจสอบ:

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

ระบบยอมรับข้อมูลที่ไม่ถูกต้อง

ตรวจสอบ:

• แพทเทิร์นอาจจะหลวมเกินไป
• เครื่องหมายยึด (^ และ $) หายไป
• ทดสอบด้วยตัวอย่างเพิ่มเติม

คำถามที่พบบ่อย

ฉันสามารถผสมผสานลวดลายหลายแบบเข้าด้วยกันได้หรือไม่?

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

รูปแบบตัวอักษรนั้นคำนึงถึงตัวพิมพ์ใหญ่เล็กหรือไม่?

โดยค่าเริ่มต้น ใช่แล้ว ใช้ [A-Za-z] เพื่อให้ตรงกับทั้งสองตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก หรือเพิ่มแฟล็กที่ไม่คำนึงถึงตัวพิมพ์ใหญ่และตัวพิมพ์เล็กหากรองรับ

ฉันจะเว้นช่องว่างได้อย่างไร?

เพิ่ม \s ลงในคลาสอักขระของคุณ: [A-Za-z\s] จะตรงกับตัวอักษรและช่องว่าง

แล้วตัวละครต่างชาติล่ะ?

รูปแบบตัวอักษรมาตรฐาน [A-Za-z] ไม่รวมตัวอักษรที่มีเครื่องหมายเน้นเสียง สำหรับชื่อสากล โปรดพิจารณาใช้การตรวจสอบที่ยืดหยุ่นกว่า หรือใช้ \p{L} (หากรองรับ) แทนตัวอักษรใดก็ได้

ฉันควรตรวจสอบความถูกต้องเมื่อเบลอภาพหรือกดส่งดี?

ทั้งสองวิธีใช้ได้ผล การตรวจจับการเบลอ (การสูญเสียโฟกัส) จะให้ผลตอบรับที่เร็วกว่า ส่วนการกดส่งจะบันทึกทุกอย่าง แบบฟอร์มหลายๆ แบบใช้ทั้งสองวิธีนี้

สรุป

การเพิ่มรูปแบบการตรวจสอบความถูกต้องแบบกำหนดเอง:

1. เลือกประเภทลวดลาย – แบบติดตั้งในตัวหรือแบบกำหนดเอง
2. กำหนดค่ารูปแบบ – เลือกหรือป้อน regex
3. เพิ่มตัวยึดตำแหน่ง – แสดงรูปแบบที่คาดหวัง
4. เพิ่มข้อความช่วยเหลือ – อธิบายข้อกำหนด
5. ตั้งค่าข้อความแสดงข้อผิดพลาด – การแก้ไขคู่มือ
6. ทดสอบอย่างละเอียด – ข้อมูลป้อนเข้าที่ถูกต้องและไม่ถูกต้อง

สรุป

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

เครื่องมือสร้างแบบฟอร์มอัตโนมัติ ประกอบด้วยรูปแบบทั่วไป (อีเมล, URL, ตัวอักษร, ตัวเลข, ตัวอักษรและตัวเลขผสมกัน) และรองรับ regex แบบกำหนดเองสำหรับความต้องการการตรวจสอบความถูกต้องเฉพาะด้าน ข้อมูลที่สะอาดเริ่มต้นด้วยการตรวจสอบความถูกต้องที่เหมาะสม

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