اعتبار سنجی یا همان Validation و استفاده از HTML5 به منظور راحت ترین و دم دست ترین راه

اعتبار سنج یا validation چیست؟ اهمیت آن چقدر است؟ سریع ترین و راحت ترین راه validation کدام است؟ این ها پرسش هایی هستند که به طور خلاصه درباره آن صحبت خواهیم کرد.
تعریف ویکی پدیا از data validation: اطمینان حاصل کردن از اینکه داده های وارد شده به یک فرم منطبق با الگوی تعریف شده و سایر معیارهای معتبر ورود اطلاعات است. به بیان ساده اعتبار سنجی یا همان validation این اطمینان را می دهد که قبل از اینکه اطلاعاتی که کاربر در فرم وارد کرده به سمت سرور ارسال شود، از صحت درستی آن اطلاعات مطمئن شد. به عنوان مثال فرض کنید که فرمی طراحی کرده اید که در آن نام، نام خانوادگی شماره تلفن و آدرس ایمیل کاربران را درخواست می کنید. در اینجا حتما باید قبل از اینکه داده هایی که کاربر در فرم وارد می کند به سرور ارسال شود صحت درستی آن ها بررسی شود تا از ورود اطلاعات ناقص و خراب به سرور جلوگیری کرد. طراحی فرم بدون اضافه کردن validation بسیار خطرناک است و در واقع فرمی که validation نداشته باشد نباید برنامه مورد استفاده قرر بگیرد.

به طور کلی دو نوع validation داریم
۱- server side
۲- client side

server side -1: یا validation سمت سرور. به این معنی است که بعد از اینکه کاربر اطلاعات درخواستی فرم را وارد کرد و بر روی دکمه ارسال کلیک کرد اطلاعات توسط سرور بررسی می شود و در صورت معتبر نبودن، اطلاعات وارد سرور نمی شود و پیغامی در جهت معتبر نبودن اطلاعات به کاربر داده می شود.

۲- client side: یا validation سمت کاربر. به این معنی است که قبل از اینکه اطلاعات به سرور ارسال شود صحت درستی آن بررسی می شود و در صورت معتبر بودن به سرور ارسال می شود.
برای حصول اطمینان از اطلاعات دریافتی از طریق فرم ها، توصیه می شود از هر دو نوع validation استفاده شود. اما این نکته را نباید از یاد برد که اعتبار سنجی سمت کاربر بسیار با اهمیت است چون از ترافیک اضافی سرور جلوگیری می کند و اطلاعات وارد شده در فرم به صورت لحظه ای کنترل می شود و کاربر از معتبر نبودن آن آگاه می شود.
حتما برای شما هم پیش آمده است که وقتی در حال پر کردن فرمی هستید به محض اینکه فرم را به طور درست پر می کند فرم به رنگ سبز درمی آید که نشان دهنده این است که اطلاعات وارد شده صحیح می باشد و یا برعکس وقتی اطلاعات وارد شده معتبر نباشند فرم به رنگ قرمز در می آید و کاربر بلافاصله متوجه می شود که اطلاعات وارد شده درست نیست.
صحبت درباره validation ها بسیار طولانی و مفصل اما دراینجا راحت ترین روش اضافه کردن validation به فرم را بررسی می کنیم و توصیه می شود که هر فرمی که طراحی کردید از این اعتبار سنجی بهره ببرید.
خوب بریم سر اصل مطلب، یعنی راحت ترین روش اضافه کردن اعتبار سنجی به فرم که همان استفاده از امکانات جدید در HTML5 است.

یک فرم ساده با استفاده از bootstrap 4 طراحی می کنیم. فرم شامل فیلدهای نام کاربری که از نوع text است، پسورد و ایمیل است.


    <div class="registration-form">
      <form>
        <h3 class="text-center">ثبت نام در سایت</h3>
        <div class="form-group">
          <input type="text" class="form-control item" name="username" maxlength="15" minlength="4" pattern="^[a-zA-Z0-9_.-]*$"
            id="username" placeholder="نام کاربری" required>
        </div>
        <div class="form-group">
          <input type="password" class="form-control item" name="password" minlength="6" id="password" placeholder="پسورد"
            required>
        </div>
        <div class="form-group">
          <input type="email" class="form-control item" name="email" id="email" placeholder="ایمیل" required>
        </div>
        <div class="form-group">
          <button class="btn btn-primary btn-block create-account" type="submit">ایجاد حساب</button>
        </div>
      </form>
    </div>
  

