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

4 سال پیش

امتیاز دهید post

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

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

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

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

Basic Validation – اول از همه ، فرم باید بررسی شود تا مطمئن شوید که تمام قسمتهای اجباری پر شده است. این فقط به یک حلقه از طریق هر قسمت در فرم و بررسی داده ها نیاز دارد.
Data Format Validation– ثانیاً ، داده هایی که وارد می شوند باید از نظر شکل و مقدار صحیح بررسی شوند. برای آزمایش صحت داده ها ، کد شما باید منطق مناسبی داشته باشد.

مثال

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

&lt;html&gt;   
   &lt;head&gt;
      &lt;title&gt;Form Validation&lt;/title&gt;      
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            // Form validation code will come here.
         //--&gt;
      &lt;/script&gt;      
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());"&gt;
         &lt;table cellspacing = "2" cellpadding = "2" border = "1"&gt;
            
            &lt;tr&gt;
               &lt;td align = "right"&gt;Name&lt;/td&gt;
               &lt;td&gt;&lt;input type = "text" name = "Name" /&gt;&lt;/td&gt;
            &lt;/tr&gt;
            
            &lt;tr&gt;
               &lt;td align = "right"&gt;EMail&lt;/td&gt;
               &lt;td&gt;&lt;input type = "text" name = "EMail" /&gt;&lt;/td&gt;
            &lt;/tr&gt;
            
            &lt;tr&gt;
               &lt;td align = "right"&gt;Zip Code&lt;/td&gt;
               &lt;td&gt;&lt;input type = "text" name = "Zip" /&gt;&lt;/td&gt;
            &lt;/tr&gt;
            
            &lt;tr&gt;
               &lt;td align = "right"&gt;Country&lt;/td&gt;
               &lt;td&gt;
                  &lt;select name = "Country"&gt;
                     &lt;option value = "-1" selected&gt;[choose yours]&lt;/option&gt;
                     &lt;option value = "1"&gt;USA&lt;/option&gt;
                     &lt;option value = "2"&gt;UK&lt;/option&gt;
                     &lt;option value = "3"&gt;INDIA&lt;/option&gt;
                  &lt;/select&gt;
               &lt;/td&gt;
            &lt;/tr&gt;
            
            &lt;tr&gt;
               &lt;td align = "right"&gt;&lt;/td&gt;
               &lt;td&gt;&lt;input type = "submit" value = "Submit" /&gt;&lt;/td&gt;
            &lt;/tr&gt;
            
         &lt;/table&gt;
      &lt;/form&gt;      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<title>Form Validation</title>

<!--

// Form validation code will come here.

//-->

</script>

</head>

<body>

<tr>

</tr>

<tr>

<td align = "right">EMail</td>

</tr>

<tr>

</tr>

<tr>

<td align = "right">Country</td>

<td>

<option value = "-1" selected>[choose yours]</option>

<option value = "3">INDIA</option>

</select>

</td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

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

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

&lt;script type = "text/javascript"&gt;
   &lt;!--
      // 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 );
      }
   //--&gt;
&lt;/script&gt;

<!--

// 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>

اعتبار سنجی قالب داده

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

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

مثال

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

&lt;script type = "text/javascript"&gt;
   &lt;!--
      function validateEmail() {
         var emailID = document.myForm.EMail.value;
         atpos = emailID.indexOf("@");
         dotpos = emailID.lastIndexOf(".");
         
         if (atpos &lt; 1 || ( dotpos - atpos &lt; 2 )) {
            alert("Please enter correct email ID")
            document.myForm.EMail.focus() ;
            return false;
         }
         return( true );
      }
   //--&gt;
&lt;/script&gt;

<!--

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>

منبع.

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

امتیاز دهید post

نویسنده مطلب saber

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

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

مثال

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

اعتبار سنجی قالب داده

مثال

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

دیدگاه شما

بدون دیدگاه

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

مثال

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

اعتبار سنجی قالب داده

مثال

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه