اعتبارسنجی Form ها (جلسه 5) : اعتبارسنجی با Javascript - قسمت 1



visibility  
mode_comment   ۰

همونطور که میدونین در جلسات قبل با استفاده از امکاناتی که در HTML5 اضافه شده تونستیم فرمها رو بدون نیاز به ابزار خاص یا Javascript اعتبارسنجی کنیم. این کار رو با استفاده از ورودی های معناگرا یا Semantic مثل <input type="email"> و ویژگی های اعتبارسنجی مانند required و pattern انجام دادیم.

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

علاوه بر ویژگی ها و المنتهای HTML که میتونیم با استفاده از اونا فرمها رو اعتبارسنجی کنیم، مرورگر بصورت native و ذاتی یک Javascript API در اختیارمون قرار میدن که با استفاده از این API میتونیم رفتار اعتبارسنجی رو تغییر بدیم و مدیریت بهتری بر روی اونا داشته باشیم. در این آموزشها یاد میگیریم که چطور با استفاده از Javascript API، رفتار، ظاهر و پیامهای اعتبارسنجی رو سفارش سازی کنیم.

وضعیت اعتبار

هر فیلد فرمی که در صفحه وجود داره درون Javascript یک ویژگی بنام validity داره که یک سری اطلاعات در قالب فرم true و false رو در خودش جا داده و اون فیلد رو از لحاظ وضعیت اعتبارسنجی، معرفی میکنه. فرض کنید که یک ورودی از نوع text دارید. بصورت زیر میتونیم به ویژگی validity اون دسترسی داشته باشیم:

میبینید که در ابتدا با استفاده از querySelector اون رو انتخاب کردیم و بعد از اون مقدار ویژگی validity اون رو درون متغیر validityState ذخیره کردیم. validity اطلاعات و ویژگی های زیر رو در اختیارتون قرار میده:

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
  • valid : زمانی که ورودی معتبر باشه، true خواهد بود
  • valueMissing : زمانی که یک ورودی الزامی یا required باشه ولی اونو خالی بزارید، true خواهد بود
  • typeMismatch : وقتی نوع یک ورودی url یا email است، ولی مقدار وارد شده از این انواع تبعیت نمیکنه، true خواهد بود
  • tooShort : زمانی که از ویژگی minLength استفاده میکنید ولی مقدار وارد شده کمتر از این مقدار باشد، true خواهد بود
  • tooLong : زمانی که از ویژگی maxLength استفاده میکنید ولی مقدار وارد شده بیشتر از این مقدار باشد، true خواهد بود
  • patternMismatch : زمانی که برای یک ورودی از ویژگی pattern استفاده میکنید و مقدار وارد شده از این الگو تبعیت نمیکنه، true خواهد بود
  • badInput : زمانی که نوع ورودی number یا عددی است ولی مقدار وارد شده یک عدد نیست، مقدار این ویژگی true خواهد بود
  • stepMismatch : زمانی که ورودی مورد نظر از ویژگی step استفاده میکنه ولی مقدار وارد شده از این ویژگی تبعیت نمی کند، true خواهد بود
  • rangeOverflow : زمانی که از ویژگی max استفاده میکنید و مقدار وارد شده از این مقدار بیشتر باشد، true خواهد بود
  • rangeUnderflow : زمانی که از ویژگی min استفاده میکنید و مقدار وارد شده از این مقدار کمتر باشد، true خواهد بود

با استفاده همزمان از ویژگی validity، ورودی های semantic و ویژگی های HTML5 میتونیم فرمهایی رو بسازیم که بهترین تجربه کاربری رو برای کاربر رقم بزنند. این کار با کمترین مقدار کد Javascript انجام خواهد گرفت و نیاز به پیش نیاز خاصی نخواهد داشت.

امیدوارم از این مطلب خوشتون اومده باشه.

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

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران
ارسال نظرات

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