Form Validation

อนันต์ดา ราศรีเพ็ญงาม 630710853

Form Validation คืออะไร?

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

Form Validation PHP Code

<!DOCTYPE HTML>  
<html>
<head>
</head>
<body>  

<?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;
}
?>

<h2>PHP Form Validation Example</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
  Name: <input type="text" name="name">
  <br><br>
  E-mail: <input type="text" name="email">
  <br><br>
  Website: <input type="text" name="website">
  <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
  <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>

Form Validation C

ในภาษา C การตรวจสอบข้อมูลในฟอร์มส่วนใหญ่จะทำการตรวจสอบจากข้อมูลที่รับเข้ามาจากผู้ใช้ โดยสามารถใช้ฟังก์ชันต่าง ๆ เช่น scanf() เพื่ออ่านข้อมูลและตรวจสอบข้อมูลที่ถูกต้อง

#include <stdio.h>
#include <string.h>

int main() {
    char email[100];
    char password[100];
    
    printf("Enter your email: ");
    scanf("%s", email);

    // ตรวจสอบรูปแบบอีเมล
    if (strchr(email, '@') == NULL || strchr(email, '.') == NULL) {
        printf("Invalid email format.\n");
    }

    printf("Enter your password: ");
    scanf("%s", password);

    // ตรวจสอบความยาวรหัสผ่าน
    if (strlen(password) < 8) {
        printf("Password must be at least 8 characters long.\n");
    }

    return 0;
}

โค้ด C ตัวอย่างนี้ใช้ฟังก์ชัน scanf เพื่อรับข้อมูลอีเมลและรหัสผ่านจากผู้ใช้ และใช้ฟังก์ชัน strchr เพื่อตรวจสอบว่าอีเมลมีเครื่องหมาย @ และจุด (.) ซึ่งเป็นรูปแบบอีเมลที่ถูกต้องหรือไม่ และใช้ฟังก์ชัน strlen เพื่อตรวจสอบความยาวของรหัสผ่าน

ข้อดี: เรียบง่าย ตรงไปตรงมา เหมาะกับการเรียนรู้เบื้องต้น
ข้อจำกัด: ไม่มีการตรวจสอบรูปแบบอีเมลที่ละเอียด เช่น ไม่มีการตรวจสอบโดเมนหรืออักขระพิเศษอื่น ๆ

Form Validation Java

import java.util.Scanner;

public class FormValidation {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        String email, password;

        System.out.print("Enter your email: ");
        email = scanner.nextLine();

        // ตรวจสอบรูปแบบอีเมล
        if (!email.contains("@") || !email.contains(".")) {
            System.out.println("Invalid email format.");
        }

        System.out.print("Enter your password: ");
        password = scanner.nextLine();

        // ตรวจสอบความยาวรหัสผ่าน
        if (password.length() < 8) {
            System.out.println("Password must be at least 8 characters long.");
        }

        scanner.close();
    }
}

ใน Java ใช้ Scanner เพื่อรับข้อมูลจากผู้ใช้และใช้ Pattern กับ Regular Expressions (regex) ในการตรวจสอบรูปแบบอีเมล และใช้เมธอด length() เพื่อตรวจสอบความยาวของรหัสผ่าน

ข้อดี: สามารถใช้ regex เพื่อตรวจสอบรูปแบบที่ซับซ้อนขึ้นได้
ข้อจำกัด: Syntax อาจดูซับซ้อนสำหรับผู้ที่เริ่มต้นเรียนรู้ Java

Form Validation Python

import re

email = input("Enter your email: ")
password = input("Enter your password: ")

# ตรวจสอบรูปแบบอีเมล
if not re.match(r"[^@]+@[^@]+\.[^@]+", email):
    print("Invalid email format.")

# ตรวจสอบความยาวรหัสผ่าน
if len(password) < 8:
    print("Password must be at least 8 characters long.")

Python ใช้โมดูล re ในการตรวจสอบรูปแบบอีเมลด้วย Regular Expressions และใช้ฟังก์ชัน len() ในการตรวจสอบความยาวของรหัสผ่าน

ข้อดี: Syntax กระชับ อ่านง่าย ทำให้การตรวจสอบรูปแบบข้อมูลทำได้ง่ายและรวดเร็ว
ข้อจำกัด: ไม่รองรับการตรวจสอบรูปแบบอย่างละเอียดหากไม่ใช้ regex ที่ซับซ้อน

Form Validation JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Form Validation</title>
</head>
<body>
    <form id="myForm">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email">
        <span class="error" id="emailError"></span><br><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <span class="error" id="passwordError"></span><br><br>

        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById("myForm").addEventListener("submit", function(event) {
            event.preventDefault();

            const email = document.getElementById("email").value;
            const password = document.getElementById("password").value;
            let isValid = true;

            // ตรวจสอบ Email
            const emailError = document.getElementById("emailError");
            if (!email.includes("@") || !email.includes(".")) {
                emailError.textContent = "Invalid email format.";
                isValid = false;
            } else {
                emailError.textContent = "";
            }

            // ตรวจสอบ Password
            const passwordError = document.getElementById("passwordError");
            if (password.length < 8) {
                passwordError.textContent = "Password must be at least 8 characters long.";
                isValid = false;
            } else {
                passwordError.textContent = "";
            }

            if (isValid) {
                alert("Form validation passed.");
            }
        });
    </script>
</body>
</html>

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

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

เปรียบเทียบ

สรุป

การทำ Form Validation เป็นขั้นตอนที่สำคัญในการพัฒนาเว็บแอปพลิเคชัน โดยแต่ละภาษามีวิธีการและแนวทางที่แตกต่างกัน ตั้งแต่การตรวจสอบข้อมูลในฝั่งไคลเอนต์ (JavaScript) ไปจนถึงการตรวจสอบข้อมูลในฝั่งเซิร์ฟเวอร์ (PHP) ซึ่งการเลือกใช้ภาษาหรือเทคโนโลยีขึ้นอยู่กับความต้องการและบริบทของการพัฒนาแอปพลิเคชันของคุณ

<Reference>

PHP

W3Schools - PHP Form Validation
GeeksforGeeks - PHP Form Validation

TutorialsPoint - C String Functions
GeeksforGeeks - Input/Output in C

Java

Python

Javascript

W3Schools - JavaScript Form Validation
GeeksforGeeks - JavaScript Form Validation

PreviousForm Handling NextForms - Required Fields

Last updated 1 year ago

hashtagForm Validation PHP Code

hashtagForm Validation C

hashtagForm Validation Java

hashtagForm Validation Python

hashtagForm Validation JavaScript

hashtagเปรียบเทียบ

hashtagสรุป

hashtag<Reference>