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

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

توسط

۱۳۹۹-۰۹-۲۱

این آموزش در تاریخ ۱۴۰۱/۰۴/۰۷ آپدیت شده است.

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

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

Free-Learn

آنچه در این جلسه میخوانید :

1 نحوه اعتبار سنجی فرم ها
2 انواع روش های اعتبارسنجی فرم ها
3 اعتبار سنجی فرم ها در HTML
4 اعتبار سنجی فرم ها در جاوا اسکریپت
5 مثال های بیشتر

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

خب اصلا اعتبارسنجی فرم ها یعنی چی؟ ببینید دوستان فرض میکنیم ما یه فرم داریم که قراره از کاربر نام کاربری و ایمیل بگیریم، حالا ما باید کاری کنیم که کاربر نتونه همینجوری عشقی هرچی دلش خواست داخل اینپوت ها بنویسه و ارسال کنه

مثلا ممکنه کاربر بخواد بدون اینکه چیزی وارد کنه، فرم رو ارسال کنه! یا مثلا ما گفتیم آدرس ایمیل وارد کن ولی کاربر عمدا شماره تلفن وارد میکنه و… پس در مجموع ما با استفاده از اعتبارسنجی باید جلوی شیطونی کردن کاربر رو بگیریم.

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

جلوگیری از خالی ارسال شدن فرم
جلوگیری از ارسال داده های غیرمرتبط ( مثلا ما گفتیم ایمیل وارد کن، طرف شماره تلفن وارد کرده )
جلوگیری از ایجاد خطاهای غیرمنتظره ( در سمت سرور )
و..

خب حالا یه سوال بپرسم!؟ کیا میدونن خوده فرم رو چجوری و با استفاده از چه زبانی میشه ایجاد کرد؟ یعنی الان مثلا ما میخوایم یه فرم در صفحه ایجاد کنیم خب باید چکار کنیم؟

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

پیشنهاد میکنم حتما آموزش کار با فرم ها در HTML را مشاهده نمایید.

Free-Learn

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

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

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

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

Free-Learn

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

خب درسته که زبان HTML خوده فرم و عناصرش رو ایجاد میکنه ولی خب به لطف نسخه ۵ این زبان یعنی HTML5 و صفت هایی که در این نسخه اضافه شده، ما میتونیم اعتبارسنجی رو با خوده HTML هم انجام بدیم.

مثال شماره ۱ : اعتبار سنجی فرم ها با استفاده از صفت required در HTML

<form action="files/get_data.php" method="POST">
 <input type="text" name="myname" required>
 <input type="submit" value="ارسال">
</form>

</form>

امتحان کنید

توضیح مثال بالا :

خب خیلی راحت با استفاده از صفت required در درون هر یک از اینپوت ها به راحتی اعتبار سنجی فرم رو انجام دادیم، یعنی الان اگه کاربر بخواد خالی خالی فرم رو ارسال کنه بهش پیغام میده که مثلا تکمیل کردن این فیلد ضروری است، و دیگه اجازه نمیده خالی خالی فرم رو ارسال کنه. ( حتما آموزش صفت required در HTML رو مطالعه نمایید )

مثال شماره ۲ : اعتبار سنجی با استفاده از صفت Pattern در HTML

<form action="files/get_data1.php" method="POST">
 <input type="tel" name="TelNumber" pattern="[0-9]{11}" required>
 <input type="submit" value="ارسال">
</form>

</form>

امتحان کنید

توضیح مثال بالا :

با استفاده از صفت Pattern میتونیم مشخص کنیم که کاربر چه چیزی میتونه در اینپوت ها وارد کنه، مثلا در مثال بالا گفتیم فقط ۱۱ رقم، اونم از رقم ۰ تا ۹ بتونه وارد کنه. ( حتما آموزش صفت Pattern در HTML رو مطالعه نمایید )

Free-Learn

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

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

قدم اول : تعریف یک ID برای فرم

<form action="#" method="post" id="MyForm">

1	<form action="#" method="post" id="MyForm">

قدم دوم : برای هر یک از فیلدهامون یک نام با استفاده از صفت name مشخص میکنیم

<input type="text" name="User_Name">
<input type="text" name="User_Family">

