اعتبارسنجی 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 میشه.

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

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

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

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

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

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

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

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

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

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

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

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

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.