اعتبار سنجی داده های ورودی در فرم های HTML
اعتبار سنجی داده های ورودی در فرم های HTML :
یکی از نیازهای مهم طراحان وب در هنگام طراحی فرم های HTML ، امکان اعتبار سنجی داده
هایی است که کاربر در فیلدهای فرم وارد می نماید . یعنی چه ؟
یعنی که برنامه ابتدا داده های ورودی کاربر را با معیارهای مورد نظر طراح مقایسه کرده
و در صورت دارا بودن شرایط درست آنها را به سرور ارسال می کند .
این کار بسیار مهم و حیاتی است . چرا که ما نیاز داریم تا اطلاعات صحیح را از کاربران
دریافت نماییم . به چند مورد از این اعتبار سنجی ها اشاره می کنیم :
- در برخی از فیلدها کاربر حتما باید مقداری را وارد نموده و آن را خالی رها نکند . مثلا
فیلد نام در فرم های ثبت نام که حتما باید پر شوند .
- بررسی اینکه شماره تلفن یا آدرس ایمیلی که کاربر در فیلدهای مربوطه وارد نموده ، با
فرمت واقعی آنها سازگار باشند . البته نمی توان این مسئله را بررسی کرد که آیا ایمیل
یا تلفن داده شده واقعی هستند یا خیر . فقط می توان رعایت فرمت صحیح توسط کاربر را
بررسی کرد . مثلا کاربر آدرس ایمیل را به صورت some@xyz.abc وارد نموده باشد .
- یا مثلا بررسی اینکه کاربر در یک فیلد عددی که مربوط به سن است ، عدد وارد نماید و
نه متن .
مواردی شبیه موارد فوق ، در طراحی فرم های تحت وب مورد نیاز هستند . در این بخش قصد
داریم تا شما را با برخی از این عملیات ها آشنا سازیم :
1 . کنترل خالی نماندن یک فیلد ( Require Filed ) :
همانطور که گفتم یکی از نیازهای طراح فرم های HTML ، کنترل این مسئله است که کاربر
در فیلدهایی اجباری حتما مقداری را وارد نماید و آن را خالی رها نکند . مثل فیلد نام
در یک فرم ثبت نام که بایستی حتما پر شود . در مثال کد زیر راه کنترل این مسئله را
به شما نمایش داده ایم .
مثال : در مثال زیر یک فرم ساده داریم که کاربر بایستی نام
خود را در آن وارد نماید . در صورتی که کاربر نام خود را در کادر وارد نکرده و آن را
خالی رها نماید، به هنگام ارسال فرم یک پیام هشدار به وی ارسال می شود که از وی می
خواهد مقداری را در کادر وارد نماید . در غیر اینصورت فرم به صورت درست ارسال می شود
:
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert(" Enter your name
please ! ");
//صفحه قرار گیرد head کد
اسکریپت که باید در قسمت
return false;
}
}
< form name="myForm" action="demo_form.asp" onsubmit="return validateForm()"
method="post" >
First name: < input type="text" name="fname" >
// کد فرم مثال
< input type="submit" value="Submit" >
< /form >
|
توضیح کد مثال : در مثال فوق ، کاربر باید نام خود را در کادر
متنی به نام fname وارد نماید . در زمانی که کاربر فرم را submit می کند ، فرم تابع
( ) validateform را اجرا می کند . این تابع مقدار کادر متن fname موجود در فرم myForm
را در متغیر x می ریزد . سپس مقدار آن را بررسی نموده و در صورت خالی نبودن مقدار آن
، اجازه submit فرم را می دهد . در صورتی که نام وارد نشده باشد و مقدارش خالی باشد
، پیام هشدار صادر می شود .
2 . بررسی فرمت صحیح ایمیل های وارد شده ( Email Validation ) :
در فرم های وب معمولا کادری وجود دارد که کاربر باید آدرس ایمیل خود را در آن وارد
نماید . برنامه نویس یا طراح وب نیاز خواهد داشت ، بتواند مقدار وارد شده در کادر متن
مربوط به ایمیل را بررسی کرده و چنانچه با فرمت واقعی یک ایمیل سازگار باشد ، آن را
قبول کرده و در سیستم ثبت نماید .
در اینجا یک مسئله وجود دارد . ما نمی توانیم بررسی کنیم که آیا ایمیل وارد شده توسط
کاربر ، ایمیل واقعی وی می باشد و یا اینکه اصلا وجود خارجی دارد یا خیر . بلکه فقط
می توانیم بسنجیم که آیا ایمیل وارد شده با فرمت یک ایمیل واقعی مطابقت دارد یا خیر
.
برای این منظور باید مقدار وارد شده برای ایمیل دارای یک علامت @ و یک علامت نقطه
( . ) باشد . همچنین باید علامت @ اولین کاراکتر ایمیل نبوده و همواره قبل از کاراکتر
( . ) ، قرار بگیرد . در نهایت هم باید حداقل 2 کاراکتر بعد از کاراکتر نقطه ( . )
، وجود داشته باشد .
مثال : در مثال زیر کدی را قرار داده ایم که مقدار وارد شده
در کادر متن در نظر گرفته شده برای ایمیل را بررسی کرده و در صورت صحیح بودن فرمت آن
، فرم را submit می کند . در غیر اینصورت یک پیام هشدار به کاربر نمایش می دهد تا ایمیل
وارده را تصحیح نماید .
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos < atpos+2 || dotpos+2
> =x.length )
{
alert("Not a valid e-mail
address");
return false;
}
}
< form name="myForm" action="demo_form.asp" onsubmit="return validateForm();"
method="post" >
Email:
< input type="text" name="email" >
< input type="submit" value="Submit" >
< /form >
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :