การตรวจสอบฟอร์ม (Form Validation)

การตรวจาอบความถูกต้องของฟอร์มเป็นสิ่งที่สำคัญ เพราะอาจเป็นส่วนหนึ่งที่ช่วยปกป้องฟอร์มของเราจากฉฮกเกอร์ หรือพวกที่สแปมข้อมูล

กฎการตรวจสอบฟอร์ม

ฟิลด์

กฎการตรวจสอบ

ชื่อ

Required. +ประกอบด้วยตัวอักษรและช่องว่างเท่านั้น

อีเมลล์

Required. + ต้องมีที่อยู่อีเมลล์ที่ถูกต้อง ประกอบด้วย @ และ .

เว็บไซต์

หากมี ต้องเป็น URL ที่ถูกต้อง

ความคิดเห็น

ช่องใส่ข้อมูลหลายบรรทัด

เพศ

Required. เลือกได้เพียงหนึ่งอย่างเท่านั้น

ตารางที่ 1 กฎการตรวจสอบฟอร์ม

จากตารางที่ 1 สามารถเขียนในรูปแบบ HTML Form ได้ดังนี้

<html>

 <body>

  Name: <input type="text" name="name">

  E-mail: <input type="text" name="email">

  Website: <input type="text" name="website">

  Comment: <textarea name="comment" rows="5" cols="40"></textarea>

  Gender:

   <input type="radio" name="gender" value="female">Female

   <input type="radio" name="gender" value="male">Male

   <input type="radio" name="gender" value="other">Other

 </body>

</html>

ไฟล์ที่ 1 forms.php

องค์ประกอบของแบบฟอร์ม

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

อธิบายเพิ่มเติม

  • ตัวแปร $ _SERVER [“PHP_SELF”] เป็นตัวแปร super global ที่ส่งคืนชื่อไฟล์ของสคริปต์ที่กำลังดำเนินการอยู่ (ไฟล์ปัจจุบัน) ด้วยวิธีนี้ผู้ใช้จะได้รับข้อความแสดงข้อผิดพลาดในหน้าเดียวกับแบบฟอร์ม
  • ฟังก์ชัน htmlspecialchars() เป็นฟังก์ชั่นแปลงอักขระพิเศษเป็นเอนทิตี HTML ซึ่งหมายความว่าจะแทนที่อักขระ HTML เช่น น้อยกว่า < และมากกว่า > ด้วย &lt; และ &gt ;. วิธีนี้ป้องกันไม่ให้ผู้โจมตีใช้ประโยชน์จากโค้ดโดยการแทรกโค้ด HTML หรือ Javascript (การโจมตีแบบ Cross-site Scripting) ในแบบฟอร์ม
  • ในการส่งฟอร์มโดยปกติใช้ วิธีการ (method) POST หรือที่เขียนภายในโค้ด method=”post”

ขั้นตอนต่อไปคือการสร้างฟังก์ชันที่จะทำการตรวจสอบฟอร์มให้กับเรา (ซึ่งสามารถใช้งานซ้ำได้ )

โดยตั้งชื่อฟังก์ชันว่า test_input()

ตอนนี้เราสามารถตรวจสอบตัวแปร $ _POST แต่ละตัวแปรด้วยฟังก์ชัน test_input() ดังสคริปต์ต่อไปนี้

<?php

// define variables and set to empty values

$name = $email = $gender = $comment = $website = "";



if ($_SERVER["REQUEST_METHOD"] == "POST") {

  $name = test_input($_POST["name"]);

  $email = test_input($_POST["email"]);

  $website = test_input($_POST["website"]);

  $comment = test_input($_POST["comment"]);

  $gender = test_input($_POST["gender"]);

}


function test_input($data) {

  $data = trim($data);

  $data = stripslashes($data);

  $data = htmlspecialchars($data);

  return $data;

}

?>

ไฟล์ที่ 2 ฟอร์มตรวจสอบ

