میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

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

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

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

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

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

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

فرم HTML

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

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

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

مثال فرم HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

 

اعتبار سنجی محدودیت توسط توابع 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 است، اگر مقدار یک عنصر معتبر باشد.

 

خاصیت rangeOverflow

 

خاصیت rangeUnderflow

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