ساده ترین روش برای افزودن قوانین اعتبارسنجی به فرم

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

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

برای نشان دادن روند ایجاد قوانین اعتبارسنجی، یک فرم ثبت نام ساده HTML را با استفاده از 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 را اضافه کرده ایم. در این صورت فرم ما از ظاهر بهتری برخوردار است.
 

html {
  background-color:#214c84;
  background-blend-mode:overlay;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:url(../../assets/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;
  }
}

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

با استفاده از مشخصه های ورودی، HTML5 یک روش خوب و آسان برای اعتبارسنجی درون خطی(inline) ارائه می دهد. تعداد قابل توجهی از مشخصه های اعتبارسنجی وجود دارد که ما در این مقاله  تنها نگاهی به برخی از رایج ترین آنها خواهیم داشت.

required

این مشخصه تعیین می کند که فیلد ورودی نمی تواند خالی باشد. این مشخصه کاربران را قبل از ارسال فرم ملزم میکند اطلاعاتی را در فیلد مربوطه وارد کنند.

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

maxlength و minlength

مشخصه های maxlength و minlength حداکثر و حداقل تعداد کاراکتر هایی که کاربر می تواند در فیلد ورودی وارد کند را تعیین می کنند. این مشخصه ها به خصوص در زمینه فیلد رمز عبور مناسب هستند زیرا ورود تعداد کارکتر بیشتر برای رمز عبور میتواند حساب کاربری مشتری شما را امن تر کند.

<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>

اعتبارسنجی فرم در Bootstrap Studio

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

منبع: لرن سورس