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

[sky boy]

یکی از موارد کاربردی استفاده از جاوا اسکریپت (javascript) در صفحات وب، اجرای توابع در هنگام کار با عناصر فرم های وب در سمت کاربر (مرورگر)هستش،
به فرض وقتی کاربر در حال تکمیل اطلاعاتی در یک فیلد هست، میشه همزمان یا بعد از اینکه بر روی دکمه ارسال کلیک کرد،
با اجرای یک رویداد و فراخوانی توابع جاوا اسکریپتی، از معتبر بودن اطلاعات تکمیل شده تا حدود زیادی اطمینان حاصل کرد
و در صورت غیر معتبر بودن مقادیر، به شیوه های مختلف کاربر رو جهت تکمیل موارد مورد نیاز راهنمایی کرد،
در این آموزش هدف اینه که چند روش کاربردی و در عین حال خلاقانه اعتبار سنجی فرم های وب با جاوا اسکریپت رو بررسی کنیم.

منظور از اعتبار سنجی چیه؟

قبل از پرداختن به آموزش، ذکر این نکته لازمه که منظور از اعتبار سنجی در فرم های وب، یعنی بررسی معتبر بودن اطلاعاتی که کاربر در آنها وارد کرده،
با مقادیر مورد انتظار ما، یا به فرض عدم اجازه ارسال فرم های خالی، به طور مثال هنگامی که کاربر بدون تکمیل فیلدهای مورد نیاز و ضروری، قصد ارسال فرم را دارد،
پیام هشداری به او نشان داده شود، یا اگر در فیلدی ایمیل خود را وارد کرده و این ایمیل سهوا یا عمدا بدون علامت @ درج شده باشد،
این موضوع قبل از ارسال فرم، به اطلاع او برسد، البته اعتبار سنجی در وب می تواند به طور کلی در دو مرحله صورت گیرد،
در سمت کاربر (در مرورگر) و همچنین در سمت سرور (با برنامه نویسی سمت سرور مثل php ,asp و...) ترکیبی از این روش ها نیز با استفاده از فناوری آژاکس (ajax) امکان پذیره .

 

[sky boy]

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

شاید توی ذهن شما این سوال باشه که کدوم شیوه اعتبار سنجی در وب بهتره، اعتبار سنجی سمت کاربر و در مرورگر یا اعتبار سنجی سمت سرور؟
پاسخ اینه که به جهت اطمینان بخشی، اعتبار سنجی سمت سرور مطمئن تر و بهتره،
چرا که اعتبار سنجی سمت کاربر متکی بر امکانات مرورگره، به فرض اگر به هر دلیل جاوا اسکریپت پشتیبانی نشه یا غیر فعال باشه، این نوع اعتبار سنجی عمل نخواهد کرد،
اما اعتبار سنجی سمت سرور در هر شرایطی عمل می کنه مگر اینکه خودتان بخواهید آن را تغییر بدید،
شاید با این تفسیر این سوال به ذهن خطور کند که پس لزوم استفاده از اعتبار سنجی با جاوا اسکریپت چیست؟
پیش از این در همین بخش در ایرانجمن گفته شد که ممکنه تمام مرورگرها از جاوا اسکریپت پشتیبانی نکنند
(مثلا جاوا اسکریپت توسط کاربر غیر فعال شده باشد یا به فرض در مورد ارسال هرزنامه توسط ربات های خزنده و...)، اما در اکثر موارد این طور نیست،
لذا برای افزایش قابلیت های تعاملی برنامه خود و راهنمایی کاربران در هنگام پر کردن فرم های وب، همچنان می توان علاوه بر اعتبار سنجی سمت سرور، از جاوا اسکریپت نیز در کنار آن استفاده کرد،
نتیجه اینکه هیچ گاه نباید تنها متکی بر جاوا اسکریپت باشیم، بلکه در کنار برنامه نویسی سمت سرور، می توانیم از جاوا اسکریپت نیز استفاده کنیم.

 

[sky boy]

بررسی خالی نبودن یک فرم و نمایش پیام هشدار با alert

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

<script type="text/javascript">
<!--
function validateForm(){
var field = document.forms["form-1"]["name-1"].value;
if (field == null || field == ""){
    alert("فیلد نام نباید خالی باشد");
    return false;
  }
}
//-->
</script>

