آموزش جاوا اسکریپت – اعتبارسنجی فرم در جاوا اسکریپت

آموزش جاوا اسکریپت

در این بخش از سری آموزش جاوا اسکریپت قصد داریم به شما نحوه اعتبارسنجی فرم در جاوا اسکریپت را آموزش بدیم.

 

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

فرم های وب تبدیل به یک بخش اساسی و مهم از اپلیکشن های تحت وب شده اند و معمولا برای جمعاوری اطلاعات کاربر مثل نام, آدرس ایمیل, مکان, سن و… استفاده می شوند. اما ممکن است که کاربر اطلاعاتی را بنابر چیزی که انتظار داشتیم, وارد نکند.

بنابراین برای ذخیره پهنای باند و جلوگیری از ارسال درخواست های غیرضروری و مصرف منابع سرور می توانید داده ها را در سمت کلاینت (سیستم کاربر) با استفاده از جاوا اسکریپت قبل از پاس دادن آن به وب سرور برای انجام عملیات پردازش, اعتبارسنجی (validate) کنیم.

اعتبارسنجی سمت کاربر (Client-Side) می تواند برای ساخت تجربه کاربر بهتر مفید باشد. همچنین سریعتر است چرا که اعتبارسنجی در مرورگر کاربر انجام می شود.

اما اعتبارسنجی سمت سرور (Server-side) نیاز به سابمیت شدن ورودی های کاربر به سمت سرور و بعد اعتبارسنجی آنها دارد. همچنین کاربر باید کمی برای دریافت پاسخ از سمت سرور صبر کند تا دقیقا بداند چه موردی اشتباه است.

در این بخش نگاهی دقیق تر به نحوه اعتبارسنجی فرم در جاوا اسکریپت و مدیریت هر خطایی در ورودی کاربر می پردازیم.

نکته: اعتبارسنجی سمت کاربر یم راه جایگزین برای اعتبارسنجی سمت سرور نیست. شما باید حتما داده های ارسال شده از فرم توسط کاربر را روی سرور اعتبارسنجی کنید حتی اگر در سمت کاربر اعتبارسنجی شده باشند چرا که کاربر مخرب به راحتی می تواند جاوا اسکریپت را روی مرورگر خود غیرفعال کند.

 

اعتبارسنجی فرم در جاوا اسکریپت

فرایند اعتبارسنجی فرم شامل دو بخش است – یکی اعتبارسنجی فیلدهای اجباری برای اطمنیان از اینکه تمام آنها توسط کاربر پر شده اند و دیگری اعتبارسنجی نوع فرمت داده است که اطمینان حاصل کنید نوع داده وارد شده در فرم معتبر است.

حالا, قصد داریم یک مثال جامع برای یادگیری نحوه اعتبارسنجی فرم در جاوا اسکریپت را ببینم.

 

ساخت فرم HTML

اولین کار این است که یک فرم ساده HTML بسازیم که کاربر با کلیک روی دکمه submit اطلاعات وارد شده را ارسال کند. سپس این فایل را با نام form.html در جایی ذخیره و بعد روی آن کلیک می کنیم تا در مرورگر باز شود.

 

ساخت اسکریپت اعتبارسنجی فرم در جاوا اسکریپت

حالا قصد داریم یک فایل جاوا اسکریپت برای نگه داشتن تمام کدهای اعتبارسنجی بسازیم.

این فایل را validator.js نام گذاری و کدهای زیر را در آن قرار می دیم و سپس آن را در مکانی که فایل HTML قبلی را قرار دادیم, انتقال می دیم.

هر کدام از خط کدهای جاوا اسکریپت را با دقت بررسی کنید تا نحوه انجام اعتبارسنجی را یاد بگیرید.

مقدار یک فیلد از فرم می تواند توط سینتکس زیر دریافت شود.

document.formName.fieldName.value یا document.getElementsByName(name).value

اما برای دریافت مقادیری که انتخاب های چندگانه را پشتیبانی می کنند مثل گروه چک باکس ها, نیاز است که یک دستور loop را اجرا کنید (خط ۱۴ تا ۲۱)

همچنین می توانید فرمت داده های وارد شده را با تکنیک Regex که یکی از بهترین و موثرترین تکنیک های اعتبارسنجی ورودی های کاربر است, اعتبارسنجی کنید.

علاوه بر این, اسکریپت بالا اطلاعات وارد شده توسط کاربر را در یک پنجره پیام هشدار alert به منظور پیش نمایش قبل از سابمیت فرم به سمت وب سرور را نشان می دهد.

نکته: به هر حال می توانید فرمت ایمیل را با عبارت با قاعده (Regex) اعتبارسنجی کنید. اما کاربر ممکن است یک ایمیل با فرمت مناسب که اصلا وجود ندارد وارد کند.

 

افزودن استایل برای زیباسازی فرم

درنهایت, یک فایل با نام style.css ایجاد و کدهای زیر را در آن قرار داده و به مسیر دو فایل قبلی انتقال بدید.

خب تمام شد, حالا می توانید فایل form.html را در مرورگر وب خود باز کرده و سعی در وارد کردن بعضی از مقادیر کنید تا ببینید که اسکریپت به داده های نامعتبر چه واکنشی می دهد.

در یک آموزش دیگر نیز با به طور کامل اعتبارسنجی فرم در جاوا اسکریپت را بررسی و همره مثال اعتبارسنجی انواع داده ها را آموزش دادیم.

 

امیدواریم در این بخش آموزش جاوا اسکریپت, از آموزش اعتبارسنجی فرم در جاوا اسکریپت نهایت استفاده را برده باشد.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی