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

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

عموما اعتبار سنجی فرم (Form validation) پس از وارد کردن تمام اطلاعات لازم  توسط مشتری و فشردن دکمه Submit برای سرور رخ می دهد. اگر داده های وارد شده توسط مشتری نادرست باشند یا به سادگی از دست رفته باشند، سرور مجبور خواهد شد تمام داده ها را به مشتری ارسال کند و درخواست ارسال مجدد فرم با اطلاعات درست را بدهد. این یک پروسه طولانی است که  بارهای زیادی بر روی سرور قرار می دهد. جاوا اسکریپت پیش از ارسال اعتبار داده های فرم  به سرور وب یک راه را در رایانه سرویس گیرنده فراهم می نماید.

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

  • Basic Validation : پیش از هر کاری فرم باید برای اطمینان از پر شدن فیلد های اجباری بررسی شود. این کار تنها نیازمند یک حلقه می باشد که هر فیلد در فرم و اطلاعات را بررسی کند.
  • Data Format Validation: ثانیا داده هایی که وارد می شوند باید برای درستی فرم و ارزش بررسی شوند. کد شما باید منطقی مناسب برای تست صحت داده ها (correctness of data) داشته باشد.

مثال

مثال زیر به درک روند تأیید اعتبار کمک می کند.

<html>
   
   <head>
      <title>اعتبارسنجی فرم</title>
      
      <script type="text/javascript">
         <!--
            // Form validation code will come here.
         //-->
      </script>
      
   </head>
   
   <body>
      <form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
         <table cellspacing="2" cellpadding="2" border="1">
            
            <tr>
               <td align="right">نام</td>
               <td><input type="text" name="Name" /></td>
            </tr>
            
            <tr>
               <td align="right">لیمیب</td>
               <td><input type="text" name="EMail" /></td>
            </tr>
            
            <tr>
               <td align="right">کدپستی</td>
               <td><input type="text" name="Zip" /></td>
            </tr>
            
            <tr>
               <td align="right">کشور</td>
               <td>
                  <select name="Country">
                     <option value="-1" selected>[انتخاب کنید]</option>
                     <option value="1">ایران</option>
                     <option value="2">اسپانیا</option>
                     <option value="3">هنذ</option>
                  </select>
               </td>
            </tr>
            
            <tr>
               <td align="right"></td>
               <td><input type="submit" value="تایید" /></td>
            </tr>
            
         </table>
      </form>
      
   </body>
</html>

خروجی

 

Basic Form Validation

ابتدا نحوه انجام اعتبار فرم پایه (basic form validation) را ببینید. در فرم بالا validate() را در زمانی که رویداد onsubmit  رخ داد برای اعتبار داده فراخوانی نمودیم. کد زیر نشان دهنده اجرای این تابع  validate () می باشد.

<script type="text/javascript">
   <!--
      // Form validation code will come here.
      function validate()
      {
      
         if( document.myForm.Name.value == "" )
         {
            alert( "لطفا نام را وارد کنید!" );
            document.myForm.Name.focus() ;
            return false;
         }
         
         if( document.myForm.EMail.value == "" )
         {
            alert( "لطفا ایمیل را وارد کنید!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         
         if( document.myForm.Zip.value == "" ||
         isNaN( document.myForm.Zip.value ) ||
         document.myForm.Zip.value.length != 5 )
         {
            alert( "لطفا کدپستی را با فرمت ##### وارد کنید." );
            document.myForm.Zip.focus() ;
            return false;
         }
         
         if( document.myForm.Country.value == "-1" )
         {
            alert( "لطفا کشور را انتخاب کنید!" );
            return false;
         }
         return( true );
      }
   //-->
</script>

 

Data Format Validation

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

مثال زیر چگونگی تایید بک ایمیل آدرس وارد شده را نشان می دهد. یک آدرس ایمیل باید حداقل علامت @ و نقطه (.) را داشته باشد. همچنین، @  نباید اولین کاراکتر آدرس ایمیل باشد و آخرین دات (نقطه) باید حداقل یک کاراکتر پس از کاراکتر «@» باشد.

مثال

کد زیر را جهت اعتبار سنجی آدرس ایمیل امتحان کنید.

<script type="text/javascript">
   <!--
      function validateEmail()
      {
         var emailID = document.myForm.EMail.value;
         atpos = emailID.indexOf("@");
         dotpos = emailID.lastIndexOf(".");
         
         if (atpos < 1 || ( dotpos - atpos < 2 )) 
         {
            alert("لطفا شناسه ایمیل ردست وارد کنید.")
            document.myForm.EMail.focus() ;
            return false;
         }
         return( true );
      }
   //-->
</script>
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

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

Learn JavaScript

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

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

لطفا چند لحظه منتظر بمانید ...