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

یکی از نیازهای مهم طراحان وب در هنگام طراحی فرم های HTML ، امکان اعتبار سنجی داده هایی است که کاربر در فیلدهای فرم وارد می نماید . یعنی چه؟

یعنی که برنامه ابتدا داده های ورودی کاربر را با معیارهای مورد نظر طراح مقایسه کرده و در صورت دارا بودن شرایط درست آنها را به سرور ارسال می کند.

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

در برخی از فیلدها کاربر حتما باید مقداری را وارد نموده و آن را خالی رها نکند . مثلا فیلد نام در فرم های ثبت نام که حتما باید پر شوند.

بررسی اینکه شماره تلفن یا آدرس ایمیلی که کاربر در فیلدهای مربوطه وارد نموده ، با فرمت واقعی آنها سازگار باشند . البته نمی توان این مسئله را بررسی کرد که آیا ایمیل یا تلفن داده شده واقعی هستند یا خیر . فقط می توان رعایت فرمت صحیح توسط کاربر را بررسی کرد . مثلا کاربر آدرس ایمیل را به صورت some@xyz.abc وارد نموده باشد.

یا مثلا بررسی اینکه کاربر در یک فیلد عددی که مربوط به سن است ، عدد وارد نماید و نه متن 

مواردی شبیه موارد فوق ، در طراحی فرم های تحت وب مورد نیاز هستند . در این بخش قصد داریم تا شما را با برخی از این عملیات ها آشنا سازیم:

۱ . کنترل خالی نماندن یک فیلد ( 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 فرم را می دهد . در صورتی که نام وارد نشده باشد و مقدارش خالی باشد ، پیام هشدار صادر می شود.

۲ . بررسی فرمت صحیح ایمیل های وارد شده ( Email Validation ):

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

در اینجا یک مسئله وجود دارد . ما نمی توانیم بررسی کنیم که آیا ایمیل وارد شده توسط کاربر ، ایمیل واقعی وی می باشد و یا اینکه اصلا وجود خارجی دارد یا خیر . بلکه فقط می توانیم بسنجیم که آیا ایمیل وارد شده با فرمت یک ایمیل واقعی مطابقت دارد یا خیر.

برای این منظور باید مقدار وارد شده برای ایمیل دارای یک علامت @ و یک علامت نقطه ( . ) باشد . همچنین باید علامت @ اولین کاراکتر ایمیل نبوده و همواره قبل از کاراکتر ( . ) ، قرار بگیرد . در نهایت هم باید حداقل ۲ کاراکتر بعد از کاراکتر نقطه ( . ) ، وجود داشته باشد.

مثال: در مثال زیر کدی را قرار داده ایم که مقدار وارد شده در کادر متن در نظر گرفته شده برای ایمیل را بررسی کرده و در صورت صحیح بودن فرمت آن ، فرم را 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 >