جهت استایل دهی بهتر کدهای css زیر را اعمال کنید. توجه داشته باشید که فرم بندی با استفاده از بوتسترپ انجام شده است.


html {
  background-color: #214c84;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.registration-form {
  padding: 50px 0;
  background-color: #214c84;
}

.registration-form form {
  max-width: 800px;
  padding: 50px 70px;
  border-radius: 10px;
  background-color: #fff;
}

.registration-form form h3 {
  font-weight: bold;
  margin-bottom: 30px;
}

.create-account {
  border-radius: 30px;
  padding: 10px 20px;
  background-color: #3f93ff;
  border: none;
  color: white;
}

خوب حالا یک فرم ساده ثبت نام طراحی کردیم. HTML5 راه بسیار ساده برای validation در اختیار ما قرار داده است و آن استفاده از صفت های مخصوص در المنت های input است. البته تعداد زیادی attributes validation (صفت های اعتبار سنجی) وجود دارد که در اینجا از متداول ترین آنها استفاده کرده ایم. برای اطلاعات بیشتر می توانید به MDN guid مراجعه کنید.

بررسی attributes ها

required: همان طور که از معنی آن مشخص است یعنی الزامی. این ویژگی مشخص می کند که فیلد ورودی نباید خالی باشد و پر کردن آن الزامی است.
maxlength و minlength: از ویژگی های بسیار کاربردی دیگر است. این ویژگی ها حداکثر و حداقل تعداد کاراکتر را که باید در فیلد مورد نظر وارد شود را مشخص می کند.
pattern: الگویی را مشخص می کند که داده های وارد شده باید از آن الگو پیروی کنند. از این الگوها در فیلدهای text ،search ،url ،email ،password می توانیم استفاده کنیم. برای تعریف الگوها از regular expression استفاده می کنیم.
سعی می کنم که در آینده آموزش و نحوه استفاده از regular expression را به طور کامل توضیح دهم.

نویسنده: سعید پناهی

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

2 پاسخ به “اعتبار سنجی یا Validation در HTML5”

  1. سلام. دکمه ی آپ که کاربر رو به سمت بالا هدایت میکنه و سمت چپ سایتتون وجود داره
    الان bottom=0 هست. اگر بخوایم از بالای فوتر شروع بشه در حالیکه وقتی اسکرول میکنیم به سمت بالا همین حالتی ک الان هست بمونه،راهی وجود داره؟
    یا به عبارتی همیشه همینطور پایین نشون داده بشه ولی وقتی میام اسکرول میکنم سمت پایین نقطه ی انتهاییش بشه بالای فوترتون

    1. سلام، فکر کنم دقیقا متوجه منظورتون نشدم. ;-( اگه منظورتون اینه که بجای اینکه دکمه پایین صفحه باشه بره بالای صفحه فقط کافیه به جای اینکه bottom=0 باشه. تبدیل کنیم به top=0 با این روش دکمه میره بالای صفحه. در این سایت تگ a با آی دی #go-top میشه جای دکمه رو تغییر داد.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

احتمالا از اینها هم خوشتون بیاد

آموزش css3

آموزش دستورات خاص و کاربردی در CSS3

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

کارگاه آموزشی طراحی وب

کارگاه آموزشی طراحی و توسعه وب سایت به صورت پروژه محور و کارگاهی

بررسی واحدهای REM -EM – VH- VW و تفاوت بین آنها

برای مدت های طولانی طراحان و توسعه دهندگان وب سایت ها برای اندازه گذاری فونت، حاشیه و یا هر عنصر دیگری از واحد px که نشان دهنده پیکسل بود استفاده می کردند. اما امروزه با توجه به گسترش استفاده از دستگاه های مختلف مانند موبایل و تبلت برای نمایش وب سایت ها لزوم استفاده از واحدهایی که کنترل بیشتری به توسعه دهنده و طراح بدهد بیشتر شد. از این رو واحدهای rem و em تقریبا جای واحد px را گرفت.