Dreamweaver CS

ตรวจสอบความถูกต้องของฟอร์มข้อมูลด้วย JavaScript

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

ในหลายเว็บจะมีการให้ผู้ใช้งานกรอกข้อมูลในแบบฟอร์มเพื่อสมัครสมาชิก ซึ่งในการกรอกแบบฟอร์มนั้นอาจมีการผิดพลาดในการกรอกข้อมูลได้ เช่นผู้ใช้งานกรอก email ผิดพลาด ในบทนี้จะเป็นการใช้ JavaScript เพื่อตรวจสอบข้อมูลที่อยู่ในแบบฟอร์ม

ตรวจสอบความถูกต้องของข้อมูลด้วย JavaScript

1. ไปที่ window > behaviors หรือ Shift + F4 เพื่อเปิดหน้าต่าง Behaviors ขึ้นมาดังรูป



2. คลิกแบบฟอร์มที่ต้องการจะให้ JavaScript ตรวจสอบค่า



3. จากนั้นคลิกที่ปุ่ม จะมีหน้าต่างดังนี้ขึ้นมา ให้เราเลือกที่ Validate form



4. จะมีหน้าต่างขึ้นมาดังรูป



มีรายละเอียดดังนี้

1. Field เลือกช่องที่ต้องการให้ตรวจสอบ

2. Value ถ้าเราเลือกที่ Required หมายถึงจำเป็นต้องกรอกค่าในช่องนี้

3. Accept ค่าที่ต้องการให้รับ

Anything ค่าทั่วไป

Number ค่าตัวเลขเท่านั้น

Email Address ค่า Email เท่านั้น

Number from กำหนดค่าตัวเลขที่ต้องการให้ใส่

5. คลิก OK ที่หน้าต่าง Behaviors จะเป็นดังนี้



ในตัวอย่างจะเลือกให้กรอกค่าในช่อง Name และ Email โดยที่ช่อง Email เลือก Accept > Email เท่านั้น

ดูตัวอย่างแบบฟอร์มได้ที่นี่


เลื่อนขึ้นด้านบน