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

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

آموزش جاوا اسکریپت از مبتدی تا حرفه ای

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

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

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

به عنوان مثال اگر یک فیلد از فرم (fname) خالی باشد ، تابع زیر، یک پیام هشدار می دهد و از ارسال فرم با اطلاعات غلط جلوگیری می کند:

تابع جاوا اسکریپت

هنگام ارسال فرم می توان تابع بالا را فراخوانی کرد :

فرم HTML

خودتان آزمایش کنید

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

از جاوا اسکریپت اغلب برای تأیید ورودی عددی استفاده می شود:

لطفاً یک عدد بین 1 تا 10 وارد کنید

خودتان آزمایش کنید


اعتبار سنجی فرم HTML به صورت خودکار

اعتبار سنجی فرم های HTML می تواند به طور خودکار توسط مرورگر انجام شود:

اگر یک فیلد از فرم (fname) خالی باشد ، ویژگی required از ارسال این فرم جلوگیری می کند:

مثال فرم HTML

خودتان آزمایش کنید

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


اعتبار سنجی داده ها

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

وظایف اعتبار سنجی معمول عبارتند از:

  • آیا کاربر تمام قسمتهای مورد نیاز را پر کرده است؟
  • آیا کاربر تاریخ معتبری وارد کرده است؟
  • آیا کاربر متن را در یک قسمت عددی وارد کرده است؟

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

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

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

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


اعتبار سنجی محدودیت HTML

HTML5 مفهوم جدیدی از اعتبار سنجی به نام اعتبار سنجی محدودیت را ارائه داد .

اعتبار سنجی محدودیت HTML بر اساس موارد زیر بنا شده است:

  • اعتبار سنجی محدودیت ویژگی های INPUT
  • اعتبار سنجی محدودیت CSS Pseudo Selectors
  • اعتبار سنجی محدودیت ویژگی ها و توابع DOM

اعتبار سنجی محدودیت ویژگی های INPUT

ویژگیشرح
disabledمشخص می کند که عنصر ورودی باید غیرفعال شود
maxحداکثر مقدار یک عنصر ورودی را مشخص می کند
minحداقل مقدار عنصر ورودی را مشخص می کند
patternالگوی مقدار یک عنصر ورودی را مشخص می کند
requiredمشخص می کند که فیلد ورودی باید پر شود
type نوع عنصر ورودی را مشخص می کند

برای مشاهده لیست کامل ویژگی های INPUT کلیک کنید.


اعتبار سنجی محدودیت CSS Pseudo Selectors

انتخاب کنندهشرح
:disabledفیلد های input با مشخصه “disabled” را انتخاب می کند
:invalidفیلد های input که مقدار اشتباه دارند را انتخاب می کند
:optionalفیلد های input که اجباری نیستند را انتخاب می کند
:requiredفیلد های input که اجباری هستند را انتخاب می کند
:validفیلد های input که مقدار صحیح دارند را انتخاب می کند

برای دریافت لیست کامل، به CSS Pseudo Classes بروید .

اعتبار سنجی محدودیت توسط توابع DOM

تابعشرح
checkValidity()اگر عنصر INPUT حاوی داده های معتبر باشد ، true برمی گرداند.
setCustomValidity()ویژگی validationMessage یک عنصر INPUT را تنظیم می کند.

مثال : اگر یک فیلد ورودی حاوی داده های نامعتبر است ، یک پیام را نمایش دهید:

تابع checkValidity()

خودتان آزمایش کنید

اعتبارسنجی محدودیت با استفاده از خصوصیات DOM

خصوصیتشرح
validityحاوی خواص بولی مربوط به صحیح بودن یک عنصر ورودی است.
validationMessageحاوی پیامی است که مرورگر هنگام غلط بودن مقدار یک عنصر ورودی نشان می دهد.
willValidateنشان می دهد که آیا یک عنصر ورودی معتبر است.


ویژگی های معتبر بودن

ویژگی های اعتبار یک عنصر ورودی شامل تعدادی از ویژگی های مربوط به اعتبارسنجی داده می شود:

ویژگیشرح
customErrorبرابر با true است، اگر پیام سفارشی اعتبارسنجی تنظیم شود.
patternMismatchبرابر با true است، اگر مقدار یک عنصر با ویژگی pattern آن مطابقت نداشته باشد.
rangeOverflowبرابر با true است، اگر مقدار یک عنصر بیشتر از ویژگی max باشد.
rangeUnderflowبرابر با true است، اگر مقدار یک عنصر کمتر از ویژگی min باشد.
stepMismatchبرابر با true است، اگر مقدار یک عنصر از نظر ویژگی step نامعتبر باشد.
tooLongبرابر با true است، اگر مقدار یک عنصر از ویژگی maxLength آن بیشتر شود.
typeMismatchبرابر با true است، اگر مقدار یک عنصر از نظر ویژگی type آن نامعتبر باشد.
valueMissingبرابر با true است، اگر عنصری (با ویژگی required ) فاقد مقدار باشد.
validبرابر با true است، اگر مقدار یک عنصر معتبر باشد.

مثال ها

اگر مقدار یک فیلد ورودی بیشتر از 100 باشد ( ویژگی max فیلد ورودی ) ، یک پیام نمایش دهید:

خاصیت rangeOverflow

خودتان آزمایش کنید

اگر مقدار یک فیلد ورودی کمتر از 100 باشد ( ویژگی min ورودی ) ، یک پیام نمایش دهید:

خاصیت rangeUnderflow

خودتان آزمایش کنید

منبع : W3Schools.com


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

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