จะสังเกตว่าในช่วงเริ่มต้นของสคริปต์เราจะตรวจสอบว่ามีการส่งแบบฟอร์มโดยใช้ $ _SERVER [“REQUEST_METHOD”] หรือไม่ หาก REQUEST_METHOD เป็น POST แสดงว่าแบบฟอร์มถูกส่งแล้วและควรได้รับการตรวจสอบความถูกต้อง หากยังไม่ได้ส่งให้ข้ามการตรวจสอบความถูกต้องและแสดงแบบฟอร์มเปล่า

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

ขั้นตอนต่อไปคือการกำหนดช่องป้อนข้อมูลที่จำเป็นและสร้างข้อความแสดงข้อผิดพลาดหากจำเป็น

 

ต่อยอดจากไฟล์ที่ 2 เราได้เพิ่มตัวแปรใหม่: $nameErr, $emailErr, $genderErr และ $websiteErr ตัวแปรข้อผิดพลาดเหล่านี้จะเก็บข้อความแสดงข้อผิดพลาดสำหรับฟิลด์ที่จำเป็น เราได้เพิ่มคำสั่ง if else คำสั่งสำหรับตัวแปร $ _POST แต่ละรายการ ตรวจสอบว่าตัวแปร $ _POST ว่างเปล่า ด้วยฟังก์ชั่น empty() หากว่างเปล่าข้อความแสดงข้อผิดพลาดจะถูกเก็บไว้ในตัวแปรข้อผิดพลาดที่แตกต่างกันและหากไม่ว่างเปล่าข้อความจะส่งข้อมูลอินพุตของผู้ใช้ผ่านฟังก์ชั่น test_input()

<?php

// define variables and set to empty values

$nameErr = $emailErr = $genderErr = $websiteErr = "";

$name = $email = $gender = $comment = $website = "";


if ($_SERVER["REQUEST_METHOD"] == "POST") {

  if (empty($_POST["name"])) {

    $nameErr = "Name is required";

  } else {

    $name = test_input($_POST["name"]);

  }


  if (empty($_POST["email"])) {

    $emailErr = "Email is required";

  } else {

    $email = test_input($_POST["email"]);

  }


  if (empty($_POST["website"])) {

    $website = "";

  } else {

    $website = test_input($_POST["website"]);

  }


  if (empty($_POST["comment"])) {

    $comment = "";

  } else {

    $comment = test_input($_POST["comment"]);

  }


  if (empty($_POST["gender"])) {

    $genderErr = "Gender is required";

  } else {

    $gender = test_input($_POST["gender"]);

  }

}

?>

ไฟล์ที่ 3 ตรวจสอบฟอร์ม

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

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">




Name: <input type="text" name="name">

<span class="error">* <?php echo $nameErr;?></span>

<br><br>

E-mail:

<input type="text" name="email">

<span class="error">* <?php echo $emailErr;?></span>

<br><br>

Website:

<input type="text" name="website">

<span class="error"><?php echo $websiteErr;?></span>

<br><br>

Comment: <textarea name="comment" rows="5" cols="40"></textarea>

<br><br>

Gender:

<input type="radio" name="gender" value="female">Female

<input type="radio" name="gender" value="male">Male

<input type="radio" name="gender" value="other">Other

<span class="error">* <?php echo $genderErr;?></span>

<br><br>

<input type="submit" name="submit" value="Submit">




</form>

ไฟล์ที่ 4 ฟอร์ม

 

ตรวจสอบอีเมลล์และ URL

1.ตรวจสอบอีเมลล์

วิธีที่ง่ายและปลอดภัยที่สุดในการตรวจสอบว่าที่อยู่อีเมลนั้นมีรูปแบบที่ถูกต้องหรือไม่คือการใช้ฟังก์ชัน filter_var () ของ PHP

$email = test_input($_POST["email"]);

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

  $emailErr = "Invalid email format";

}

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

 

2.ตรวจสอบ URL

$website = test_input($_POST["website"]);

if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {

  $websiteErr = "Invalid URL";

}

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

<?php

// define variables and set to empty values

$nameErr = $emailErr = $genderErr = $websiteErr = "";

$name = $email = $gender = $comment = $website = "";


