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

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

مواردی که با استفاده از جاوا اسکریپت می خواهیم بررسی شود:

1. آیا تمام فیلد های الزامی پر شده است؟
2. آیا آدرس ایمیل وارد شده دارای فرمت صحیح می باشد؟

خب در مرحله اول یه فرم با فیلدهای مورد نظر می سازیم.

<form name="myForm" action="" method="post" onsubmit="return validateForm()"> 
  name:<input id="fName" type="text" name="fName"> 
  Password:<input id="pass" type="password" name="pass"> 
  Email:<input id="email" type="text" name="email">
    <input type="submit" name="submit" value="check"> 
</form>

حالا نوبت به اعتبار سنجی فیلدها میرسه. زمانیکه کاربر روی دکمه check کلیک کند رویداد onsubmit اتفاق می افتد و تابع validateForm فراخوانی میشود. حالا باید تابع را تعریف و دستورات مورد نظر را در آن بنویسیم. ابتدا خالی بودن فیلدها رو چک میکنیم در صورتیکه فیلدی خالی باشد پیام مناسب به کاربر نمایش داده خواهد شد.

function validateForm() {
	var name = document.getElementById("fName").value;
	var email = document.getElementById("email").value;
	var pass = document.getElementById("pass").value;
	if (name == null || name == "") {
		alert("لطفا نام کاربری خود را وارد نمایید");
		return false;
	} else if (pass == null || pass == "") {
		alert("لطفا کلمه عبور را وارد نمایید");
		return false;
	} else if (email == null || email == "") {
		alert("لطفا ایمیل خود را وارد نمایید");
		return false;
	}
}

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

var atPos = email.indexOf("@");
var dotPos = email.lastIndexOf(".");
if (atPos < 1 || dotPos < atPos || dotPos + 2 >= email.length) {
    alert("آدرس ایمیل معتبر نمی باشد");
    return false;
}

متغیر atPos مشخص میکنه که ایمیل وارد شده حاوی علامت @ هست یا نه و متغیر dotPos اندیس مربوط به (.) رو بر میگردونه. در واقع ادرس ایمیل حتما باید دارای علامت @ و . باشه در ادامه با دستور شرطی بررسی میکنیم که علامت @ ابتدای ادرس ایمیل نباشد و همچنین بعد از @ باید . داشته باشد و اینکه . نمیتواند آخرین حرف از آدرس ایمیل باشد. برای دانلود سورس کد اینجا کلیک کنید