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

جاوااسکریپت فرم های داده را مدیریت می کند. یکی دیگر از موضوعات مورد بحث اعتبارسنجی فرم جاوااسکریپت است که به شما امکان می دهد نوع خاصی از داده ها ارسال شود.

این آموزش روش ها و خصوصیات جاوا اسکریپت را برای تأیید اعتبار داده های وارد شده توسط کاربر پوشش می دهد. اعتبار سنجی فرم جاوا اسکریپت اشتباهاتی را در داده های ارائه شده پیدا می کند. برای افزایش الزامات اعتبار سنجی پس از آن ، آموزش JavaScript Regular Expressions را بخوانید تا بیاموزید چگونه الگوهای اعتبار سنجی خود را ایجاد کنید.

نکات اصلی اعتبارسنجی فرم جاوااسکریپت:

• اعتبارسنجی فرم HTML را می توان با استفاده از JavaScript انجام داد.
• اعتبارسنجی فرم جاوااسکریپت اطلاعات ورودی را قبل از ارسال به سرور بررسی می کند.
• معمولاً ، اگر داده های وارد شده نادرست یا فاقد آن باشد ، سرور باید درخواست را برای کاربر ارسال کند. اما با جاوا اسکریپت ، اعتبار سنجی در رایانه مشتری ادامه می یابد.

روشهای استفاده

هنگام استفاده از اعتبارسنجی محدودیت ، می توانید از دو روش استفاده کنید. هر دوی آنها داده ها را به خوبی تأیید می کنند ، اما بازدید کنندگان وب سایت شما تفاوت را متوجه می شوند. با استفاده از setCustomValidity به شما امکان می دهد یک پیام سفارشی اضافه کنید که کاربر هنگام ورود داده مشاهده خواهد کرد.

مثال زیر در صورت نامعتبر بودن داده های ورودی با استفاده از روش ()CheckValidity یک پیام استاندارد را نمایش می دهد:

function clickFunction() {    
   var inpObj = document.getElementById("out");    
   if (inpObj.checkValidity() == false) {          	
      document.getElementById("test").innerHTML = inpObj.validationMessage;      	
   }
}

خواص برای درک

سه ویژگی اصلی DOM در اعتبار سنجی محدودیت استفاده می شود: اعتبار ، اعتبارسنجی پیام و اعتبار سنجی. بیایید ببینیم هر کدام از آنها چه کاری انجام می دهد:

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

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

هرچه نمونه های بیشتری را تجزیه و تحلیل کنید ، بهتر به مغز شما می چسبد. ما برای نشان دادن خصوصیات جداولی که در بالا داریم از چند مورد دیگر استفاده خواهیم کرد.

در این مثال ، ما از ویژگی rangeOverflow استفاده خواهیم کرد. اگر ورودی بیش از 50 باشد ، پیامی نمایش داده می شود. این مقدار اعلام می کند که مقدار از حداکثر بیشتر است:

function clickFunction() {
    var text = "";
    if (document.getElementById("out").validity.rangeOverflow) {
        text = "Value exceeds maximum";
    } else {
        text = "Input OK";
    }
    document.getElementById("test").innerHTML = text;  
}

برای یک هدف مخالف ، می توان از ویژگی rangeUnderflow استفاده کرد. نگاهی به مثال زیر بیندازید. اگر کاربر مقداری را وارد کند که کمتر از 50 باشد ، دوباره پیامی را مشاهده می کند. گرچه این بار مقدار بسیار کمی را بیان خواهد کرد:

function clickFunction() {          
   var text = "";      
   if (document.getElementById("out").validity.rangeUnderflow) {          
       text = "Value too small";      
   } else {
       text = "Input OK";
   } 
   document.getElementById("test").innerHTML = text;  
}

خلاصه اعتبارسنجی فرم جاوااسکریپت:

• قبل از ارسال می توانید از JavaScript برای تأیید فرم های HTML خود استفاده کنید.
• روش های مختلفی وجود دارد که می توانید برای بررسی اعتبار استفاده کنید.
• علاوه بر روش ها ، می توانید چندین ویژگی برای اعتبار سنجی فرم جاوا اسکریپت مستقر کنید.