ساخت فرم با اعتبارسنجی سمت کلاینت و PHP

اعتبارسنجی فرم یکی از جنبه‌های حیاتی توسعه وب است. این فرآیند تضمین می‌کند که داده‌های وارد شده توسط کاربر معتبر و مطابق با الزامات برنامه هستند. اعتبارسنجی می‌تواند در دو سطح انجام شود: سمت کلاینت (Client-Side) و سمت سرور (Server-Side). در این مقاله، به بررسی جامع ساخت فرم با اعتبارسنجی سمت کلاینت با استفاده از HTML5 و JavaScript و همچنین نحوه پردازش و اعتبارسنجی تکمیلی در سمت سرور با PHP خواهیم پرداخت.

اهمیت اعتبارسنجی سمت کلاینت

اعتبارسنجی سمت کلاینت مزایای متعددی دارد:

• بهبود تجربه کاربری: با ارائه بازخورد فوری به کاربر در مورد خطاهای ورودی، از ارسال اطلاعات ناقص یا نادرست جلوگیری می‌کند.
• کاهش بار سرور: با فیلتر کردن داده‌های نامعتبر قبل از ارسال به سرور، از پردازش‌های غیرضروری و مصرف منابع سرور جلوگیری می‌کند.
• سرعت پاسخگویی: بازخورد فوری به کاربر باعث افزایش سرعت و تعامل در فرآیند ارسال فرم می‌شود.

ساخت فرم HTML5

HTML5 ویژگی‌های قدرتمندی برای ساخت فرم و اعتبارسنجی اولیه ارائه می‌دهد. از جمله این ویژگی‌ها می‌توان به موارد زیر اشاره کرد:

• نوع ورودی (Input Types): انواع مختلفی از ورودی‌ها مانند text، email، number، date و غیره وجود دارند که به طور خودکار اعتبارسنجی‌های اولیه را انجام می‌دهند.
• ویژگی‌های اعتبارسنجی (Validation Attributes): ویژگی‌هایی مانند required، minlength، maxlength، min، max، pattern و غیره برای تعیین قوانین اعتبارسنجی استفاده می‌شوند.

نمونه‌ای از یک فرم HTML5 با اعتبارسنجی اولیه:

نام:

ایمیل:

رمز عبور:

سن:

شماره تلفن:

در این مثال:

• required: فیلد را اجباری می‌کند.
• minlength: حداقل طول فیلد متنی را تعیین می‌کند.
• min و max: حداقل و حداکثر مقدار فیلد عددی را تعیین می‌کنند.
• pattern: یک الگوی regex را برای اعتبارسنجی فیلد متنی تعیین می‌کند.

اعتبارسنجی سمت کلاینت با JavaScript

اگرچه HTML5 اعتبارسنجی‌های اولیه را ارائه می‌دهد، اما برای اعتبارسنجی‌های پیچیده‌تر و ارائه بازخورد سفارشی، استفاده از JavaScript ضروری است. می‌توان از رویدادهای JavaScript مانند onsubmit برای اعتبارسنجی فرم قبل از ارسال استفاده کرد.

نمونه‌ای از اعتبارسنجی فرم با JavaScript:

const form = document.querySelector(‘form’);

form.addEventListener(‘submit’, function(event) {
let isValid = true;

const name = document.getElementById(‘name’).value;
const email = document.getElementById(’email’).value;
const password = document.getElementById(‘password’).value;
const age = document.getElementById(‘age’).value;
const phone = document.getElementById(‘phone’).value;

if (name.length < 3) {
alert('نام باید حداقل 3 کاراکتر داشته باشد.');
isValid = false;
}

if (!email.includes('@')) {
alert('ایمیل معتبر نیست.');
isValid = false;
}

if (password.length < 8) {
alert('رمز عبور باید حداقل 8 کاراکتر داشته باشد.');
isValid = false;
}

if (age 100) {
alert(‘سن باید بین 18 تا 100 سال باشد.’);
isValid = false;
}

if (phone.length !== 10 || !/^[0-9]+$/.test(phone)) {
alert(‘شماره تلفن معتبر نیست.’);
isValid = false;
}

if (!isValid) {
event.preventDefault(); // از ارسال فرم جلوگیری می‌کند
}
});

