การใช้งาน JavaScript Form Validations

ข้อมูลอื่น ๆ เพิ่มเติม และ Download JavaScript Form Validations ได้ที่ http://www.javascript-coder.com/html-form/javascript-form-validation.phtml

1. ทำการแทรก

[CODE] [/CODE]

ไว้ก่อนหน้า </head>

2. สร้าง form โดยมีการตั้งชื่อ form ด้วย เช่น

[CODE]


[/CODE]

3. แทรกคำสั่งด้านล่างต่อไปนี้

[CODE] [/CODE]

โดยที่ myform คือชื่อของ form นั้นๆ

4. คำสั่งสำหรับตรวจสอบ form input ต่าง ๆ ใช้คำสั่งนี้

[CODE] [/CODE]

โดยที่

nameforminput คือชื่อของ form input ของเรา
validation คือคำสั่งที่ต้องการตรวจสอบ ซึ่งจะมีดังต่อไปนี้

  1. required หรือ req เป็นการตั้งให้ใส่ form input นี้เสมอ
  2. maxlen=??? หรือ maxlength=??? เป็นการตรวจสอบค่าที่ใส่ลงไปว่ามีจำนวนตัวอักษรได้ไม่เกินค่าที่กำหนด เช่น ไม่เกิน 25 ตัวอักษรก็ใช้คำสั่ง "maxlen=25"
  3. minlen=??? หรือ minlength=??? เป็นการตรวจสอบค่าที่ใส่ลงไปว่ามีจำนวนตัวอักษรได้ไม่ต่ำกว่าค่าที่กำหนด เช่น ไม่เกิน 25 ตัวอักษรก็ใช้คำสั่ง "minlen=25"
  4. alphanumeric หรือ alnum เป็นการตรวจสอบค่าที่ใส่ที่ครอบคลุมทั้งตัวเลขและตัวอักษร
  5. num หรือ numeric เป็นการตรวจสอบตัวเลข
  6. alpha หรือ alphabetic เป็นการตรวจสอบตัวอักษร
  7. email เป็นการตรวจสอบความถูกต้องของรูปแบบอีเมล
  8. lt=??? หรือ lessthan=??? เป็นการตรวจสอบค่าของข้อมูลว่าต้องเป็นตัวเลข และมีค่าไม่เกินเท่าไหร่ เช่น ต้องการค่าที่เป็นตัวเลขและไม่เกิน 1000 ก็ใส่ "lt=1000"
  9. gt=??? หรือ greaterthan=??? เป็นการตรวจสอบค่าของข้อมูลว่าต้องเป็นตัวเลข และมีค่ามากกว่าเท่าไหร่ เช่น ต้องการค่าที่เป็นตัวเลขและมากกว่า 1000 ก็ใส่ "gt=1000"
  10. regexp=??? เป็นการสร้าง regular expression ตามรูปแบบอื่น ๆ เช่นต้องการให้ใส่ตัวอักษรได้ไม่เกิน 10 ก็ใช้คำสั่ง "regexp=^[A-Za-z]{1,20}$"
  11. dontselect=?? เป็นการตรวจสอบค่าใน selected input items ว่ามีการเลือกค่าไว้หรือเปล่า โดยกำหนดว่าค่าเริ่มต้นที่ห้ามเลือกคืออะไร เช่น selected input items กำหนดค่าเริ่มต้นไว้ที่ 0 ที่มี label ว่า Select one นั้นหมายความว่าห้ามเลือก label Select one เพราะเป็นค่าเริ่มต้น เราจะกำหนดแบบนี้ "dontselect=0"

textalert ส่วนนี้เป็นใส่คำเตือนมีมีการตรวจสอบค่านั้น ๆ แล้วตรงตามเงื่อนไข จะได้เป็น

[CODE] [/CODE]

ตัวอย่างการใช้งานโดยรวมทั้งหมด

[CODE]

First Name
Last Name
EMail
Phone
Address
Country
 

[/CODE]

5 thoughts on “การใช้งาน JavaScript Form Validations

Leave a Reply