توضیح:
- این تابع ساده، ابتدا مقادیر فیلد فرضی name-1 را از فرمی با نام form-1 دریافت می کند.
- سپس با یک دستور شرطی ساده if، بررسی می کند که متغیر field که در واقع مقادیر value فیلد name-1 است، خالی یا null نباشد.
- اگر فیلد خالی باشد، پس نتیجه بررسی ما true شده و با یک دستور alert، پیامی به کاربر نشان داده می شود، با return false نیز حالت پیش فرض مرورگر نادیده گرفته شده و از ارسال مقادیر فرم جلوگیری می شود.
تابع بالا را می توان به فرض در هنگام ارسال یک فرم html به شکل زیر فراخوانی نمود.

<form name="form-1" action="#" method="post" onsubmit="return validateForm();">
<input type="text" name="name-1" />
<input type="submit" value="ارسال" />
</form>

توضیح:
- همانطور که ملاحظه می کنید، عبارت form-1 در واقع اسم فرم و name-1 عنوان فیلد مورد نظر است.
- رویدادی که در اینجا از آن برای فراخوانی تابع جاوا اسکریپتی استفاده کردیم، onsubmit است که به تگ form آن را نسبت دادیم.
- این نوع اعتبار سنجی تنها در صورتی عمل می کند که در فرم html از دکمه با type submit برای ارسال فرم استفاده شود، که در قالب موارد همین طور است.

ادامه دارد..

 

[sky boy]

اعتبارسنجی فرم با رویداد onblur و innerHTML

یک شیوه دیگه اعتبار سنجی فرم های وب که برعکس مورد بالا، میتونه به طور همزمان با پر کردن فرم توسط کاربر مورد استفاده قرار بگیره، فراخوانی تابع جاوا اسکریپت با رویداد onblur هست،
رویداد onblur در واقع به معنی زمانی هستش که کاربر ابتدا در فرم کلیک یا به اصطلاح focus کرده و سپس در فیلدی دیگر یا در فضای خالی صفحه کلیک می کنه،
در این حالت رویداد onblur رخ میده، از خاصیت innerHTML هم برای نمایش یک پیام در بلاک div با id مشخص یا دریافت مقادیر از آن استفاده میشه.
فرم html شامل دو فیلد فرضی نام و نام خانوادگی جهت نمونه:

<form name="form-2" action="#" method="post">
<input type="text" name="name-2" id="name-2" onblur="CheckEmpty();" />
<div id="name-error" class="error"></div>
<br />
<input type="text" name="family-2" id="family-2" onblur="CheckEmpty();" />
<div id="family-error" class="error"></div>
</form>

توضیح:
- به دلیل استفاده از خاصیت innerHTML و document.getElementById در تابع CheckEmpty و به این دلیل که مقادیر آرگومان های تابع در خود آن تعریف شده اند،
این بار باید کد جاوا اسکریپت را بعد از فرم قرار بدیم تا مقادیر بلاک و فیلد مورد نظر با خاصیت getElementById در دسترس باشه
(اگر کد جاوا اسکریپت را قبل از فرم قرار دهید، تابع عمل نخواهد کرد).
- در فرم فرضی بالا دو فیلد با نام های name-2 و family-2 داریم که برای هر کدام از اونها با رویداد onblur تابع CheckEmpty را فراخوانی می کنیم.
- اگر دقت کرده باشید، دو بلاک div با id فرضی name-error و family-error را تنظیم کردم که به هنگام فراخوانی تابع CheckEmpty، اگر مقادیر فیلدها خالی باشه،
خطای مورد نظر ما را در خود نشان می دهند، برای سفارشی سازی نحوه نمایش خطا نیز از css و کلاس error استفاده کردم.

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

<script type="text/javascript">
<!--
function CheckEmpty(){
    if(document.getElementById('name-2').value === ''){
        document.getElementById('name-error').innerHTML = 'لطفا نام خود را وارد کنید!';
        return false;
        }
    else{
        document.getElementById('name-error').innerHTML = '';
    }
    if(document.getElementById('family-2').value === ''){
        document.getElementById('family-error').innerHTML = 'لطفا نام خانوادگی خود را وارد کنید!';
        return false;
        }
    else{
        document.getElementById('family-error').innerHTML = '';
    }
    return true;
}
//-->
</script>

