معتبر سازی فرمهای سمت کاربر(client-side) با استفاده از html5

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

required:این خصیصه خالی بودن فیلدهای وردی را بررسی میکند و در صورت خالی بودن فیلد مورد نظر خطایی را نمایش میدهد.

maxlength:طول داده های را محدود می کند.

type:نوع عنصر مورد نظر را اعتبار سنجی می کند که مقادیر زیر را می پزیرد:

  1. email:بررسی می کند که داده ها ی وارد شده آدرس ایمیل باشد.
  2. number:فقط داده های عددی را قبول می کند.

برای مطالعه سایر مقادیری مجاز برای خصیصه تایپ (نوع عناصر در input)کلیک نمایید.

در صورتی که داده های وارد شده با انواع تعیین شده مغایر باشند و یا محدودیت های اعمال شده را رعایت نکند مرورگر خطایی نمایش میدهد که با شبه انتخاب گرهای زیر در css در کروم  و سافاری می توانید پیام های مرورگر را مدیریت نمایید.

web-kit-validation-bubble{}.

web-kit-validation-bubble-top-outer-arrow{}.

web-kit-validation-bubble-top-inner-arrow{}.

web-kit-validation-bubble-top-message{}.

در فایر فاکس برای مدیریت پیام های خطا می توانید از خصیصه

x-moz-errormessage

و در مرورگر کروم از خصیصه

-webkit-validation-boubble-message

می توانید استفاده نمایید.

بهترین راه اععتبار سنجی فرمها این است که هم از روشهای کلاینت ساید(html5 , javascriptو…) و هم از روشهای سرور ساید استفاده نمائید.

دیدگاه خود را بنویسید