در این مثال، قبل از ارسال فرم، مقادیر فیلدها بررسی می‌شوند و در صورت وجود خطا، یک پیام هشدار نمایش داده می‌شود و از ارسال فرم جلوگیری می‌شود.

پردازش و اعتبارسنجی سمت سرور با PHP

اعتبارسنجی سمت کلاینت به تنهایی کافی نیست. کاربر می‌تواند JavaScript را غیرفعال کند یا داده‌های ارسالی را دستکاری کند. بنابراین، اعتبارسنجی سمت سرور ضروری است. PHP یک زبان برنامه‌نویسی قدرتمند برای پردازش و اعتبارسنجی داده‌های فرم در سمت سرور است.

فایل process.php:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$email = $_POST["email"];
$password = $_POST["password"];
$age = $_POST["age"];
$phone = $_POST["phone"];

$errors = [];

if (strlen($name) < 3) {
$errors[] = "نام باید حداقل 3 کاراکتر داشته باشد.";
}

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = "ایمیل معتبر نیست.";
}

if (strlen($password) < 8) {
$errors[] = "رمز عبور باید حداقل 8 کاراکتر داشته باشد.";
}

if ($age 100) {
$errors[] = “سن باید بین 18 تا 100 سال باشد.”;
}

if (!preg_match(‘/^[0-9]{10}$/’, $phone)) {
$errors[] = “شماره تلفن معتبر نیست.”;
}

if (empty($errors)) {
// پردازش داده‌ها و ذخیره در پایگاه داده
echo “فرم با موفقیت ارسال شد!”;
} else {
// نمایش خطاها
echo “خطا در ارسال فرم:
“;
foreach ($errors as $error) {
echo $error . “
“;
}
}
}
?>

در این مثال:

• $_SERVER["REQUEST_METHOD"] == "POST": بررسی می‌کند که فرم با متد POST ارسال شده باشد.
• $_POST: آرایه‌ای است که داده‌های ارسالی از فرم را در خود نگه می‌دارد.
• filter_var($email, FILTER_VALIDATE_EMAIL): از یک فیلتر داخلی PHP برای اعتبارسنجی ایمیل استفاده می‌کند.
• preg_match('/^[0-9]{10}$/', $phone): از یک عبارت باقاعده (regex) برای اعتبارسنجی شماره تلفن استفاده می‌کند.

نکات تکمیلی

در اینجا چند نکته تکمیلی برای ساخت فرم با اعتبارسنجی سمت کلاینت و PHP آورده شده است:

• استفاده از کتابخانه‌های JavaScript: کتابخانه‌هایی مانند jQuery Validation Plugin می‌توانند فرآیند اعتبارسنجی سمت کلاینت را ساده‌تر کنند.
• استفاده از فریم‌ورک‌های PHP: فریم‌ورک‌هایی مانند Laravel و Symfony ابزارهای قدرتمندی برای اعتبارسنجی و پردازش فرم ارائه می‌دهند.
• امنیت: همیشه داده‌های ورودی را قبل از استفاده در پایگاه داده یا نمایش در وب‌سایت، پاکسازی کنید تا از حملات XSS و SQL Injection جلوگیری کنید.
• دسترسی‌پذیری: اطمینان حاصل کنید که فرم شما برای کاربران با نیازهای خاص (مانند کاربران نابینا) قابل دسترس باشد.

با رعایت این نکات و استفاده از تکنیک‌های ارائه شده در این مقاله، می‌توانید فرم‌های امن، قابل اعتماد و کاربرپسند ایجاد کنید.