اعتبار سنجی یا همان 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 را به طور کامل توضیح دهم.

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

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

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

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

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

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

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

css-custom-property

تعریف و استفاده از متغیرها در CSS

مانند سایر زبان های برنامه نویسی که از متغیر ها برای نگهداری مقداری استفاده می شود که بتوان بعدا در هر زمان به آن مراجعه کرد، در سی اس اس هم برای نگهداری و یا ذخیره سازی مواردی مانند رنگ ها، نام فونت، اندازه فونت و … استفاده می شود و می توان در جاهای مختلف فایل سی اس اس آن را صدا کرد و از مقدار آن استفاده کرد. اسم رسمی و صحیح این متغیرها custom properties می باشد که معمولا در بین توسعه دهندگان و برنامه نویسان به نام متغیر جا افتاده است.

نصب و استفاده از npm

نصب و استفاده از NPM

NPM مخفف Node Package Manager است. یک پکیج منیجر یا مدیریت پکیجی است که برای NodeJs نوشته شده است. (npm قسمتی از پلتفرم NodeJs است) البته این به معنای آن نیست که حتما باید در پروژه هایی که با NodeJs نوشته می شوند از NPM استفاده کرد بلکه در خیلی از موارد دیگر هم می شود از آن استفاده کرد. اجرای دستورات NPM از طریق خط فرمان (Command line) صورت می گیرد. دانستن ان پی ام به تنهایی کاربردی ندارد اما پیش نیاز خیلی از تکنولوژی های دیگر وب است.