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

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

اعتبارسنجی فرم های HTML

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

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

دانلود کد پروژه  اجرای دمو پروژه 

مرور پروژه

برای نمایش پروسه خلق قواعد اعتبارسنجی فرم، ما یک فرم ثبت نام ساده HTML با استفاده از بوت استرپ 4 (Bootstrap 4) ارائه کرده ایم. می توانید با کلیک بر تصویر زیر دموی پروژه را اجرا کنید و یا کدها را دانلود کرده و در وب سرور خود اجرا نمایید.

پروسه خلق قواعد اعتبارسنجی فرم، ما یک فرم ثبت نام ساده HTML

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

قالب پروژه

کد HTML

طراحی این دمو از یک فرم بوت استرپ با چند فرم و یک دکمه ثبت نام (سابمیت) تشکیل شده است. برای این مثال ما از 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 validation) فیلدها با استفاده از خصیصه های ورودی ها (input attributes) ارائه شده است. شمار زیادی از این خصیصه ها در دسترس است، ما فقط تعدادی از رایجترین این خصیصه ها را استفاده می کنیم. برای مطالعه لیست کامل این خصیصه ها می توانید از راهنمای موزیلا (MDN guide) استفاده کنید.

خصیصه required:

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

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

خصیصه های maxlength و minlength

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

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

خصیصه pattern

این خصیصه یک عبارت معمولی را مشخص می کند که بایستی داده وارد شده در فیلد با این عبارت همسان باشد که فرم ارسال شود. این خصیصه را می توان با انواع ورودی متنی، جستجو، url، ایمیل و پسورد استفاده کرد. اگر با عبارات معمول () آشنا نیستید، می توانید مقاله یادگیری عبارات معمول (رجکس) در 20 دقیقه را بخوانید.

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

اگر می خواهید اعتبارسنجی فرم ها را بدون کد نویسی انجام دهید، نرم افزار بوت استرپ استودیو را دانلود و استفاده کنید.

اگر در اجرای این راهنما به مشکل برخورد کردید و سایر سئوالات و پیشنهادات خود را در بخش سئوالات عمومی انجمن پلکسا مطرح نمایید. گروه توسعه وب پلکسا به سئوالات شما پاسخ خواهند داد.

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

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