Form

การใช้งาน 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]

เขียน รับ get / post ใน form method ระวังโดน hack หรือเป็นรูโหว่

นี่เป็นปัญหามาก ในเป็นการสร้างนิสัยเสียในการเขียนโปรแกรมในภาษา PHP ในเรื่องการที่คนเขียน นิสัยเสีย หรือติดจากหนังสือบางเล่ม ที่ไม่ค่อยใช้ GET หรือ POST ในการรับค่าจาก form ต่างๆ ใน method ต่างๆ มันยังผลไปสู่การ Hack หรือการเจาะได้ เช่น เมื่อเร็วๆ นี้ ทำ script PHP สำหรับการ vote freshy boys/girls ที่ ม. ที่ผมเรียนอยู่ ผมหล่ะปวดกับการหล่ะหลวม ของตัวผมเองในการเขียน script ระบบ vote อย่างแรง ตัว form คือ
[HTML]





[/HTML]
ตัวอย่างด้านล่าง มีช่องโหว่ครับ เพราะว่าในระบบ จะรับ แค่ poll_id เท่านั้นส่วน vote_for และ action ไม่ได้ทำการกรอง อ่าน POST หรือ GET แต่ประการใด จากด้านล่าง
[PHP]
$poll_id = $_POST[“poll_id”];
require (“poll/poll_cookie.php”);
include(“poll/booth_inc.php”);
[/PHP]
ทำให้เกิด !!!!
[CODE]


<body> </body>
[/CODE]
เห็นไหมคืออะไร เค้ายิงผ่าน GET Method แทนครับ อ่านหมด 3 ตัวแปรเลย เพราะอะไร ? อย่างแรกครับ $poll_id = $_POST[“poll_id”]; ไม่พอต่อการดัก method จาก GET แต่อย่างใด เพราะว่ายังไง ตัวแปรใน poll_id ที่อยู่ใน form มันก็ยังมาใส่ใน $poll_id ได้จาก GET Method ที่ไม่ได้ lock ซึ่งเช่นเดียวกับ vote_for เช่นกัน ที่มันก็ไปใส่ใน $vote_for ใน script ด้วยเช่นกัน ทำให้เกิดการตั้งเวลาการ vote ได้โดยที่คน vote ไม่ต้องอยู่ที่เครื่อง แค่เปิด browser page นี้ไว้ เท่านั้นเอง แถมถ้าเปิดไว้สัก 100 เครื่องนี่มหาศาลมากทีเดียว ผมเลยต้องกลับลำ และแ้ก้ระบบ script ใหม่หมดอีกครั้งโดยดัก 2 ตัวพอ เพราะว่า action อันนี้ไม่ค่อยสำคัญเท่า vote_for กับ poll_id ที่เป็นตัวจักรสำคัญ แก้คือ ดักทั้ง GET และ POST เราต้องการให้ Method ไหนเข้ามาก็ให้มันผ่านไปเท่าที่เราต้องการเท่านั้น
[PHP]
if(empty($_POST[“poll_id”])) {
$poll_id = $_GET[“poll_id”];
}
else {
$poll_id = $_POST[“poll_id”];
}
if(!empty($_GET[“vote_for”]) or !empty($vote_for)) {
header(“Location: index.php”);
exit;
}
else {
$vote_for = $_POST[“vote_for”];
}
require (“poll/poll_cookie.php”);
include(“poll/booth_inc.php”);
[/PHP]

ผมเลยดักด้วยการรับค่า poll_id จากทั้ง GET และ POST Method ทั้งหมดด้วยการดักไว้ก่อน ตามด้วย Condition ตรวจสอบ ว่าต้องไม่มีการใส่ vote_for ใน GET Method หรือ มีการลักลอบใส่ผ่าน $vote_for มาแต่อย่างใดถ้ามีก็เด้งไป index.php ทันที แต่ถ้าไม่มีก็รับค่าจาก POST มาเลย แล้วทำการ run ตัว script ต่อไปครับ นี่เป็นสิ่งที่รูโหว่ของคนที่ไม่ชอบใช้ POST / GET Method ใน PHP ครับ หรือตั้งชื่อตัวแปรที่มารับ POST / GET Method ที่เหมือนกัน ทางแก้คือ

  1. ใช้ GET / POST Method เสมอๆ ในการรับค่าผ่าน form ต่าง script กัน
  2. ตั้งตัวแปรใน script ที่แตกต่างจาก GET /POST Method เข้าไว้ครับ
  3. ถ้าจำเป็นต้องตั้ง ก็ต้องมี function ในการเช็คตัวแปรที่ส่งผ่านเข้าออก script ให้มากครับ
  4. ใช้ function / class มาแก้ปัญหานี้ครับ ช่วยได้มาก สำหรับคนที่มีเวลาเขียนโปรแกรม หรือ optimize / debug เยอะๆ ครับ (อันนี้เร่งๆ พอสมควรครับ) อันนี้เป็นสิ่งเตือนในการเขียน script ที่เป็น public ได้มากเลยหล่ะครับ

ซึ่งปัญหานี้เกิดจากการใช้ register_global ใน php ที่ตั้ง enable ไว้นั้นเอง ถ้าปิดไปการใช้ตัวแปรภายใน php script ปลอดภัยมากขึ้น