اعتبارسنجی (Validation) فرم ها در JavaScript

Wiki

از JavaScript می توان برای اعتبار سنجی فرم ها، قبل از اینکه به سرور ارسال شود استفاده نمود.

فرم های داده ای که توسط JavaScript اعتبارسنجی می شوند به صورت معمول می تواند شامل موارد زیر باشد:

  • آیا فیلدهای الزامی (ستاره دار) پر شده است؟
  • آیا کاربر آدرس ایمیل را به فرمت صحیح وارد کرده است؟
  • آیا کاربر، داده صحیح را وارد کرده است؟
  • آیا کاربر در یک فیلد عددی، فقط کاراکترهای عددی را وارد کرده است؟

فیلدهای الزامی (Required)

Wiki

تابع زیر، خالی بودن فیلد را چک می کند. اگر خالی باشد، پیغام "First name must be filled out" ظاهر می شود و فرم به سرور ارسال نمی شود:

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

تابع بالا، زمانی فراخوانی می شود که، رویداد "onsubmit" فرم اتفاق بیافتد:

مثال (اعتبارسنجی فرم ها در JavaScript)

<form name="myForm" action="js_validation.php" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
خودتان امتحان کنید »

اعتبار سنجی ایمیل (E-mail Validation)

Wiki

تابع زیر، فرمت معمول آدرس ایمیل را چک می کند.

فرمت صحیح آدرس ایمیل شامل موارد زیر است:

  1. باید شامل یک علامت "@" باشد.
  2. باید حداقل یک نقطه (.) داشته باشد باشد.
  3. علامت "@" نباید اولین کاراکتر باشد.
  4. آخرین نقطه، باید بعد از علامت "@" ظاهر شود.
  5. بعد از آخرین نقطه باید حداقل 2 کاراکتر بیاید.
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}

تابع بالا، زمانی فراخوانی می شود که، رویداد "onsubmit" فرم اتفاق بیافتد:

مثال (اعتبارسنجی فرم ها در JavaScript)

<form name="myForm" action="js_validation.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
خودتان امتحان کنید »