آموزش برنامه نویسی و مجله تخصصی فناوری
آموزش جاوا اسکریپت - اعتبار سنجی فرم
اعتبارسنجی فرم (Form validation) معمولاً در سرور انجام می شود، پس از اینکه کاربر (Client) تمامی اطلاعات لازم را وارد کرده و دکمه ارسال (Submit) را فشار داده باشد. اگر اطلاعات وارد شده توسط کاربر اشتباه یا به سادگی اصلا وارد نشده بود، سرور باید تمامی اطلاعات را به کاربر بازگردانده و درخواست ارسال مجدد فرم با اطلاعات صحیح را درخواست کند. این فرآیند واقعاً فرآیند طولانی و سنگینی بود که برای سرور بار زیادی را به همراه داشت.
جاوااسکریپت یک راه برای اعتبارسنجی داده های فرم (Form's data) در کامپیوتر کاربر (Client) فراهم می کند، قبل از اینکه داده ها به سرور وب ارسال شود. اعتبارسنجی فرم معمولاً دو عملکرد اصلی را انجام می دهد.
-
اعتبارسنجی پایه (Basic Validation) − اولین کار، بررسی فرم برای اطمینان از پر شدن تمامی فیلدهای اجباری است. این کار نیازمند یک حلقه (Loop) از هر فیلد در فرم و بررسی داده ها است.
-
اعتبارسنجی فرمت داده (Data Format Validation) − در مرحله دوم، داده های وارد شده برای فرمت و مقدار صحیح بودن باید بررسی شود. کد شما باید شامل منطق مناسب برای بررسی درستی داده ها باشد.
مثال
ما یک مثال را برای درک فرآیند اعتبارسنجی در نظر می گیریم. اینجا یک فرم ساده در قالب 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>
اعتبارسنجی پایه فرم
ابتدا ببینیم چگونه می توانیم یک اعتبارسنجی پایه فرم انجام دهیم. در فرم بالا، ما در هنگام رویداد onsubmit از تابع validate() برای اعتبارسنجی داده ها استفاده می کنیم. کد زیر پیاده سازی این تابع 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>