parsgreen.com
article

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

javascript-form-validation

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

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


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

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


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

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

اعتبارسنجی فرم با رویداد 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 در تابع بالا در صورتی اجرا می شود که مقادیر فیلدها خالی نباشد، لذا با اجرا شدن این قسمت، پیامی که پیش تر آن را نمایش داده بودیم، محو می شود.

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


قدرت زبان جاوا اسکریپت این اجازه را به ما می دهد که تقریبا هر آنچه را که بخواهیم، در سمت کاربر اعتبار سنجی کنیم، یکی از پرکاربرد ترین این موارد، اعتبار سنجی فرم های مربوط به ایمیل است که معمولا برخی کاربران بیشتر سهوا و کم تر عمدا آنها را به طور صحیح تکمیل نمی کنند، تابع زیر در هنگام ارسال فرم، یک هشدار به چنین کاربرانی نشان می دهد.
<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>
برای دیدن پیش نمایش کد، به انتهای این آموزش مراجعه کنید.

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


روش دیگری برای اعتبار سنجی مقادیر وارد شده توسط کاربر در فیلدها، بررسی وجود حروف و کاراکترهای خاص در آن است، به فرض اگر قرار باشد که در یک فرم تنها از اعداد یا تنها از حروف خاصی استفاده شود، این روش کاربرد خواهد داشت، به مثال زیر توجه کنید.
<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 دریافت و ارسال کنیم.

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


تابع دیگری که در پایان این مطلب قصد بررسی آن را داریم، بسیار ساده اما کاربردی است، در این روش اعتبار سنجی با شروع نوشتن کاربر، تعداد حروف مجاز باقی مانده در قسمتی به او نشان داده می شود، به فرض اگر حداکثر کاراکتر مجاز در یک فیلد، 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 تابع خود را فراخوانی می کنیم، یعنی هنگامی که کاربر در فیلد کلیک می کند، هنگامی که یک دکمه را فشار می دهد و هنگامی که دکمه را رها می کند.

کد و پیش نمایش آنلاین


