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

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

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

Free-Learn

نحوه اعتبار سنجی فرم ها

خب اول یه سوال بپرسم!؟ کیا میدونن خوده فرم رو چجوری و با استفاده از چه زبانی میشه ایجاد کرد؟ یعنی الان مثلا ما میخوایم یه فرم در صفحه ایجاد کنیم خب باید چکار کنیم؟

آره درسته، خوده فرم و عناصرش رو با استفاده از زبان HTML میشه ایجاد کرد و اینم میدونیم که استایل دهی و یجورایی شکل شمایل فرم رو هم میشه با استفاده از CSS ایجاد کرد.

پیشنهاد میکنم حتما آموزش کار با فرم ها در HTML را مشاهده نمایید.

حال میخوایم یاد بگیریم که چجوری میتونیم همین فرمی که ایجادش کردیم رو اعتبارسنجی کنیم ( اعتبار سنجی یعنی مثلا اجازه ندیم فرم خالی ارسال بشه یا مثلا شاید بخوایم کاربر فقط اعداد بین ۱ تا ۵ رو وارد کنه و… )

Free-Learn

انواع روش های اعتبارسنجی فرم ها

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

یعنی شما از زبان HTML بگیر تا زبان JavaScript و JQuery و PHP و هر زبان دیگه میشه باهاشون فرم هارو اعتبارسنجی کرد، ولی خب ما فعلا با HTML و جاوااسکریپت میخوایم اعتبارسنجی فرم هامون رو انجام بدیم.

  • اعتبار سنجی فرم ها با استفاده از HTML
  • اعتبار سنجی فرم ها با استفاده از JavaScript

Free-Learn

اعتبار سنجی فرم ها در HTML

خب درسته که زبان HTML خوده فرم و عناصرش رو ایجاد میکنه ولی خب به لطف نسخه ۵ این زبان یعنی HTML5 و صفت هایی که در این نسخه اضافه شده، ما میتونیم اعتبارسنجی رو با خوده HTML هم انجام بدیم.

مثال شماره ۱ : اعتبار سنجی فرم ها با استفاده از صفت required در HTML

امتحان کنید

توضیح مثال بالا :

خب خیلی راحت با استفاده از صفت required در درون هر یک از اینپوت ها به راحتی اعتبار سنجی فرم رو انجام دادیم، یعنی الان اگه کاربر بخواد خالی خالی فرم رو ارسال کنه بهش پیغام میده که مثلا تکمیل کردن این فیلد ضروری است. ( حتما آموزش صفت required در HTML رو مطالعه نمایید )

 

مثال شماره ۲ : اعتبار سنجی با استفاده از صفت Pattern در HTML

امتحان کنید

توضیح مثال بالا :

با استفاده از صفت Pattern هم میتونیم اعتبارسنجی ایجاد کنیم، در واقع میتونیم یه قانون برای اون چیزی که کاربر وارد میکنه مشخص کنیم، مثلا در مثال بالا گفتیم فقط ۵ حرف و فقط هم حروف بزرگ انگلیسی وارد شود. ( حتما آموزش صفت Pattern در HTML رو مطالعه نمایید )

Free-Learn

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

خب ما در مثال های قبلی دیدیم با استفاده از زبان HTML میتونیم اعتبارسنجی فرم هامون رو انجام بدیم ولی خب ما میتونیم با استفاده از زبان جاوا اسکریپت هم اینکارو انجام بدیم.

قدم اول : تعریف یک ID برای فرم

 

قدم دوم : برای هر یک از فیلدهامون یک نام با استفاده از صفت name مشخص میکنیم

 

قدم سوم : برای نمایش ( Error ) ارورهامون ۲ تا تگ span با ID مشخص میکنیم

 

قدم چهارم : یه تابع برای اعتبارسنجی فرم کدنویسی میکنیم ( در خط ۷ و ۸ با استفاده از document.forms به فرم و فیلدهامون دسترسی پیدا میکنم و مقدارشون رو دریافت میکنیم )

 

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

 

کد کامل

امتحان کنید

توضیح مثال بالا :

اومدیم یه تابع تعریف کردیم برای اعتبار سنجی فرم ها در جاوا اسکریپت ، نام تابع مون هست My_Validate که همین رو در صفت onsubmit ( یعنی وقتی بروی دکمه ارسال کلیک شد ) در فرم قرار دادیم.

در خط ۵ و ۶ و ۷ اومدیم و ۲ ID که در تگ Span می باشند برای نمایش ارورهامون تعریف کردیم که دیگه ارورهامون ( مثلا به کاربر بگه نام را وارد کن و.. ) در فرم نمایش داده بشن.

در خط ۹ و ۱۰ هم مقادیری که کاربر در اینپوت ها وارد میکنه رو دریافت میکنیم که در ادامه باهاشون کار کنیم.

در نهایت از خط ۱۲ تا ۲۸ هم اومدیم و شرط هامون رو با استفاده از دستور شرطی IF تعریف کردیم، یعنی مثلا گفتیم اگه نام خالی بود خب پیغام بده که نام باید وارد شه و…

اون return false که در پایان هر یک از شرط ها گذاشته شده ، برای اینه که وقتی بروی دکمه ارسال کلیک میشه اگه اعتبارسنجی انجام نشده باشه اجازه نمیده فرم ارسال شه.

Free-Learn

مثال های بیشتر

مثال شماره ۱ : کاربر فقط بتونه یک عدد از بین ۵ تا ۱۰ وارد کنه

امتحان کنید

مثال شماره ۲ : کاربر فقط بتونه متنی رو که ما از قبل مشخص کردیم وارد کنه

امتحان کنید

Free-Learn

فروشگاه فری لرن
دریافت PDF یا پرینت این مطلب