MATIN MOLKARA
SERIES: JavaScript — PART 74 OF 108

74- آموزش جاوااسکریپت | قسمت پنجم - اعتبارسنجی فرم با Bootstrap و Regex

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

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

ساختار HTML

ابتدا قالب Bootstrap را اضافه می‌کنیم و یک فایل app.js هم به صفحه وصل می‌کنیم.

<!doctype html>
<html lang="fa">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <title>User Form</title>
  </head>
  <body>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-6">
          <h1 class="my-4">User Form</h1>

          <form id="userForm">
            <div class="mb-3">
              <label for="name" class="form-label">Name</label>
              <input
                type="text"
                class="form-control"
                id="name"
                placeholder="Name"
              />
              <div class="invalid-feedback">Name must be between 2 and 10 characters.</div>
            </div>

            <div class="mb-3">
              <label for="zip" class="form-label">Zip Code</label>
              <input
                type="text"
                class="form-control"
                id="zip"
                placeholder="Zip Code"
              />
              <div class="invalid-feedback">Enter a valid zip code.</div>
            </div>

            <div class="mb-3">
              <label for="email" class="form-label">Email</label>
              <input
                type="text"
                class="form-control"
                id="email"
                placeholder="Email"
              />
              <div class="invalid-feedback">Enter a valid email.</div>
            </div>

            <div class="mb-3">
              <label for="phone" class="form-label">Phone</label>
              <input
                type="text"
                class="form-control"
                id="phone"
                placeholder="Phone Number"
              />
              <div class="invalid-feedback">Enter a valid phone number.</div>
            </div>

            <input type="submit" value="Submit" class="btn btn-primary w-100" />
          </form>
        </div>
      </div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

نکته مهم این است که پیام خطا فقط وقتی نمایش داده می‌شود که روی input کلاس is-invalid اضافه شود.
اگر این کلاس وجود نداشته باشد، پیام خطا دیده نمی‌شود.

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

در این بخش، اعتبارسنجی را هنگام رویداد blur اجرا می‌کنیم؛ یعنی وقتی کاربر از فیلد خارج می‌شود.

// Blur event listeners
document.getElementById('name').addEventListener('blur', validateName);
document.getElementById('zip').addEventListener('blur', validateZip);
document.getElementById('email').addEventListener('blur', validateEmail);
document.getElementById('phone').addEventListener('blur', validatePhone);

function validateName() {
  const name = document.getElementById('name');
  const re = /^[a-zA-Z]{2,10}$/;

  if (!re.test(name.value)) {
    name.classList.add('is-invalid');
  } else {
    name.classList.remove('is-invalid');
  }
}

function validateZip() {
  const zip = document.getElementById('zip');
  const re = /^[0-9]{5}(-[0-9]{4})?$/;

  if (!re.test(zip.value)) {
    zip.classList.add('is-invalid');
  } else {
    zip.classList.remove('is-invalid');
  }
}

function validateEmail() {
  const email = document.getElementById('email');
  const re = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;

  if (!re.test(email.value)) {
    email.classList.add('is-invalid');
  } else {
    email.classList.remove('is-invalid');
  }
}

function validatePhone() {
  const phone = document.getElementById('phone');
  const re = /^(\(?\d{3}\)?[-. ]?)?\d{3}[-. ]?\d{4}$/;

  if (!re.test(phone.value)) {
    phone.classList.add('is-invalid');
  } else {
    phone.classList.remove('is-invalid');
  }
}

توضیح الگوها

نام

/^[a-zA-Z]{2,10}$/
  • فقط حروف انگلیسی
  • بین 2 تا 10 کاراکتر
  • از ابتدا تا انتهای رشته

کدپستی

/^[0-9]{5}(-[0-9]{4})?$/
  • 5 رقم اجباری
  • بخش -1234 اختیاری است

ایمیل

/^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/
  • بخش قبل از @
  • دامنه
  • پسوند دامنه 2 تا 5 حرفی

شماره تلفن

/^(\(?\d{3}\)?[-. ]?)?\d{3}[-. ]?\d{4}$/
  • پیش‌شماره اختیاری
  • امکان استفاده از ()
  • جداکننده اختیاری مثل -، . یا فاصله

جمع‌بندی

در این آموزش یاد گرفتیم:

  • یک فرم Bootstrap بسازیم
  • پیام خطا را با invalid-feedback نمایش دهیم
  • اعتبارسنجی را هنگام blur انجام دهیم
  • با Regex ورودی‌های نام، کدپستی، ایمیل و تلفن را بررسی کنیم

این روش برای اعتبارسنجی سریع و سبک بسیار کاربردی است و بدون نیاز به فریم‌ورک‌های سنگین هم نتیجه خوبی می‌دهد.

// 0 comments
#Frontend#Web Development#Form Validation#Regex#Bootstrap#JavaScript#Input Validation#HTML

نظرات (0)

نظر خود را بنویسید