اعتبار سنجی داده های ورودی در فرم های 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 >
کد


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