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

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

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

فرم های وب به بخشی ضروری از برنامه های کاربردی وب تبدیل شده اند. اغلب برای جمع آوری اطلاعات کاربر مانند نام، آدرس ایمیل، مکان، سن و …استفاده می شود.اما ممکن است برخی از کاربران داده‌هایی را که انتظار دارید را وارد نکنند.بنابراین برای صرفه جویی در پهنای باند و جلوگیری از فشار غیرضروری بر منابع سرور خود، می توانید داده های فرم را در سمت کلاینت (یعنی سیستم کاربر) با استفاده از جاوا اسکریپت قبل از ارسال آن به وب سرور برای پردازش بیشتر تأیید کنید.

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

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

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

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

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

خوب، بیایید مستقیماً به آن بپردازیم و ببینیم که این واقعاً چگونه کار می کند.

ایجاد فرم HTML

اجازه دهید ابتدا یک فرم ساده HTML ایجاد کنیم که وقتی کاربر روی دکمه ارسال کلیک می‌کند، در سمت کلاینت با استفاده از جاوا اسکریپت اعتبارسنجی می‌کنیم. خوب، بیایید یک فایل HTML با نام “application-form.html” ایجاد کنیم و کد زیر را در آن قرار دهیم، سپس آن را در جایی از سیستم خود ذخیره کنیم.

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

اکنون می‌خواهیم یک فایل جاوا اسکریپت ایجاد کنیم که اسکریپت اعتبارسنجی کامل ما را در خود نگه می‌دارد.

خوب، بیایید یک فایل جاوا اسکریپت به نام “validator.js” بسازیم و کد زیر را داخل آن قرار دهیم. سپس آن را در همان مکانی که فایل HTML قبلی را ذخیره کرده بودید، ذخیره کنید. برای درک نحوه عملکرد اعتبارسنجی جاوا اسکریپت، هر خط از کد مثال زیر را مرور کنید:

 

با استفاده ازdocument.formName.fieldName.value یا document.getElementsByName(name).value می‌توان به مقدار یک فیلد فرم فردی دسترسی پیدا کرد و بازیابی کرد.اما، برای دریافت مقادیر از یک فیلد فرم که از چندین انتخاب پشتیبانی می کند، مانند گروهی از چک باکس ها، باید از عبارت حلقه همانطور که در مثال بالا نشان داده شده است استفاده کنید (خط 14 تا 21).

همچنین برای بررسی اینکه آیا فرمت داده های ورودی درست است یا نه، از عبارات منظم استفاده کرده ایم. این یکی از موثرترین تکنیک ها برای اعتبارسنجی ورودی های کاربر است.

نکته: با این حال، می‌توانید قالب ایمیل را با استفاده از عبارت معمولی تأیید کنید. اما یک کاربر ممکن است ایمیلی را وارد کند که به درستی قالب بندی شده باشد اما وجود نداشته باشد. بنابراین برای تایید اعتبار ایمیل، ایمیل تایید را برای کاربر ارسال کنید و بررسی کنید که آیا ایمیل واقعا وجود دارد یا خیر.

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

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

خب، اکنون فایل “application-form.html” را در یک مرورگر وب باز کنید و سعی کنید برخی از داده ها را پر کنید و ببینید وقتی یک داده نامعتبر در فیلد فرم وارد می شود، اسکریپت چگونه پاسخ می دهد.خروجی نهایی نیز به این شکل خواهد بود.

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

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

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

 

 

 

 

 

 

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 2 میانگین: 5]
اشتراک‌گذاری

دیدگاهتان را بنویسید

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