اعتبارسنجی (Validation) در HTML5 (Required, Min/Max, Pattern)

اعتبارسنجی (Validation) در HTML5: فرم‌های هوشمند و دقیق! ✨

سلام دوستان عزیز! توی فصل‌های قبل کمی درباره اعتبارسنجی صحبت کردیم، اما حالا می‌خوایم عمیق‌تر بشیم و ببینیم چطور می‌تونیم با استفاده از خصوصیت‌های خود HTML5، فرم‌هامون رو هوشمندتر و دقیق‌تر کنیم. هدف اعتبارسنجی اینه که مطمئن بشیم کاربر اطلاعات درستی وارد می‌کنه قبل از اینکه اون اطلاعات به سرور برسه.

اعتبارسنجی مثل یه نگهبان برای فرم شماست؛ اجازه نمی‌ده اطلاعات اشتباه یا ناقص ازش رد بشه!

۱. خصوصیت required: اجباری کردن فیلدها! ❗

این ساده‌ترین و پرکاربردترین خصوصیت اعتبارسنجیه. اگه یه فیلد رو required کنید، کاربر نمی‌تونه فرم رو بدون پر کردن اون فیلد ارسال کنه. مرورگر خودش این مورد رو چک می‌کنه و اگه فیلد خالی باشه، پیغام خطا نشون می‌ده.

<label for="username">نام کاربری:</label>
<input type="text" id="username" name="username" required>
<!--
  - این فیلد حتما باید پر بشه تا فرم ارسال بشه.
  - اگر خالی باشه، مرورگر پیغامی مثل "لطفا این فیلد را پر کنید" نمایش می‌دهد.
-->

۲. خصوصیت‌های Min/Max: محدود کردن مقادیر! 📏

این خصوصیت‌ها برای فیلدهایی مثل type=”number”، type=”range”، type=”date” و حتی برای type=”text” (با استفاده از minLength و maxLength) کاربرد دارن.

برای اعداد و اسلایدرها (min, max):

<label for="age">سن:</label>
<input type="number" id="age" name="age" min="18" max="99" value="25">
<!--
  - کاربر نمی‌تواند سنی کمتر از ۱۸ یا بیشتر از ۹۹ وارد کند.
  - value="25" مقدار پیش‌فرض است.
-->

<label for="rating">امتیاز (۱ تا ۵):</label>
<input type="range" id="rating" name="rating" min="1" max="5" value="3">
<!--
  - کاربر می‌تواند امتیازی بین ۱ تا ۵ انتخاب کند.
-->

برای متن‌ها (minLength, maxLength):

این خصوصیت‌ها تعداد کاراکترهای مجاز رو تعیین می‌کنن. برای فیلدهایی که type="text" یا type="password" هستن.

<label for="password">رمز عبور:</label>
<input type="password" id="password" name="password" minLength="8" required>
<!--
  - رمز عبور باید حداقل ۸ کاراکتر داشته باشد.
  - اگر کمتر باشد، مرورگر خطا می‌دهد.
-->

<label for="zipcode">کد پستی:</label>
<input type="text" id="zipcode" name="zipcode" maxLength="10" pattern="\d{5}-?\d{4}" required>
<!--
  - کد پستی حداکثر ۱۰ کاراکتر می‌تواند داشته باشد.
  - این فیلد هم از pattern برای فرمت خاص استفاده می‌کند (در ادامه توضیح داده شده).
-->

۳. خصوصیت pattern: تطبیق با الگو! 🎨

این خصوصیت یکی از قدرتمندترین ابزارهای اعتبارسنجی HTML5 هست. شما می‌تونید با استفاده از **عبارات باقاعده (Regular Expressions)**، الگوی مورد نظرتون رو برای ورودی تعریف کنید. اگه ورودی کاربر با الگوی شما مطابقت نداشت، مرورگر خطا می‌ده.

<label for="discount-code">کد تخفیف (فرمت: ABCD-123):</label>
<input type="text" id="discount-code" name="discount_code" pattern="[A-Z]{4}-\d{3}" placeholder="مثلا: ABCD-123">
<!--
  - pattern="[A-Z]{4}-\d{3}" یعنی:
    - [A-Z]{4}: دقیقا ۴ حرف بزرگ انگلیسی (A تا Z)
    - -: یک خط تیره
    - \d{3}: دقیقا ۳ رقم (۰ تا ۹)
  - اگر ورودی کاربر با این الگو مطابقت نداشته باشد، خطا نمایش داده می‌شود.
-->

<label for="phone-number">شماره تلفن (فرمت: ۰۹xxxxxxxxx):</label>
<input type="tel" id="phone-number" name="phone_number" pattern="09\d{9}" placeholder="مثلا: 09123456789" required>
<!--
  - pattern="09\d{9}" یعنی:
    - 09: باید با ۰۹ شروع شود.
    - \d{9}: سپس دقیقا ۹ رقم دیگر.
  - type="tel" هم برای فیلدهای تلفن مناسب است.
-->

نکته مهم درباره Pattern: نوشتن عبارات باقاعده (Regex) خودش یه دنیای بزرگه! اما برای کارهای ساده مثل چک کردن فرمت کد پستی، شماره تلفن یا کدهای خاص، خیلی کاربردیه.

اعتبارسنجی سمت مرورگر vs سمت سرور: یادتون باشه که تمام این اعتبارسنجی‌های HTML5 در مرورگر کاربر انجام می‌شن. این یعنی قابل دستکاری هستن! بنابراین، **همیشه و حتماً** باید اعتبارسنجی اطلاعات رو در **سمت سرور** هم انجام بدید تا امنیت کامل تضمین بشه. این خصوصیت‌ها برای بهبود تجربه کاربری و گرفتن خطاهای اولیه عالی هستن، نه جایگزین اعتبارسنجی سمت سرور!

با استفاده صحیح از خصوصیت‌های required، min، max، minLength، maxLength و pattern، می‌تونید فرم‌هایی بسازید که هم کاربرپسندتر باشن و هم اطلاعات دقیق‌تری رو دریافت کنن. این‌ها قدم‌های مهمی برای حرفه‌ای شدن در طراحی فرم هستن! 👍