کد توابع و مثال های بالا و پیش نمایش آنها را می توانید به صورت آنلاین در زیر ملاحظه و بررسی کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | اعتبار سنجی فرم های html با javascript</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
.error{
    display:block;
    height:auto;
    width:auto;
    padding:4px;
    color:#C00;
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!<br />
</noscript>
استفاده از alert و رویداد onsubmit برای نمایش یک پیام هشدار. (بدون پر کردن فیلد زیر، بر روی دکمه ارسال کلیک کنید.)
<br />
<br />
<script type="text/javascript">
<!--
function validateForm(){
var field = document.forms["form-1"]["name-1"].value;
if (field == null || field == ""){
    alert("فیلد نام نباید خالی باشد");
    return false;
  }
}
//-->
</script>
<form name="form-1" action="#" method="post" onsubmit="return validateForm();">
<input type="text" name="name-1" />
<input type="submit" value="ارسال" />
</form>
<hr />
<br />
استفاده از رویداد onblur و innerHTML برای نمایش پیام هشدار. (ابتدا در یک فیلد کلیک کرده و بدون پر کردن آن، در فیلد بعدی کلیک کنید.)
<br />
<br />
<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>
<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>
<hr />
<br />
استفاده از عبارات با قاعده و خاصیت test در جاوا اسکریپت. (یک ایمیل نامعتبر در فیلد زیر وارد کرده و سپس بر روی دکمه ارسال کلیک کنید.)
<br />
<br />
<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>
<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>
<hr />
<br />
استفاده از دو متد کلیدی indexOf و charAt در جاوا اسکریپت. (برای بررسی مثال زیر، یک عبارت با استفاده از حروفی خارج از A,B,C,D,E,F در فیلد مورد نظر وارد کنید.)
<br />
<br />
<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>
<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>
<hr />
<br />
استفاده از length و innerHTML در جاوا اسکریپت. (برای بررسی مثال زیر، عبارتی را در قسمت تعیین شده بنویسید.)
<br />
<br />
<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>
<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>
تعداد حروف مجاز: <span id="char_count">10</span><br />
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
» چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟
» نحوه ایجاد دکمه رفتن به بالای صفحه (go to top) با جاوا اسکریپت
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
» نمایش پیام در بالا یا پائین صفحات وبلاگ و سایت با جاوا اسکریپت
commentنظرات (۱۰۷ یادداشت برای این مطلب ارسال شده است)
نویسنده: mahsa
زمان: ۱۵:۳۰:۲۴ - تاریخ: ۱۳۹۱/۰۵/۲۱
سلام
من یه فرم عضویت دارم که یکی از فیلداش نام کاربری است و میخوام وقتی از حالت فوکوس در میاد چک کنه که این نام کاربری تکراری هست یا نه و در div پیغام خطا را چاپ کند.
پاسخ: 
سلام
انجام این کار با استفاده از کدهای جاوا اسکریپت امکان پذیر نیست، چون اعتبار سنجی در سمت کاربر انجام می شود، باید از آژاکس (ajax) و php برای این منظور استفاده کنید.
لطفا به آموزش های آژاکس مراجعه کنید.
نویسنده: ramezani
زمان: ۱۸:۴۹:۴۴ - تاریخ: ۱۳۹۱/۰۷/۲۶
با عرض سلام و خسته نباشد
من واسه اعتبار سنجی فرم آموزش هاتون رو مطالعه کردم و واقعا در حد بسیار بالا بود
اما واسه اعتبار سنجی این که کاربر اطلاعاتش رو درست وارد کرده یا نه به مشکل خوردم. چون باید با دستورات دیتابیس و php کار کنم. البته این دستورات رو بلدم ولی نمیدونم توی آجاکس چطوری پیاده سازی کنم.
حال از شما درخواست داشتم تا در صورت امکان یک مثال مطرح کنید ؟ ممنون میشم
پاسخ: 
سلام
در آموزش زیر این موضوع به طور کامل مطرح شده است:
اعتبار سنجی همزمان فرم با آژاکس (ajax) و php
اگر باز مشکلی بود عنوان کنید.
زمان: ۱۳:۰۴:۱۴ - تاریخ: ۱۳۹۱/۰۸/۰۱
بسیار عالی بود و بجا
متشکرم
نویسنده: ansherli
زمان: ۲۱:۲۱:۴۷ - تاریخ: ۱۳۹۱/۱۰/۱۹
سلام بازم من اومدم با چند تا سوال :)
اول کدهام رو ببینید
http://uplod.ir/y8hk4yl1sg02/webgoo.zip.htm
سوال 1:
برای پیام خالی نبودن فیلد باید بعد از اینکه میریم روی فیلد بعدی پیغام بده در صورتی برای نام کاربری فقط این طوری هستش و برای پسورد و نام به محض اینکه روی فیلدش کلیک میکنم پیام میده! همچنین من می خوام اگر هر کدوم از این سه گزینه رو کامل نکرد فرم ارسال نشه یا اینکه نتونه گزینه بعدی رو پر کنه.
سوال 2:
کد بررسی معتبر بودن ایمیلم کار نمیکنه! :(
سوال 3:
صفحه d-modir رو من قبلا با آموزش هاتون نوشته بودم به نظرتون لازمه که این قسمت از کد رو توی این صفحه قرار بدم یا فقط توی صفحه modir1.php بررسی بشه ؟
//بررسی معتبر بودن اطلاعات ارسالی کاربر
//نام کاربری
if (!isset($username) || $username == ''){
echo "فیلد نام کاربری نباید خالی باشد!";
$check_error = 1;
}
//کلمه عبور
elseif (!isset($password) || $password == ''){
echo "فیلد کلمه عبور نباید خالی باشد!";
$check_error = 1;
}
//مجاز بودن انتخاب حروف انگلیسی به عنوان نام کاربری
elseif (preg_match('/^[a-zA-Z0-9 _-]+$/', $username) === 0){
echo "نام کاربری دارای کاراکترهای غیر مجاز است!";
$check_error = 1;
}
ممنون میشم مثل همیشه راهنماییم کنید.
پاسخ: 
سلام
در مورد سوال اول:
رویداد onblur زمانی اجرا می شود که کاربر از حالت focus خارج شود (یعنی بعد از کلیک داخل فیلد، در خارج از آن کلیک کند)، در اینجا چون تمام فیلدها در یک تابع و هم زمان بررسی می شوند، فیلدی که خالی باشد خطا برایش نشان داده می شود، پس وقتی فیلد اول پر باشد، خطا برای فیلد دوم نشان داده می شود و اگر فیلد دوم پر باشد خطا برای فیلد سوم و...
اما راه حل مشکل اول این است که برای هر فیلد از یک تابع خاص استفاده کنید تا فیلدها تک تک بررسی شوند، برای عدم ارسال هم در مطلب از تابع validateForm و رویداد onsubmit استفاده کنید (البته برای اجرای چند تابع در یک رویداد پاسخ سوال دوم را مطالعه کنید).
نکته: از کد زیر هم می توانید برای فعال یا غیر فعال کردن فیلدها استفاده کنید.
document.getElementById('id').disabled = true;
اگر مقادیر false باشد، فرم از حالت غیر فعال خارج می شود.
در مورد سوال دوم:
در یک فرم نمی توانید از دو رویداد onsubmit استفاده کنید، اما می توانید در یک رویداد چند تابع را اجرا کنید، به طور مثال:
<form action="d-modir.php" name="f-ertebat" id="f-ertebat" method="post" target="_blank" onsubmit="return confirm('اطلاعات ارسال شود؟') && emailValidate('f-ertebat','email');"  onreset="return confirm('اطلاعات پاک شود؟');" >
علامت && بین توابع فراموش نشود! علامت ; در پایان آخرین تابع!
در مورد سوال آخر هم بستگی به خودتان دارد، مهم این است که اطلاعات قبل از ثبت در دیتابیس، اعتبار سنجی شوند، با این حال به نظر تفکیک کردن کدها از هم روش بهتری در برنامه نویسی است.
نویسنده: ansherli
زمان: ۱۱:۴۴:۲۹ - تاریخ: ۱۳۹۱/۱۰/۲۰
خیلی ممنونم از راهنمایی خوبتون
شرمنده فقط من نتونستم یه قسمت رو درست متوجه بشم
من می خوام علاوه بر اینکه برای سه فیلد اول پیام خالی بودن رو میده (مشکل این قسمتم با راهنمایی شما حل شد) بعد از ارسال در صورت خالی و نامعتبر بودن فرم ارسال نشه. یه چیزی شبیه فرم سایت خودتون.
می خوام یه کادر بالای فرمم قرار بگیره و بگه گزینه های اجباری که 4 تاست (نام کاربری ، پسورد، نام و ایمیل) رو پر کنم در صورت خالی بودن .
http://uplod.ir/u13b238wplux/modir1.zip.htm
پاسخ: 
سلام
با استفاده از بررسی های ساده شرطی با if و else این کار به راحتی امکان پذیر است، پس از اینکه متغیر check_error برابر 1 بود یک پیام به خروجی بدهید (که ظاهرا این کار را انجام داده اید)، اما اگر می خواهید فرم هم به خروجی ارسال شود دو راه وجود دارد:
- کدها را در یک فایل ترکیب کنید و قسمت اعتبارسنجی php بالاتر از فرم باشد.
- فرم را در انتهای پیام (در فایل دوم) به همراه آن به خروجی ارسال کنید.
انتخاب هر کدام بستگی به خودتان دارد.
نویسنده: ansherli
زمان: ۱۴:۵۹:۵۲ - تاریخ: ۱۳۹۱/۱۰/۲۰
خیلی ممنون از راهنمایی های خوب و سریعتون
نویسنده: حسین
زمان: ۱۷:۰۸:۱۹ - تاریخ: ۱۳۹۱/۱۰/۲۳
سلام خسته نباشید مثلا اگه بخوایم برای ثبت شماره موبایل که فقط عدد باشه ، از 11 رقم کمتر و بیشتر نباشه و با 09 شروع بشه باید چیکار کرد ؟ ممنون
پاسخ: 
سلام
تابع زیر این کار را انجام می دهد، متناسب با نیازتان آن را فراخوانی کنید:
<script type="text/javascript">
function CheckPhone(number){
if(number.length != 11) {
alert("شماره شما باید 11 رقم باشد");
return false;
}
else if(isNaN(number) || number.indexOf(" ") != -1){
alert("یک مقدار عددی وارد کنید");
return false;
}
else if((number.charAt(0) + number.charAt(1)) != "09"){
alert("شماره شما باید با 09 شروع شود");
return false;
}
alert("شماره شما: " + number);
return true;
}
</script>
نویسنده: امیر
زمان: ۰۳:۰۹:۱۴ - تاریخ: ۱۳۹۱/۱۲/۲۰
آقا خیلی خیلی دمت گرم اساسی به دردم خورد
نویسنده: ابوالفضل روشن ضمیر
زمان: ۲۲:۲۸:۵۷ - تاریخ: ۱۳۹۲/۰۱/۲۶
سلام
خیلی خیلی دست درد نکنه ..بخدا اینقدر گرفتار این راه بودم که نگو ...واقعا دمت گرم ..خیلی به دردم خورد ..ان شالله که موفق باشی
نویسنده: بانو
زمان: ۱۵:۵۶:۲۴ - تاریخ: ۱۳۹۲/۰۱/۳۱
سلام . وقتی چند تا تابع رو در رویداد onsubmit فرم قرار میدم فقط برا یکی کار میکنه و برای خروجی بقیه تابع ها تاثیری نداره چطور میتونم این مشکل رو رفع کنم؟
پاسخ: 
سلام
برای این کار بین توابع از علامت && استفاده کنید و تنها برای آخرین تابع علامت ; را قرار دهید، مثال:
<form action="index.php" name="form" method="post" onsubmit="func_1(arg) && func_2(arg);">
نویسنده: بانو
زمان: ۱۷:۲۲:۵۸ - تاریخ: ۱۳۹۲/۰۱/۳۱
ممنون از پاسختون
یه سئوال دیگه:
بعد اینکه کاربر فرم رو ارسال کرد برا اینکه به ایمیلش کد فعال سازی ارسال بشه که حساب کاربری اش فعال بشه میشه یه راهنمایی در این رابطه بفرمایید که مراحل این کار چطوریه؟؟
پاسخ: 
توضیح کامل مطلب در این قسمت نمی گنجد، ولی به طور خلاصه و تئوری کار سختی نیست، لازمه اول آشنایی با نحوه ارسال ایمیل در PHP است که آموزش های آن چه در وب و چه در سایت وجود دارد، سپس وقتی کاربر ثبت نام می کند یک کد اختصاصی برای او در دیتابیس ذخیره کنید (این کد اختصاصی بستگی به خود شما دارد، می تواند آی دی کاربر، hash نام کاربری او یا یک رمز رندوم و... باشد)، یک ستون (در دیتابیس) هم به عنوان به فرض حالت فعال یا غیر فعال (پیش فرض) در نظر بگیرید، سپس در ایمیل ارسالی رمز اختصاصی کاربر را در یک لینک به عنوان پارامتر قرار دهید، به طور مثال:
http://www.yoursite.com/register.php?do=active&hash=3kdi8s65ysha0eptic9463hdh
این لینک می تواند به مقصد یک فایل در سرور شما باشد که رمز کاربر را با دیتابیس چک می کند و اگر درست بود وضعیت او را به حالت فعال تغییر می دهد.
نویسنده: بانو
زمان: ۱۰:۰۸:۱۶ - تاریخ: ۱۳۹۲/۰۲/۰۱
واقعا ممنون که به سئوالات جواب میدین
یه سئوال دیگه:
اگه بخوام تو صفحه ارسال اطلاعات کاربر کد امنیتی رو از لحاظ معتبر بودن چک کنم که در صورت نامعتبر بودن فرم ارسال نشه باید چیکار کنم.
پاسخ: 
انجام این کار بسته به نوع اعتبار سنجی و سیستم ایجاد کد امنیتی متفاوت است، به طور مثال در بیشتر موارد این کار در سمت سرور و پس از ارسال فرم انجام می شود، صرفا در سمت کاربر خالی نبودن فیلد امنیتی می تواند بررسی شود، این شیوه معمول است، اما اگر اصرار دارید پیش از ارسال فرم صحیح بودن کد امنیتی را چک کنید، باید در هنگام ارسال با رویداد onclick یک تابع جاوا اسکریپتی را فراخوانی کنید که مقادیر فیلد امنیتی را به سرور و در قالب درخواست آژاکسی (Ajax) ارسال و برآورد سرور (به فرض برای کد صحیح عدد 1 و برای کد نادرست عدد 0) را بررسی کند، اگر موارد مد نظر شما بود، تابع فرم را ارسال می کند، در غیر این صورت تابع false را برمی گرداند و در عین حال به فرض در یک بلاک div یا با دستور alert یک پیغام خطا نیز نشان می دهد.
البته همه موارد گفته شده در حد تئوری است و برای به عمل در آوردن آن نیازمند حداقل تسلط نسبی بر جاوا اسکریپت و آژاکس است.
مثال:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | اعتبارسنجی کد امنیتی پیش از ارسال</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
<script type="text/javascript">
var url = 'captcha.php?code=';
var status = 2;

function getHTTPObject(){
try{
req = new XMLHttpRequest();
}
catch(e){
try{
req = new ActiveXObject("Msxml12.XMLHTTP");
}
catch(e){
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
req = false;
}
}
}
return req;
}
var http = getHTTPObject();

