اعتبارسنجی form جاوااسکریپت

درس بعدی ||||| درس قبلی

منظور از اعتبارسنجی فرم، بررسی این است که آیا کاربر فیلدها را درست وارد کرده یا خیر. برای این منظور باید در دستورات جاوااسکریپت به عناصر فرم دسترسی پیدا کرد. برای این منظور از تابع getElementById استفاده می شود. با توجه به اینکه تعداد عناصر فرم ممکن است زیاد باشد بهتر است از تگ div استفاده شود و برای دسترسی به هریک از عناصر تگ div، از getElementByTagName استفاده شود که خروجی آن یک آرایه است. به عنوان مثال فرم زیر را در نظر بگیرید:

<form>
  <div id="d1">
     <input type="text" id="name"><span></span><br />
     <input type="text" id="phone"><span></span><br />
     <input type="text" id="email"><span></span><br />
     input type="button" value="validation" onclick="validate()">
   </div>
</form>

در این فرم تگ div با id با نام d1 مشخص می شود و دارای ۳ کادر متنی یک دکمه و سه تگ span است. برای دسترسی به تگهای span در تگ div به صورت زیر عمل میکنیم:

 var para=document.getElementById("d1").getElementsByTagName('span');

با توجه به اینکه در فرم سه تگ span داریم بنابراین para یک آرایه است که [0]para نشان دهنده اولین تگ span است و [1]para نشان دهنده دومین تگ span است و الی آخر. مثلا می خواهیم در اولین کادر متنی که id آن name است چنانچه تعداد کاراکترها کمتر از ۳ بود پیغام مناسبی در اولین span با رنگ قرمز به کاربر نمایش داده شود. بنابراین از کد زیر استفاده می شود:

var txt=document.getElementById("name").value;
//alert(txt);
if(txt.length<3){
   para[0].style.color="red";
   para[0].innerHTML="Name must be more than 3 characters!";
   exit();
 }

یا چنانچه کاربر در کادر متنی که id آن phone است مقداری وارد کرد که با ۰۹ شروع نمی شود و یا ۱۱ رقمی نیست کد زیر باید نوشته شود:

var txt2=document.getElementById("phone").value;
 //alert(txt2);
 if(txt2.length!=11 || txt2.indexOf("09")!=0){
      para[1].style.color="red";
      para[1].innerHTML="Phone is not valid!";
      exit();
}

برای کادر متنی سوم که id آن email است چنانچه کاربر مقدار ایمیل نامعتبری وارد کرد پیغام خطایی نشان داده شود. مثلا باید حتما @ در آدرس ایمیل باشد و قبل از آن حداقل یک کاراکتر باید بیاید. در نتیجه از تابع lasIndexOf باید استفاده شود. به صورت زیر:

txt3.lastIndexOf('@')<=0

یا باید یک علامت @ در ایمیل داشته باشیم و بیشتر از یک علامت @ ایمیل نامعتبر است. برای این منظور از تابع split استفاده می شود که بر طبق @ رشته ایمیل را تقسیم می کند اگر بیشتر از دو باشد خطا دارد. به صورت زیر:

txt3.split("@").length>2

علاوه براین در یک ایمیل معتبر باید آخرین . بعد از @ باشد. برای این منظور از تابع lastIndexOf به صورت زیر استفاده می شود:

txt3.lastIndexOf('.')<txt3.lastIndexOf('@')

کل کد مربوط به اعتبارسنجی ایمیل بصورت زیر است:

var txt3=document.getElementById("email").value;
//alert(txt3);
if(txt3.lastIndexOf('@')<=0 || txt3.split("@").length>2 || 
  txt3.lastIndexOf('.')<txt3.lastIndexOf('@')){
       para[2].style.color="red";
       para[2].innerHTML="Email is not valid!";
       exit();
}

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

<html>
    <head>
        <script type="text/javascript">
            function validate(){
                var para=document.getElementById("d1").getElementsByTagName('span');
                var txt=document.getElementById("name").value;
                //alert(txt);
                if(txt.length<3){
                    para[0].style.color="red";
                    para[0].innerHTML="Name must be more than 3 characters!";
                    exit();
                }else{
                    para[0].innerHTML="";
                    var txt2=document.getElementById("phone").value;
                    //alert(txt2);
                    if(txt2.length!=11 || txt2.indexOf("09")!=0){
                        para[1].style.color="red";
                        para[1].innerHTML="Phone is not valid!";
                        exit();
                    }else{
                        para[1].innerHTML="";
                        var txt3=document.getElementById("email").value;
                        //alert(txt3);
                        if(txt3.lastIndexOf('@')<=0 || txt3.split("@").length>2 || 
                            txt3.lastIndexOf('.')<txt3.lastIndexOf('@')){
                            para[2].style.color="red";
                            para[2].innerHTML="Email is not valid!";
                            exit();
                        }else{
                            para[2].innerHTML="";
                            alert("All of fields are completed successfully")
                        }


                    }

                }
            }
        </script>
    </head>
    <body>
        <form>
            <div id="d1">
                <input type="text" id="name"><span></span><br />
                <input type="text" id="phone"><span></span><br />
                <input type="text" id="email"><span></span><br />
                <input type="button" value="validation" onclick="validate()">
            </div>
        </form>
    </body>
</html>