if ($_SERVER["REQUEST_METHOD"] == "POST") {

  if (empty($_POST["name"])) {

    $nameErr = "Name is required";

  } else {

    $name = test_input($_POST["name"]);

    // check if name only contains letters and whitespace

    if (!preg_match("/^[a-zA-Z-' ]*$/",$name)) {

      $nameErr = "Only letters and white space allowed";

    }

  }


  if (empty($_POST["email"])) {

    $emailErr = "Email is required";

  } else {

    $email = test_input($_POST["email"]);

    // check if e-mail address is well-formed

    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

      $emailErr = "Invalid email format";

    }

  }


  if (empty($_POST["website"])) {

    $website = "";

  } else {

    $website = test_input($_POST["website"]);

    // check if URL address syntax is valid (this regular expression also allows dashes in the URL)

    if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {

      $websiteErr = "Invalid URL";

    }

  }



  if (empty($_POST["comment"])) {

    $comment = "";

  } else {

    $comment = test_input($_POST["comment"]);

  }


  if (empty($_POST["gender"])) {

    $genderErr = "Gender is required";

  } else {

    $gender = test_input($_POST["gender"]);

  }

}

?>

ไฟล์ที่ 5 ตรวจสอบความถูกต้องของอีเมลล์ และ URL

 

ตัวอย่างของแบบฟอร์มที่สมบูรณ์

<!DOCTYPE HTML>  

<html>

<head>

<style>

.error {color: #FF0000;}

</style>

</head>

<body>  

<?php

// define variables and set to empty values

$nameErr = $emailErr = $genderErr = $websiteErr = "";

$name = $email = $gender = $comment = $website = "";


if ($_SERVER["REQUEST_METHOD"] == "POST") {

  if (empty($_POST["name"])) {

    $nameErr = "Name is required";

  } else {

    $name = test_input($_POST["name"]);

    // check if name only contains letters and whitespace

    if (!preg_match("/^[a-zA-Z-' ]*$/",$name)) {

      $nameErr = "Only letters and white space allowed";

    }

  }

  if (empty($_POST["email"])) {

    $emailErr = "Email is required";

  } else {

    $email = test_input($_POST["email"]);

    // check if e-mail address is well-formed

    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

      $emailErr = "Invalid email format";

    }

  }

  if (empty($_POST["website"])) {

    $website = "";

  } else {

    $website = test_input($_POST["website"]);

    // check if URL address syntax is valid (this regular expression also allows dashes in the URL)

    if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {

      $websiteErr = "Invalid URL";

    }

  }


  if (empty($_POST["comment"])) {

    $comment = "";

  } else {

    $comment = test_input($_POST["comment"]);

  }


  if (empty($_POST["gender"])) {

    $genderErr = "Gender is required";

  } else {

    $gender = test_input($_POST["gender"]);

  }

}


function test_input($data) {

  $data = trim($data);

  $data = stripslashes($data);

  $data = htmlspecialchars($data);

  return $data;

}

?>


<h2>PHP Form Validation Example</h2>

<p><span class="error">* required field</span></p>

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  

  Name: <input type="text" name="name" value="<?php echo $name;?>">

  <span class="error">* <?php echo $nameErr;?></span>

  <br><br>

  E-mail: <input type="text" name="email" value="<?php echo $email;?>">

  <span class="error">* <?php echo $emailErr;?></span>

  <br><br>

  Website: <input type="text" name="website" value="<?php echo $website;?>">

  <span class="error"><?php echo $websiteErr;?></span>

  <br><br>

  Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>

  <br><br>

  Gender:

  <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female

  <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male

  <input type="radio" name="gender" <?php if (isset($gender) && $gender=="other") echo "checked";?> value="other">Other  

  <span class="error">* <?php echo $genderErr;?></span>

  <br><br>

  <input type="submit" name="submit" value="Submit">  

</form>

<?php

echo "<h2>Your Input:</h2>";

echo $name;

echo "<br>";

echo $email;

echo "<br>";

echo $website;

echo "<br>";

echo $comment;

echo "<br>";

echo $gender;

?>

</body>

</html>

ไฟล์ที่ 6 แบบฟอร์มตรวจสอบสมบูรณ์