سلام دوست عزیز😃👋
به مسابقه «بلهکمپ ۷ - مرحله دوم (Front-End)» خوش آمدی!
نکات مفید برای شرکت در مسابقه:
chatGPT
و... در مسابقات کوئرا ممنوع است و بعد از شناسایی از لیست شرکتکنندگان مسابقه حذف میشوید.لینکهای مفید برای شرکت در مسابقه:
موفق باشید و بهتون خوش بگذره 😉✌
در این سوال شما باید کنترل ورودیها را در فرم Login یک وبسایت انجام داده و در صورتی که مشکلی در ورودیها وجود داشت، خطای مورد نظر مشابه تصویر زیر را نشان دهید.
پروژه اولیه را از این لینک دانلود کنید. ساختار فایلهای این پروژه به صورت زیر است.
useInput
🔗هوک useInput
که برای کنترل یک اینپوت است را طوری کامل کنید که مقدار اولیه اینپوت را گرفته و یک آبجکت با فیلدهای value
برای مقدار فعلی اینپوت و onChange
برای کنترل ورودی هر اینپوت را برگرداند. onChange
تابعی است که به هر یک از اینپوتها داده میشود که با تغییر مقدار اینپوت، value
بتواند بر اساس مقدار جدید وارد شده آپدیت شود.
شما باید در فرم داخل فایل App.jsx
پراپرتیهای type
، value
، onChange
را به کامپوننت Input
اضافه کنید.
در زمان submit
شدن فرم باید تست برای معتبر بودن ایمیل با الگوی رجکس /\S+@\S+\.\S+/
، و همچنین تست برای اعتبارسنجی پسورد (پسورد باید بیشتر از ۸ کاراکتر داشته باشد) انجام شود و پیام خطای هر فیلد فقط وقتی فرم submit
و تست fail
شد نمایش داده شود (پیام خطا باید دقیقا مشابه گیف بالا باشد).
App.jsx
و useInput.js
هستید.node_modules
نیست)