1 2	<input type="text" name="User_Name"> <input type="text" name="User_Family">

قدم سوم : برای نمایش ( Error ) ارورهامون ۲ تا تگ span با ID مشخص میکنیم

<span id="un_error"></span>
<span id="uf_error"></span>

1 2	<span id="un_error"></span> <span id="uf_error"></span>

قدم چهارم : یه تابع برای اعتبارسنجی فرم کدنویسی میکنیم

function My_Validate(){

 var uname_error , ufamily_error;
 uname_error = document.getElementById("un_error");
 ufamily_error = document.getElementById("uf_error");
 
 var UserName = document.forms["MyForm"]["User_Name"].value;
 var UserFamily = document.forms["MyForm"]["User_Family"].value;
 
 if ( UserName == "" && UserFamily == "" ){
  uname_error.style.display = "block";
  ufamily_error.style.display = "block";
  uname_error.innerHTML ="لطفا نام وارد کنید";
  ufamily_error.innerHTML ="لطفا فامیلی وارد کنید";
  return false;
 }
 
 else if ( UserName != "" && UserFamily == "" ){
  ufamily_error.style.display = "block";
  uname_error.style.display = "none";
  ufamily_error.innerHTML ="لطفا فامیلی وارد کنید";
  uname_error.innerHTML ="";
  return false;
 }
 
 else if ( UserName == "" && UserFamily != "" ){
  ufamily_error.style.display = "none";
  uname_error.style.display = "block";
  uname_error.innerHTML ="لطفا نام وارد کنید";
  ufamily_error.innerHTML ="";
  return false;
 }
 
 else{
  alert("همه چی درسته و فرم ارسال شد");
 }

}