function handleHttpResponse(){
if (http.readyState == 4){
//دریافت پاسخ سرور
status = http.responseText;
//بررسی پاسخ
if(status != 1){
//خطا
alert('کد امنیتی وارد شده صحیح نیست');
document.form.code.value='';
document.form.code.focus();
return false;
}
//ارسال فرم
document.form.submit();
}
}

function CheckCode(value){
//ارسال درخواست به سرور
http.open("GET", url + escape(value), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}

function CheckCaptcha(){
//بررسی خالی نبودن فیلد امنیتی
if(document.form.code.value==''){
alert('لطفا کد امنیتی را وارد کنید');
document.form.code.focus();
return false;
}
//بررسی صحیح بودن کد امنیتی
CheckCode(document.form.code.value);
return false;
}
</script>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است یا پشتیبانی نمی شود!</noscript>
<form action="index.php" method="post" name="form">
<input type="text" name="code" maxlength="4"><br>
<input type="submit" value="ارسال" onclick="return CheckCaptcha();">
</form>
</body>
</html>
نویسنده: بانو
زمان: ۱۲:۲۶:۲۹ - تاریخ: ۱۳۹۲/۰۲/۰۱
واقعا مررررررررررررررررررررررررررررررسی
نویسنده: بانو
زمان: ۲۱:۲۶:۲۹ - تاریخ: ۱۳۹۲/۰۲/۰۴
سلامی دوباره
امکانش هست من کدم رو براتون بفرستم شما این تیکه کد امنیت رو واسم توش قرار بدید. واسه من خطا میده منم چون تازه کارم نتونستم رفعش کنم
پاسخ: 
سلام
تنها رفع ایرادات جزئی و مشکلاتی که نیاز به کدنویسی زیاد ندارند امکان پذیر است (کد را از طریق ایمیلی که در بخش تماس با ما وجود دارد ارسال کنید).
نویسنده: mahdi
زمان: ۱۸:۵۳:۴۹ - تاریخ: ۱۳۹۲/۰۲/۱۰
سلام من کد ajax رو میخوام برای مثال زیر .
میخوام وقتی کاربر یک منو باز شو رو انتخاب کرد منوی بازشوی بعدی فال و با توجه به منوی بازشوی اول بیاد مثلا کمپانی رو bmw قرار داد در لیست بازشوی بعدی مدل های bmw را نمایش دهد و...
پاسخ: 
سلام
معمولا کدی کامل و آماده برای این گونه موارد وجود ندارد، باید بر جاوا اسکریپت تا حدودی مسلط باشید تا بتوانید آن را مطابق نیاز خود بنویسید.
paged صفحه 1 از 8




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

5 × 7
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...