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



visibility  
mode_comment   ۰

همونطور که اطلاع دارید در جلسه گذشته توضیحاتی در مورد اعتبارسنجی فرمها با استفاده از Javascript دادیم و در این جلسه قصد داریم این موضوع رو ادامه بدیم. آخرین کدی که در جلسه قبل قرار دادیم بصورت زیر بود:

همونطور که در جلسه پیش هم اشاره شد، یک تابع مجزا رو به این دلیل به وجود آوردیم که کدهای درون Event listener خیلی شلوغ نشن و بهتر بتونیم کدها رو مدیریت کنیم. خب حالا وارد جزئیات مربوط به تابع hasError میشیم و با استفاده از اون وجود یا عدم وجود ارور برای ورودی یا field مورد نظر رو بررسی میکنیم. در ابتدا میخوایم کاری کنیم که اگر ورودی مورد نظر جز یکی از دسته های زیر قرار دارد، از اون صرف نظر بشه و اعتبارسنجی برای اون بررسی نشه:

  • ورودی های غیر فعال یا Disable
  • ورودی از نوع file
  • ورودی از نوع reset
  • دکمه Submit
  • همه دکمه یا Button ها

برای اینکار بصورت زیر عمل میکنیم:

میبینید که در خط سه بررسی میکنیم که ورودی مورد نظر جزء دسته های ذکر شده قرار دارد یا خیر. اگر ورودی جزء اونا باشه، پس return اجرا میشه و از تابع خارج میشیم و در غیر اینصورت کدهای بعد از if اجرا میشه و وضعیت اعتبار یا validity ورودی مورد نظر درون متغیر validity ذخیره میشه.

خب حالا با توجه به validity، اگر ارور یا مشکلی وجود نداشته باشد، ما null رو return میکنیم. اما اگر یک مشکل وجود داشته باشه ما همه حالات و ویژگی های مربوط به validity رو تا پیدا کردن مشکلات بررسی میکنیم.

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

میبینید که تمامی حالات رو نظر گرفتیم و برای هر کدام رشته ای متناسب رو برگشت دادیم. این کد برای شروع خوب است ولی میتونیم مقداری دیگه بر روی اون کار کنیم تا اطلاعات دقیقتری رو در اختیار کاربران قرار بدیم. مثلا برای typeMismatch میتونیم بررسی کنیم که مربوط به ورودی از نوع url هست یا email و متن مربوط به هر کدام رو سفارش سازی شده و مرتبط قرار بدیم. پس کد مربوط به typeMismatch بصورت زیر تغییر داده میشه:

میبینید که نوع ورودی در ابتدا بررسی میشه و متناسب با اون متن ارور return میشه.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

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

میبینید که برای هر کدام یک متن مرتبط قرار گرفته و با استفاده از متد getAttribute به ویژگی minLength و maxLength دسترسی پیدا کردیم و اونا رو به کاربر نمایش دادیم. با استفاده از متد length هم تعداد کاراکتر فعلی وارد شده توسط کاربر رو به اون نمایش دادیم.

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

میبینید که با استفاده از متد getAttribute تونستیم به ویژگی های min و max دسترسی پیدا کنیم.

حالت آخری که اون رو سفارش سازی میکنیم مربوط به مطابقت نداشتن الگو یا Pattern است. میتونیم زمانی که مقدار وارد شده از Pattern مورد نظر تبعیت نمیکنه، در صورت وجود ویژگی title، متن title رو به عنوان راهنما به کاربر نمایش بدیم و return کنیم. کد زیر رو در نظر بگیرید:

میبینید که در ابتدا وجود یا عدم وجود ویژگی title بررسی شده و در صورت وجود اون رو برگشت میدیم. در غیر اینصورت همون پیام کلی مربوط به رعایت نشدن الگو رو به کاربر نمایش میدیم.

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

دموی خروجی اون نیز بصورت زیر هست که میتونین اون رو تست کنید:

شما میتونین Console درون Inspector رو باز کنید و ورودی های بالا رو تست کنید. هر زمان که رویداد Blur برای ورودی ها اتفاق میوفته، در صورت وجود Error در Console نمایش داده میشه. بهمین راحتی.

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

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

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

یا علی

Source

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

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