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

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

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

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

اعتبار سنجی اولیه : اولاً ، باید فرم چک شود تا اطمینان حاصل شود که همه فیلدهای اجباری پر شده اند. صرفاً یک حلقه برای هر فیلد در فرم نیاز داریم که داده ها را چک نماید.
اعتبارسنجی فرمت داده ها : ثانیاً ، داده هایی که وارد شده اند باید برای درست بودن فرمت و مقدار مورد بررسی قرار گیرند. کد ما باید منطقی مناسب برای تست صحت داده ها داشته باشد.

مثال ها

در اینجا ، مثالی را برای درک فرآیند اعتبارسنجی ارائه خواهیم نمود. در این مثال ، یک فرم ساده در فرمت html ایجاد می کنیم.

<html>
   
   <head>
      <title>Form Validation</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">Name</td>
               <td><input type="text" name="Name" /></td>
            </tr>
            
            <tr>
               <td align="right">EMail</td>
               <td><input type="text" name="EMail" /></td>
            </tr>
            
            <tr>
               <td align="right">Zip Code</td>
               <td><input type="text" name="Zip" /></td>
            </tr>
            
            <tr>
               <td align="right">Country</td>
               <td>
                  <select name="Country">
                     <option value="-1" selected>[choose yours]</option>
                     <option value="1">USA</option>
                     <option value="2">UK</option>
                     <option value="3">INDIA</option>
                  </select>
               </td>
            </tr>
            
            <tr>
               <td align="right"></td>
               <td><input type="submit" value="Submit" /></td>
            </tr>
            
         </table>
      </form>
      
   </body>
</html>

خروجی

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

ابتدا ، بیایید ببینیم که چگونه اعتبارسنجی اولیه یک فرم انجام می شود. در فرم بالا ، ما متد ()validate را برای تأیید داده ها ، زمانی که رویداد onsubmit اتفاق می افتد ، فراخوانی می کنیم. کد زیر نشان دهنده اجرای تابع ()validate است.

<script type="text/javascript">
   <!--
      // Form validation code will come here.
      function validate()
      {
      
         if( document.myForm.Name.value == "" )
         {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }
         
         if( document.myForm.EMail.value == "" )
         {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         
         if( document.myForm.Zip.value == "" ||
         isNaN( document.myForm.Zip.value ) ||
         document.myForm.Zip.value.length != 5 )
         {
            alert( "Please provide a zip in the format #####." );
            document.myForm.Zip.focus() ;
            return false;
         }
         
         if( document.myForm.Country.value == "-1" )
         {
            alert( "Please provide your country!" );
            return false;
         }
         return( true );
      }
   //-->
</script>

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

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

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

مثال

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

<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("Please enter correct email ID")
            document.myForm.EMail.focus() ;
            return false;
         }
         return( true );
      }
   //-->
</script>

پکیج های آموزشی جدید

آموزش ساخت ادیتور Html

فصلِ: 1 , تعداد قسمت ها: 4 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش JAVASCRIPT

این فصل در یک نگاه:

در این مجموعه به آموزش کامل ckeditor از نصب آن تا شخصی سازی و افزودن امکانات اختصاصی به ان می پردازیم.…

با توجه به اینکه آموزش جامع و کاملی در مورد نحوه ایجاد و شخصی سازی یک ادیتور در وب سایت و صفحات وب، وجود نداشت برآن شدیم تا یک سری مجموعه آموزشی کامل و جامع در رابطه با این موضوع تهیه نماییم…

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

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

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

مثال ها

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

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

آیا نیاز به مدرک هم دارید؟