توضیح:
- اتفاقی که در این تابع به ظاهر پیچیده می افته بسیار ساده هست،
پس از فراخوانی تابع با رویداد onblur ابتدا با دستور شرطی if مقادیر فیلد name-2 توسط خاصیت getElementById و value دریافت می شود.
- اگر این مقادیر برابر با خالی بود، به بلاک div با id فرضی name-error متن خطا ارسال می شود (با کمک خاصیت innerHTML)؛ آنگاه تابع با برگرداندن مقادیر false به پایان می رسد.
- قسمت مربوط به else در تابع بالا در صورتی اجرا می شود که مقادیر فیلدها خالی نباشد، لذا با اجرا شدن این قسمت، پیامی که پیش تر آن را نمایش داده بودیم، محو میشه.

 

[sky boy]

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

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

<script type="text/javascript">
<!--
function emailValidate(formid,email) {
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var address = document.forms[formid].elements[email].value;
    if(reg.test(address) == false) {
        alert('آدرس ایمیل وارد شده نامعتبر است');
        return false;
   }
}
//-->
</script>

توضیح:
- تابع بالا مبتنی بر دو عنصر کلیدی است، یک استفاده از عبارات با قاعده (Regular Expressions) و دوم استفاده از خاصیت test در جاوا اسکریپت.
- با استفاده از عبارات با قاعده یک الگوی مورد انتظارمان را تعریف می کنیم، در اینجا الگویی از یک ایمیل در حالت معمول تعریف شده ،
سپس با متد test بررسی می کنیم که آیا مقادیر فرم ایمیل ما با الگوی مورد انتظار تطابق دارد یا خیر،
اگر جواب منفی باشد، test مقادیر false را برمی گرداند و در نتیجه قسمت داخل دستور شرطی if اجرا شده و پیام هشدار نشان داده می شود،
همانطور که پیش تر در ابتدای همین تاپیک گفتم return false نیز مانع ارسال فرم می شود.
- نکته حائز اهمیت، نحوه تنظیم و فراخوانی صحیح این تابع هستش، در هنگام فراخوانی تابع، به یاد داشته باشید که id فرم و فیلد مورد نظر رو داخل علامت '' قرار بدید، در غیر اینصورت تابع به درستی عمل نمیکنه.

فرم html برای ارسال ایمیل:

<form name="form-3" id="form-3" action="#" method="post" onsubmit="return emailValidate('form-3','email');">
<input type="text" name="email" id="email" />
<input type="submit" value="ارسال" />
</form>

در ادامه درباره وجود حروف و اعداد خاص و همچنین تعداد حروف مجاز در هنگام پر کردن هم مطالبی قرار میدم

 

[sky boy]

اعتبار سنجی وجود حروف و اعداد خاص با جاوا اسکریپت

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

<script type="text/javascript">
//<![CDATA[
function checkChar(string){
    validChar='ABCDEF';
    strlen=string.length;
    if(strlen<1){
        alert('لطفا یک عبارت وارد کنید');
        return false;
    }
    string=string.toUpperCase();
    for(i=0;i<strlen;i++){
        if(validChar.indexOf(string.charAt(i))<0){
            alert("تنها کارکترهای A,B,C,D,E,F مجاز هستند");
            return false;
    }
  }
  alert('فرم شما ارسال شد');
  return true;
}
//]]>
</script>

توضیح:
- در تابع بالا ابتدا کاراکترهای مجاز را در متغیر validChar تعریف می کنیم.
- سپس در متغیر strlen با استفاده از خاصیت length، اندازه مقادیر وارد شده در فیلد را بررسی می کنیم، اگر این اندازه کوچکتر از 1 باشد، یعنی کاربر بدون وارد کردن عبارتی در فرم، قصد ارسال آن را دارد و لذا به او پیام هشداری نشان می دهیم.
- در غیر این صورت مقادیر متغیر string که در واقع همان محتوای دریافتی از فیلد فرم در هنگام فراخوانی تابع است را با تابع درونی toUpperCase به حروف بزرگ تبدیل می کنیم (برای جلوگیری از حساس بودن به حروف بزرگ و کوچک).
- بخش پایانی تابع نیز که نقشی کلیدی در عملکرد آن دارد، با یک حلقه for به تعداد اندازه طول رشته ورودی کاربر، تک تک حروف ارسالی را با مقادیر validChar مقایسه می کنیم،
اگر حروف ارسالی در الگوی ما وجود نداشته باشند، پیام هشداری به کاربر نشان داده خواهد شد.
- تطبیق وجود کاراکتر ارسالی با الگوی تعریف شده، با خاصیت indexOf و charAt انجام می شود، indexOf در واقع یک عدد را با توجه به موقعیت ابتدایی یک کاراکتر خاص در رشته ارسالی برمی گرداند، منظور از موقعیت، این است که ببینیم کاراکتر یا عبارت مورد نظر ما، چندمین حرف از رشته ارسالی است (شمارش indexOf از صفر شروع شده و شامل فواصل خالی هم می شود)،
به طور مثال:

