آسان ترین راه برای اضافه کردن اعتبارسنجی به فرم ها

دوشنبه ۰۴ تیر ۹۷ توسط محمدسینا مرادی

با اضافه کردن اعتبارسنجی به فرم های HTML، شما اطمینان حاصل می کنید که دیگر کاربرانتان چیز های اشتباهی وارد نمی کنند و از فرمت ورودی درست آنها مطمئن می شوید.در گذشته، برای اضافه کردن اعتبارسنجی فرم ها، از افزونه های (پلاگین) جاوا اسکریپت برای این کار استفاده می شد اما امروزه اغلب مرورگر ها درون خود راه حل هایی را نهفته اند که می تواند بسیاری از اشتباهات کاربر را به او هشدار دهد.

در این مقاله آموزشی که از سوی آرکادمی برای شما مهیا شده است با قوانین اعبارسنجی و نحوه پیاده سازی آن با Native HTML آشنا خواهید شد.

بررسی اجمالی پروژه

برای نشان دادن اینکه پروژه ما در آخر این مقاله چگونه طراحی شده است به تصویر زیر نگاهی بیندازید.ما این پروژه را با کد های HTML ساده و با استفاده از تکنولوژی Bootstrap 4 نوشته ایم.من به شما پیشنهاد می کنم که مقاله مربوط به Bootstrap 4 را از این لینک در آرکادمی مطالعه فرمایید.همچنین می توانید دمو را از این لینک مشاهده کنید.

 من مطمئن هستم که شما از پروژه خوشتان آمده است پس بیایید با هم نگاهی نیز به کد داشته باشیم.

طراحی ما شامل یک فرم بوت استرپ همراه با چند ورودی و یک دکمه برای ارسال است.در این مثال ما 3 ورودی مختلف را از کاربر دریافت می کنیم که شامل نام کاربری، رمز عبور و ایمیل می باشد.

<div class="registration-form">
    <form>
        <h3 class="text-center">Create your account</h3>
        <div class="form-group">
            <input class="form-control item" type="text" name="username" maxlength="15" minlength="4" pattern="^[a-zA-Z0-9_.-]*$" id="username" placeholder="Username" required>
        </div>
        <div class="form-group">
            <input class="form-control item" type="password" name="password" minlength="6" id="password" placeholder="Password" required>
        </div>
        <div class="form-group">
            <input class="form-control item" type="email" name="email" id="email" placeholder="Email" required>
        </div>
        <div class="form-group">
            <button class="btn btn-primary btn-block create-account" type="submit">Create Account</button>
        </div>
    </form>
</div>

CSS

ما همچنین کمی کد CSS را نیز نوشته ایم تا فرم کمی بیشتر خود را در دل کاربر جا کند.

html {
  background-color:#214c84;
  background-blend-mode:overlay;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:url(../../uploads/img/image4.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  height:100%;
}

body {
  background-color:transparent;
}

.registration-form {
  padding:50px 0;
}

.registration-form form {
  max-width:800px;
  padding:50px 70px;
  border-radius:10px;
  box-shadow:4px 4px 15px rgba(0, 0, 0, 0.2);
  background-color:#fff;
}

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

.registration-form .item {
  border-radius:10px;
  margin-bottom:25px;
  padding:10px 20px;
}

.registration-form .create-account {
  border-radius:30px;
  padding:10px 20px;
  font-size:18px;
  font-weight:bold;
  background-color:#3f93ff;
  border:none;
  color:white;
  margin-top:20px;
}

@media (max-width: 576px) {
  .registration-form form {
    padding:50px 20px;
  }
}

انواع اعتبارسنجی

HTML 5 یک روش خوب و آسان برای اعتبارسنجی درون خطی با استفاده از ویژگی های ورودی ارائه می دهد.تعداد زیادی از این ویژگی ها موجود هستند که ما فقط به برخی از رایج ترین این ویژگی ها نگاهی می اندازیم.شما می توانید با استفاده از راهنمای MDN درک بهتری از آن داشته باشید و ویژگی ها را به طور کامل بشناسید.

ویژگی الزامی (required)

این ویژگی پرکاربرد مشخص می کند که فیلد موردنظرتان نباید خالی ارسال شود به عبارت دیگر کاربر باید برای اینکه بتواند با موفقیت فرم را ارسال کند چیزی را در فیلد وارد نماید.برای مثال در سایت های زیادی دیده اید که در قسمت دیدگاه ها فرمی برای ارسال نظر وجود دارد و شما الزام به وارد کردن اسم خودتان برای ارسال آن هستید.

 <input class="form-control item" type="email" name="email" id="email" placeholder="Email" required>

حداکثر و حداقل طول (maxlength and minlength)

حداکثر و حداقل طول مشخص میکند که کاربر باید حداقل چند کارکتر و همینطور حداکثر چند کارکتر را وارد کند این ویژگی جالب مخصوصا در رمز های عبور کاربرد فراوانی دارد.برای مثال می توانید مشخص کنید که کاربر باید یک رمز عبور قوی مثلا 6 رقمی را انتخاب کند.

<input class="form-control item" type="password" name="password" minlength="6" id="password" placeholder="Password" required>

الگو (pattern)

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

<input class="form-control item" type="text" name="username" maxlength="15" minlength="4" pattern="^[a-zA-Z0-9_.-]*$" id="username" placeholder="Username" required>

اعتبارسنجی فرم در بوت استرپ استودیو

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

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

نتیجه

شما می توانید کد های بالا را در قالب یک فایل زیپ برای خود دانلود کنید و از آن برای پروژه های شخصی یا تجاری استفاده نمایید.

دانلود فایل و سورس پروژه بالا

دمو پروژه بالا

 

موفقیت شما آرزوی ماست (-:


کلیدواژه: اعتبارسنجی فرم ها اعتبارسنجی فرم ها با HTML

منابع: tutorialzine.com

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.
مولف:
محمدسینا مرادی
عضو تیم تولید محتوای آرکادمی
مشاهده‌ی پروفایل
آمار و مشخصات:
event
دوشنبه ۲۶ شهریور ۹۷
public
arcademy.ir/+a256
favorite
۰ پسند
comment
۰ دیدگاه
group
۲۳۷ بازدیدکننده
visibility
۴۳۸ بازدید
رده های این مقاله: