JavaScript فرم

تأیید فرم JavaScript

تأیید فرم HTML می‌تواند با استفاده از JavaScript انجام شود.

اگر زمینه فرم (fname) خالی باشد، این تابع پیامی را نمایش می‌دهد و false برمی‌گرداند تا از ارسال فرم جلوگیری شود:

مثال‌های JavaScript

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("نام باید پر شود");
    return false;
  }
}

این تابع می‌تواند در زمان ارسال فرم فراخوانی شود:

مثال فرم HTML

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
نام: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

به طور شخصی امتحان کنید

JavaScript می‌تواند ورودی عددی را تأیید کند

JavaScript معمولاً برای تأیید ورودی عددی استفاده می‌شود:

لطفاً عددی بین 1 تا 10 وارد کنید:

به طور شخصی امتحان کنید

تأیید خودکار فرم HTML

تأیید فرم HTML می‌تواند به طور خودکار توسط مرورگر انجام شود:

اگر زمینه فرم (fname) خالی باشد، required ویژگی‌ها می‌توانند از ارسال این فرم جلوگیری کنند:

مثال فرم HTML

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

به طور شخصی امتحان کنید

توضیح:تأیید خودکار فرم HTML در نسخه‌های 9 یا قدیمی‌تر اینترنت اکسپلورر کار نمی‌کند.

تأیید داده‌ها

تأیید داده‌ها فرآیندی برای اطمینان از پاک، صحیح و مفید بودن ورودی کاربر است.

تأییدهای معمول عبارتند از:

  • آیا کاربر تمام زمینه‌های اجباری را پر کرده است؟
  • آیا کاربر تاریخ معتبر وارد کرده است؟
  • آیا کاربر در زمینه عددی متنی وارد کرده است؟

در بیشتر موارد، هدف تأیید داده‌ها اطمینان از صحت ورودی کاربر است.

تأیید می‌تواند به بسیاری از روش‌های مختلف تعریف شود و به بسیاری از روش‌های مختلف پیاده‌سازی شود.

تأیید سرور در زمان ارسال ورودی به سرور انجام می‌شود.

قبل از ارسال ورودی به سرور وب، تأیید توسط مرورگر وب انجام می‌شود.

تأیید محدودیتی HTML

HTML5 مع یک مفهوم جدید از تأیید HTML معرفی شده است که به آن تأیید محدودیتی می‌گویند.

اعتبارسنجی محدودیت‌های HTML بر اساس:

  • ویژگی‌های HTML input برای اعتبارسنجی محدودیت‌ها
  • انتخاب‌گرهای CSS برای اعتبارسنجی محدودیت‌ها
  • ویژگی‌ها و روش‌های DOM برای اعتبارسنجی محدودیت‌ها

ویژگی‌های HTML input برای اعتبارسنجی محدودیت‌ها

ویژگی توضیح
disabled تعیین اینکه input باید غیرفعال باشد.
max تعیین حداکثر input.
min تعیین حداقل input.
pattern تعیین مدل مقادیر input.
required تعیین اینکه field input الزامی است.
type تعیین نوع input.

برای لیست کامل، لطفاً به ویژگی‌های ورودی HTML.

انتخاب‌گرهای CSS برای اعتبارسنجی محدودیت‌ها

انتخاب‌گر توضیح
:disabled انتخاب عناصر input که ویژگی "disabled" دارد.
:invalid انتخاب عناصر input با مقادیر نامعتبر.
:optional انتخاب عناصر input که ویژگی "required" ندارد.
:required انتخاب عناصر input که دارای ویژگی "required" است.
:valid انتخاب عناصر input با مقادیر معتبر.

برای لیست کامل، لطفاً به پseudo-class CSS.