اعتبار سنجی فرم با HTML5

ارسال توسط : بهنام رسولی | در تاریخ : ۱۶ اردیبهشت ۱۳۹۴ | دسته : HTML5 | بدون دیدگاه

اعتبار سنجی فرم با HTML5Reviewed by بهنام رسولی on May 6Rating: ۵.۰اعتبار سنجی فرم با HTML5

سلام خدمت همه دوستان عزیز،

در این پست قصد دارم اعتبارسنجی کردن فرم ها(Form validation) توسط HTML5 را به شما معرفی کنم.

اضافه شدن نوع فیلد  :

  • color : فیلدی برای انتخاب رنگ ایجاد میکنه(color picker)
  • date : فیلدی ایجاد برای انتخاب تاریخ(date picker)
  • datetime : دریافت تاریخ و زمان
  • email : فیلدی که فقط یک آدرس ایمیل معتبر را دریافت می کند.
  • month : فیلدی برای دریافت ماه
  • number : فیلدی که فقط مقادیر عددی دریافت میکند
  • range :فیلدی برای انتخاب یک رنج
  • search : فیلدی برای ایجاد جستجو ایجاد میکنه که برای ارسال فرم هم نیازی به دکمه ارسال نیست.
  • tel : فیلدی برای دریافت شماره تلفن معتبر
  • time : فیلدی برای انتخاب زمان
  • url :فیلدی برای دریافت یک url معتبر
  • week : اینم خودتون می تونید حدس برنید 🙂

مثال :

در کد بالا فیلدی وجود دارد که فقط یک ایمیل معتبر را دریافت میکند و اگه مقدار وارد شده آدرس ایمیل نباشد هشدار داده و از ارسال(submit) فرم جلوگیری می کند.

مثال برای range :

اعتبارسنجی فیلد با استفاده پترن ها

شما به راحتی می تونید با استفاده از پترن ها ورودی های کاربر رو فیلتر کنید :

کد بالا فقط حروف a تا z را قبول می کند.

جلوگیری از خالی بودن فیلد

قبل از این شما وقتی می خواستید کاری کنید که کاربر حتما مقداری را در فیلد وارد کند باید با استفاده از کد های جاوا اسکریپت این کار رو انجام میدادید اما HTML5 کار شما رو راحت کرده کافیه از صفت required استفاده کنید :

غیر فعال کردن اعتبارسنجی HTML5

شاید شما زمانی بخواهید که اعتبارسنجی های HTML5 را غیر فعال کنید، برای این کار کافیه از صفت novalidate در تگ فرم استفاده کنید:


   دیدگاه ها

ارسال نظرات


شما می توانید از این دستورات HTML استفاده کنید:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url=""> [source_code]...[/source_code]

حمایت از ما