function My_Validate(){

var uname_error , ufamily_error;

uname_error = document.getElementById("un_error");

ufamily_error = document.getElementById("uf_error");

var UserName = document.forms["MyForm"]["User_Name"].value;

var UserFamily = document.forms["MyForm"]["User_Family"].value;

if ( UserName == "" && UserFamily == "" ){

uname_error.style.display = "block";

ufamily_error.style.display = "block";

uname_error.innerHTML ="لطفا نام وارد کنید";

ufamily_error.innerHTML ="لطفا فامیلی وارد کنید";

return false;

}

else if ( UserName != "" && UserFamily == "" ){

ufamily_error.style.display = "block";

uname_error.style.display = "none";

ufamily_error.innerHTML ="لطفا فامیلی وارد کنید";

uname_error.innerHTML ="";

return false;

}

else if ( UserName == "" && UserFamily != "" ){

ufamily_error.style.display = "none";

uname_error.style.display = "block";

uname_error.innerHTML ="لطفا نام وارد کنید";

ufamily_error.innerHTML ="";

return false;

}

else{

alert("همه چی درسته و فرم ارسال شد");

}

قدم آخر : از صفت onsubmit در فرم استفاده میکنیم و تابعی که تعریف کردیم درش قرار میدیم.

<form action="#" method="post" id="MyForm" onsubmit="return My_Validate();">

1	<form action="#" method="post" id="MyForm" onsubmit="return My_Validate();">

کد کامل

<script>

function My_Validate(){

 var uname_error , ufamily_error;
 uname_error = document.getElementById("un_error");
 ufamily_error = document.getElementById("uf_error");
 
 var UserName = document.forms["MyForm"]["User_Name"].value;
 var UserFamily = document.forms["MyForm"]["User_Family"].value;
 
 if ( UserName == "" && UserFamily == "" ){
  uname_error.style.display = "block";
  ufamily_error.style.display = "block";
  uname_error.innerHTML ="لطفا نام وارد کنید";
  ufamily_error.innerHTML ="لطفا فامیلی وارد کنید";
  return false;
 }
 
 else if ( UserName != "" && UserFamily == "" ){
  ufamily_error.style.display = "block";
  uname_error.style.display = "none";
  ufamily_error.innerHTML ="لطفا فامیلی وارد کنید";
  uname_error.innerHTML ="";
  return false;
 }
 
 else if ( UserName == "" && UserFamily != "" ){
  ufamily_error.style.display = "none";
  uname_error.style.display = "block";
  uname_error.innerHTML ="لطفا نام وارد کنید";
  ufamily_error.innerHTML ="";
  return false;
 }
 
 else{
  alert("همه چی درسته و فرم ارسال شد");
 }

}

</script>

function My_Validate(){

var uname_error , ufamily_error;

uname_error = document.getElementById("un_error");

ufamily_error = document.getElementById("uf_error");

var UserName = document.forms["MyForm"]["User_Name"].value;

var UserFamily = document.forms["MyForm"]["User_Family"].value;

if ( UserName == "" && UserFamily == "" ){

uname_error.style.display = "block";

ufamily_error.style.display = "block";

uname_error.innerHTML ="لطفا نام وارد کنید";

ufamily_error.innerHTML ="لطفا فامیلی وارد کنید";

return false;

}

else if ( UserName != "" && UserFamily == "" ){

ufamily_error.style.display = "block";

uname_error.style.display = "none";

ufamily_error.innerHTML ="لطفا فامیلی وارد کنید";

uname_error.innerHTML ="";

return false;

}

else if ( UserName == "" && UserFamily != "" ){

ufamily_error.style.display = "none";

uname_error.style.display = "block";

uname_error.innerHTML ="لطفا نام وارد کنید";

ufamily_error.innerHTML ="";

return false;

}

else{

alert("همه چی درسته و فرم ارسال شد");

}

</script>

امتحان کنید

Free-Learn

مثال های بیشتر

مثال شماره ۱ : کاربر فقط بتونه یک عدد از بین ۵ تا ۱۰ وارد کنه

<script>

function My_Validate(){
  var result , UserNumber;
  result = document.getElementById("Result");
  UserNumber = document.forms["MyForm"]["My_Number"].value;
  
  if ( UserNumber == "" ) {
   result.innerHTML = "لطفا یک عدد وارد کن";
   return false;
  }
  else if ( UserNumber <= 5 ){
   result.innerHTML = "باید یه عدد بزرگتر از 5 وارد کنی";
   return false;
  }
  else if ( UserNumber >= 10 ){
   result.innerHTML = "باید یه عدد کمتر از 10 وارد کنی";
   return false;
  }
  else{
   alert("همه چی درسته و فرم ارسال شد");
  }
}

</script>

function My_Validate(){

var result , UserNumber;

result = document.getElementById("Result");

UserNumber = document.forms["MyForm"]["My_Number"].value;

if ( UserNumber == "" ) {

result.innerHTML = "لطفا یک عدد وارد کن";

return false;

}

else if ( UserNumber <= 5 ){

result.innerHTML = "باید یه عدد بزرگتر از 5 وارد کنی";

return false;

}

else if ( UserNumber >= 10 ){

result.innerHTML = "باید یه عدد کمتر از 10 وارد کنی";

return false;

}

else{

alert("همه چی درسته و فرم ارسال شد");

}

</script>

امتحان کنید

مثال شماره ۲ : کاربر فقط بتونه متنی رو که ما از قبل مشخص کردیم وارد کنه

<script>

function My_Validate(){
  var result , UserInput ,My_Text;
  result = document.getElementById("Result");
  UserInput = document.forms["MyForm"]["User_Input"].value;
  My_Text = "فری لرن";
  
  if ( UserInput == "" ) {
   result.innerHTML = "لطفا یه چیزی وارد کن";
   return false;
  }
  else if ( UserInput != My_Text ){
   result.innerHTML = "باید کلمه فری لرن رو وارد کنی";
   return false;
  }
  else{
   alert("همه چی درسته و فرم ارسال شد");
  }
}

</script>

function My_Validate(){

var result , UserInput ,My_Text;

result = document.getElementById("Result");

UserInput = document.forms["MyForm"]["User_Input"].value;

My_Text = "فری لرن";

if ( UserInput == "" ) {

result.innerHTML = "لطفا یه چیزی وارد کن";

return false;

}

else if ( UserInput != My_Text ){

result.innerHTML = "باید کلمه فری لرن رو وارد کنی";

return false;

}

else{

alert("همه چی درسته و فرم ارسال شد");

}

</script>

امتحان کنید

مثال شماره ۳ : نمایش پیغام های هشدار با استفاده از پیغام هشدار alert

<script>

function My_Validate(){

 var UserName = document.forms["MyForm"]["User_Name"].value;
 var UserFamily = document.forms["MyForm"]["User_Family"].value;
 
 if ( UserName == "" && UserFamily == "" ){
  alert("لطفا نام و فامیلی رو وارد نمایید");
  return false;
 }
 
 else if ( UserName != "" && UserFamily == "" ){
  alert("لطفا فامیلی را وارد نمایید");
  return false;
 }
 
 else if ( UserName == "" && UserFamily != "" ){
  alert("لطفا نام را وارد نمایید");
  return false;
 }
 
 else{
  alert("همه چی درسته و فرم ارسال شد");
 }

}

</script>

function My_Validate(){

var UserName = document.forms["MyForm"]["User_Name"].value;

var UserFamily = document.forms["MyForm"]["User_Family"].value;

if ( UserName == "" && UserFamily == "" ){

alert("لطفا نام و فامیلی رو وارد نمایید");

return false;

}

else if ( UserName != "" && UserFamily == "" ){

alert("لطفا فامیلی را وارد نمایید");

return false;

}

else if ( UserName == "" && UserFamily != "" ){

alert("لطفا نام را وارد نمایید");

return false;

}

else{

alert("همه چی درسته و فرم ارسال شد");

}

</script>

امتحان کنید

مثال شماره ۴ : نمایش پیغام های هشدار باکلاس تر با استفاده از کتابخانه Sweet Alert ( سایت رسمی )

<script>

function My_Validate(){

 var UserName = document.forms["MyForm"]["User_Name"].value;
 var UserFamily = document.forms["MyForm"]["User_Family"].value;
 
 if ( UserName == "" && UserFamily == "" ){
  Swal.fire({
   icon: 'error',
   title: 'لطفا نام و فامیلی را وارد نمایید',
   showConfirmButton: false,
   timer: 1500
  });
  return false;
 }
 
 else if ( UserName != "" && UserFamily == "" ){
  Swal.fire({
   icon: 'error',
   title: 'لطفا فامیلی را وارد نمایید',
   showConfirmButton: false,
   timer: 1500
  });
  return false;
 }
 
 else if ( UserName == "" && UserFamily != "" ){
  Swal.fire({
   icon: 'error',
   title: 'لطفا نام را وارد نمایید',
   showConfirmButton: false,
   timer: 1500
  });
  return false;
 }
 
 else{
  alert("همه چی درسته و فرم ارسال شد");
 }

}

</script>

function My_Validate(){

var UserName = document.forms["MyForm"]["User_Name"].value;

var UserFamily = document.forms["MyForm"]["User_Family"].value;

if ( UserName == "" && UserFamily == "" ){

Swal.fire({

icon: 'error',

title: 'لطفا نام و فامیلی را وارد نمایید',

showConfirmButton: false,

timer: 1500

});

return false;

}

else if ( UserName != "" && UserFamily == "" ){

Swal.fire({

icon: 'error',

title: 'لطفا فامیلی را وارد نمایید',

showConfirmButton: false,

timer: 1500

});

return false;

}

else if ( UserName == "" && UserFamily != "" ){

Swal.fire({

icon: 'error',

title: 'لطفا نام را وارد نمایید',

showConfirmButton: false,

timer: 1500

});

return false;

}

else{

alert("همه چی درسته و فرم ارسال شد");

}

</script>

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب

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

Free-Learn

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

Free-Learn

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

Free-Learn

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

Free-Learn

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

Free-Learn

مثال های بیشتر

Free-Learn

آموزش پیشرفته جاوااسکریپت

کار با توابع یا Functions در جاوا اسکریپت

کار با اشیاء یا Objects در جاوااسکریپت

آموزش مدیریت خطاها در جاوا اسکریپت

کار با آرایه ها یا Arrays در جاوااسکریپت

کار با متدهای آرایه ها در جاوااسکریپت

کار با تاریخ و ساعت در جاوااسکریپت

کار با متدهای گرفتنی یا Get در تاریخ و ساعت

کار با متدهای ست کردنی یا Set در تاریخ و ساعت

آموزش نحوه استفاده از CSS در HTML