<script type="text/javascript">
var string = "welcome to javascript learning.";
var check=string.indexOf("javascript");
document.write(check);
</script>

کد بالا عدد 11 را برمی گرداند، چرا که ما عبارت javascript را جهت بررسی به متغیر check نسبت دادیم؛
با دقت در رشته welcome to javascript learning نتیجه می گیریم که پیش از عبارت javascript با احتساب فواصل خالی و شمارش از صفر، 10 کاراکتر وجود دارد؛
اگر به فرض در رشته ارسالی دو عبارت تحت عنوان javascript باشد، خاصیت indexOf با تطبیق اولین الگو نتیجه را برمی گرداند و به ادامه رشته ترتیب اثر نمی دهد،
اگر هیچ کاراکتری تطبیق داده نشود، indexOf عدد 1- را برمی گرداند.
متد charAt نیز با توجه به عددی که برای مقادیر آن در نظر می گیریم، از ابتدای رشته شمارش را به تعداد مقادیر شروع کرده و کاراکتر انتهایی را به عنوان نتیجه برمی گرداند،
شمارش charAt نیز از صفر شروع شده و شامل فواصل خالی نیز می شود، به فرض مثال زیر حرف j را برمی گرداند:

<script type="text/javascript">
var string = "welcome to javascript learning.";
var check=string.charAt(11);
document.write(check);
</script>

فرم html و فراخوانی تابع:

<form id="form-4" action="#" method="post" onsubmit="return checkChar(document.getElementById('chars').value);">
<input type="text" name="chars" id="chars" />
<input type="submit" value="ارسال" />
</form>

توضیح:
- فراخوانی این تابع کمی متفاوت است، در هنگام فراخوانی باید مقادیر فیلد مورد نظر را نیز به عنوان آرگومان با document.getElementById و value دریافت و ارسال کنیم.

 

[sky boy]

اعتبار سنجی تعداد حروف مجاز در هنگام پر کردن فیلد

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

<script type="text/javascript">
//<![CDATA[
function countChars(usertext, counter, max) {
    var count = max - document.getElementById(usertext).value.length;
    if (count < 0) {
        document.getElementById(counter).innerHTML = "<span style=\"color: red;\">" + count + "</span>"; 
    }
    else {
        document.getElementById(counter).innerHTML = count; 
    }
}
//]]>
</script>

توضیح:
- در این تابع چند خاصیت getElementById، length و innerHTML به کار رفته است.
- با هربار فراخوانی تابع (با رویداد onfocus, onkeyup و onkeydown)، مقادیر فیلد فرضی usertext دریافت شده و طول رشته آن با length سنجیده می شود،
آنگاه اگر آرگومان max که حداکثر سقف مجاز کاراکتر است را از میزان کاراکتر فعلی (که کاربر در فیلد وارد کرده است) کم کنیم و حاصل، کوچکتر از صفر باشد،
نتیجه به رنگ قرمز به کاربر نشان داده می شود (با استفاده از span و style).

فراخوانی تابع و فرم html:

<form id="form-5" action="#" method="post">
<textarea name="usertext" id="usertext" rows="6" cols="50" onfocus="countChars('usertext','char_count',10)" onkeydown="countChars('usertext','char_count',10)" onkeyup="countChars('usertext','char_count',10)">
</textarea>
</form>

توضیح:
- در مثال بالا، در یک فیلد از نوع textarea با سه رویداد onfocus, onkeyup و onkeydown تابع خود را فراخوانی می کنیم،
یعنی هنگامی که کاربر در فیلد کلیک می کند، هنگامی که یک دکمه را فشار می دهد و هنگامی که دکمه را رها می کند.