آگهی
article

اعتبار سنجی همزمان فرم با آژاکس (Ajax) و PHP

ajax-php-validation

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

کد آژاکس برای ارسال اطلاعات فرم


قبل از هر چیز باید موتور پایه ی کارمان را برنامه نویسی کنیم، در اینجا کد ما مبتنی بر آژاکس (ajax) و XMLHttpRequest (برای تمام مرورگرها به جزء نسخه های قدیمی اینترنت اکسپلورر) یا ActiveXObject (برای اینترنت اکسپلورر نسخه 7 و ماقبل) خواهد بود، در مجموع ما به کدی نیاز داریم که اطلاعات فیلدهای فرم را دریافت کرده، به سرور ارسال کند و تا هنگام دریافت پاسخ سرور، یک پیام یا تصویر مبنی بر درحال پردازش بودن درخواست نشان و در نهایت نیز پاسخ سرور را در یک بلاک div خروجی دهد؛ از این رو از کد زیر استفاده می کنیم.
<script type="text/javascript">
//<![CDATA[
function AjaxRequest(inputname,divid,inputvalue){
var formvalue = inputname+"="+inputvalue.value;    
var loadingmessage = '<img src="loading.gif" alt="loading" height="16" width="16" />';    
var xmlhttp;
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else{
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState<4){
                document.getElementById(divid).innerHTML=loadingmessage;
                }            
                else if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById(divid).innerHTML=xmlhttp.responseText;
                }
        }
        xmlhttp.open("POST","validate.php",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(formvalue);
}
//]]>
</script>
توضیح:
- تابع اصلی کد، AjaxRequest نام دارد که یک عنوان دلخواه و فرضی است، این تابع از سه آرگومان استفاده می کند که به ترتیب، نام فیلد مورد نظر، آی دی فیلد و مقادیر آن را در خود نگهداری می کنند.
- در متغیر formvalue، مقادیر را برای ارسال از طریق xmlhttp.send آماده می کنیم، به طور مثال اگر inputname برابر usertext باشد و inputvalue برابر 1، مقادیر متغیر formvalue به صورت usertext=1 خواهد بود، به این صورت در سمت سرور می توان به صورت زیر اطلاعات را دریافت کرد.
<?php
$usertext = $_POST['usertext'];
?>
- متغیر loadingmessage برای نمایش یک تصویر، در حالتی که xmlhttp.readyState<4 است استفاده می شود.
- اطلاعات فیلدهای فرم با متد POST به فایل validate.php ارسال می شوند.
- در نهایت نیز پاسخ سرور با innerHTML و responseText در بلاک div خروجی داده می شود.

نحوه استفاده و فراخوانی تابع آژاکسی


برای اینکه موتور آژاکسی ما به کار بیفتد، لازم است که با استفاده از رویدادهای جاوا اسکریپت نظیر onkeyup یا onchange این کار را انجام دهیم، در نمونه زیر از onchange استفاده کرده ایم.
<form action="validate.php" method="post">
اعتبار سنجی عدد بودن مقادیر:<br /><br />
<input type="text" name="usertext" id="usertext" onchange="AjaxRequest('usertext','showresult-1',this);" />
<div class="inline" id="showresult-1"></div><br />
اعتبار سنجی معتبر بودن ایمیل:<br /><br />
<input type="text" name="usermail" id="usermail" onchange="AjaxRequest('usermail','showresult-2',this);" />
<div class="inline" id="showresult-2"></div><br />
اعتبار سنجی معتبر بودن آدرس سایت:<br /><br />
<input type="text" name="usersite" id="usersite" onchange="AjaxRequest('usersite','showresult-3',this);" />
<div class="inline" id="showresult-3"></div><br />
</form>
توضیح:
- اگر دقت کرده باشید، برای هر فیلد، تابع AjaxRequest را با سه آرگومان فراخوانی کرده ایم، آرگومان اول نام فیلد، آرگومان دوم آی دی بلاک div و آرگومان سوم مقادیر فرم را برمی گرداند؛ به این صورت مواد اولیه به تابع داده شده و تابع درخواست را به سرور ارسال می کند، در نهایت پاسخ سرور در آن بلاک div خروجی داده می شود.
- همان طور که گفتیم، در این مثال از رویداد onchange استفاده کرده ایم که بنا به نیاز خود می توانید از سایر رویدادها مانند onkeyup، onblur، onfocus و... نیز استفاده کنید.

کد php برای پردازش اطلاعات ارسالی


با توجه به هدف شما از اعتبار سنجی، برنامه نویسی شما نیز در سمت سرور متفاوت خواهد بود، برای نمونه در مثال زیر، سه فیلد را از لحاظ اینکه مقادیر ارسال شده یک عدد، یک آدرس ایمیل معتبر و یا آدرس یک وبسایت یا وبلاگ باشد، بررسی می کنیم.
<?php
@$usertext = $_POST['usertext'];
@$usermail = $_POST['usermail'];
@$usersite = $_POST['usersite'];

if(isset($usertext) && is_numeric($usertext)){
    echo "<div class=\"result-true\">عبارت وارد شده یک عدد است!</div>";
}
elseif(isset($usertext) && !is_numeric($usertext)){
    echo "<div class=\"result-false\">عبارت وارد شده یک عدد نیست!</div>";    
}

if(isset($usermail) && preg_match("|^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$|i", $usermail) > 0){
    echo "<div class=\"result-true\">ایمیل وارد شده معتبر است!</div>";
}
elseif(isset($usermail) && preg_match("|^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$|i", $usermail) == 0){
    echo "<div class=\"result-false\">ایمیل وارد شده معتبر نیست!</div>";    
}

if(isset($usersite) && preg_match("|^\S+\.\S+.+$|", $usersite) > 0){
    echo "<div class=\"result-true\">آدرس سایت وارد شده معتبر است!</div>";
}
elseif(isset($usersite) && preg_match("|^\S+\.\S+.+$|", $usersite) == 0){
    echo "<div class=\"result-false\">آدرس سایت وارد شده معتبر نیست!</div>";    
}
?>
توضیح:
- متغیر usertext به لحاظ اینکه یک مقدار عددی باشد یا خیر، بررسی می شود، در این بررسی از تابع is_numeric در php استفاده کرده ایم.
- متغیر usermail به لحاظ اینکه یک آدرس ایمیل معتبر باشد، بررسی می شود، در اینجا از تابع preg_match و یک الگو بر اساس عبارات باقاعده یا Regular Expression استفاده کرده ایم.
- متغیر usersite نیز به لحاظ پیروی کردن از الگوی صحیح یک آدرس وب بررسی می شود، در اینجا نیز از تابع preg_match و یک الگو بر اساس عبارات باقاعده یا Regular Expression استفاده کرده ایم.
نکته 1: تابع preg_match با توجه به الگو، رشته ارسالی را بررسی می کند، اگر مقادیر ارسال شده برابر با الگو باشد، مقادیر 1 و در غیر این صورت مقادیر صفر را برمی گرداند.
نکته 2: علامت @ در ابتدای متغیرها برای جلوگیری از نمایش خطاها و نادیده گرفته شدن آنها در php است.

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


در زیر کد نهایی و پیش نمایش آنلاین اعتبار سنجی با آژاکس (ajax) و php را ملاحظه می کنید.
<!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>وبگو | اعتبار سنجی فرم های وب با آژاکس</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.inline{
    display:inline-block;
}
.result-true{
    color:#090;
}
.result-false{
    color:#C00;
}
</style>
<script type="text/javascript">
//<![CDATA[
function AjaxRequest(inputname,divid,inputvalue){
var formvalue = inputname+"="+inputvalue.value;    
var loadingmessage = '<img src="loading.gif" alt="loading" height="16" width="16" />';    
var xmlhttp;
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else{
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState<4){
                document.getElementById(divid).innerHTML=loadingmessage;
                }            
                else if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById(divid).innerHTML=xmlhttp.responseText;
                }
        }
        xmlhttp.open("POST","validate.php",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(formvalue);
}
//]]>
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیرفعال است یا پشتیبانی نمی شود!<br />
</noscript>

<form action="validate.php" method="post">
اعتبار سنجی عدد بودن مقادیر:<br /><br />
<input type="text" name="usertext" id="usertext" onchange="AjaxRequest('usertext','showresult-1',this);" />
<div class="inline" id="showresult-1"></div><br />
اعتبار سنجی معتبر بودن ایمیل:<br /><br />
<input type="text" name="usermail" id="usermail" onchange="AjaxRequest('usermail','showresult-2',this);" />
<div class="inline" id="showresult-2"></div><br />
اعتبار سنجی معتبر بودن آدرس سایت:<br /><br />
<input type="text" name="usersite" id="usersite" onchange="AjaxRequest('usersite','showresult-3',this);" />
<div class="inline" id="showresult-3"></div><br />
</form>
<hr />
پس از تایپ یک عبارت در هر فیلد، در فیلد بعدی کلیک کنید تا رویداد onchange اجرا شود.
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » Ajax
related مطالب بیشتر:
» ارسال اطلاعات فرم با ای جکس (Ajax) و نمایش پیام در حال پردازش
» آموزش نحوه آپلود فایل با PHP و آژاکس (Ajax)
» نمایش نتایج پایگاه داده MySQL با PHP و ای جکس (Ajax)
» لیست داینامیک پیشنهاد کلمات، مبتنی بر ای جکس، PHP و MySQL
» نمایش زنده آمار و اطلاعات با ای جکس (Ajax)
commentنظرات (۳۴ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: علی
زمان: ۱۶:۳۶:۱۴ - تاریخ: ۱۳۹۳/۰۵/۱۵
سلام من فایل فرم و همچنین فایل php رو ایجاد کردم وقتی یه فیلد رو پر کنم و از فیلد بیرون کنم موس رو فقط لودینگ می یاد و اعتبار سنجی صورت نمیگیرد دقیقا همین کدهایی هست که گذاشتین رو منم گذاشتم .
پاسخ: 
سلام
قاعدتا مشکلی وجود دارد! ممکن است ایراد از بخشی از کدها یا روشتان باشد، به فرض عدم اجرای برنامه در لوکال هاست یا یک سرور آنلاین، در هر حال می توانید برای بررسی بیشتر فایل ها را به صورت فشرده به آدرس ایمیل ما (موجود در بخش تماس) ارسال کنید.
نویسنده: امین
زمان: ۱۲:۰۲:۰۶ - تاریخ: ۱۳۹۴/۰۸/۲۰
سلام
اعتبار سنجی برای فیلدهای فارسی چطوره؟
یعنی من میخوام فقط کاراکترهای فارسی و اعداد قبول باشند.
البته برای طرف سرور میخوام.
طرف جاوا اسکریپت رو انجام دادم .
پاسخ: 
سلام
برای این کار باید modifier u را به صورت نمونه زیر استفاده کنید:
<?php
$str_1 = 'متن فارسی و 0 9';
$str_2 = 'متن فارسی و a z';
if(preg_match('/^[0-9آ-ی\s]+$/u', $str_1)){
echo '1: Valid' . '<br>';
}
else{
echo '1: Invalid' . '<br>';
}
if(preg_match('/^[0-9آ-ی\s]+$/u', $str_2)){
echo '2: Valid' . '<br>';
}
else{
echo '2: Invalid' . '<br>';
}
?>
نکته: یونیکد فایل های شما باید از حروف فارسی پشتیبانی کند، به عبارتی باید فایل های خود را به صورت utf-8 ذخیره کنید.
زمان: ۱۳:۵۲:۲۰ - تاریخ: ۱۳۹۴/۱۱/۱۹
ممنون،خیلی وقت بود دنبال این آموزش بودم.
نویسنده: علی
زمان: ۱۷:۵۶:۳۵ - تاریخ: ۱۳۹۵/۰۸/۲۸
سلام. من از این کد استفاده کردم منتهی به جای اجرا شدن درست ، کل کدهای php موجود در فایل validate.php رو جلوی input چاپ میکنه حتی کلمات if و isset و ....
پاسخ: 
فرمت فایلتان php است؟ کدها از نظر syntax مکشلی ندارد؟ این موارد را باید بررسی کنید! حالتی که عنوان می کنید یعنی کدهای PHP اجرا نمی شوند و صرفا به عنوان رشته متنی چاپ می شوند!
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




1 × 2
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form مجید بیگلوئی
در:
با سلام میخوام فایل پیوست بسازم برای اسکریپت وبلاگ از کد زیر استفاده میکنم تا فایل را آپلود و اطلاعات را به دیتابیس ارسال...
۱۰:۰۲:۵۸ ۱۳۹۸/۱۲/۰۶

form پیمان نقی پور
در:
سلام میخواستم بدونم فیلتر نویسی بورس هم با همین زبان جاوا انجام میشه؟ چطور میشه شرطی تعیین کرد تا نتیجه فیلتر در هنگام...
۱۸:۲۱:۳۲ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، css رو تسلط کامل دارم تا حدودیش هم به لطف شما و جاوا اسکریپت هم چند روزی میشه شروع کردم به آموزش...
۱۵:۴۸:۳۳ ۱۳۹۸/۱۲/۰۵

form amin
در:
با سلام آدرس مطالب سایت وبگو بعد از ای دی پست عنوان فارسی هست ولی زمانی که به سورس کد پست نگاه میکنیم قسمت فارسی...
۱۴:۵۹:۴۴ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، لینک آموزش مقدماتی جاوا اسکریپت توی منوی بالایی خرابه ، به وظیفه شهروندیم عمل کردم :)
۱۵:۰۹:۰۰ ۱۳۹۸/۱۲/۰۴

form aseman
در:
با سلام . میخوام هر وقت توی تکس باکسم عدد 1 وارد شد در خروجی تگ p معادل حروفی یک رو بهم بده. مثلا:...
۱۴:۴۵:۲۹ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد ، گذاشتمش توی این وبلاگ رمزش هم ******* هستش ، واقعیت فهمیدم که میشه درستش کرد ولی چجوریشو نفهمیدم :) خیلی ممنون...
۱۳:۲۰:۱۴ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد، وبلاگ ندارم، اینا رو برای یادگیری و یه هدف دیگه دارم سوال میکنم، مطالب مرتبط رو پیدا کردم راهشو، فقط قسمت ارسال نظر...
۲۰:۱۵:۰۲ ۱۳۹۸/۱۲/۰۳

form نیما
در:
سلام. من میخوام با استفاده از یک input مقدار عددی رو از کاربر دریافت کنم و بعد از ضرب در عددی خاص که خودم تعیین...
۱۸:۰۷:۰۴ ۱۳۹۸/۱۲/۰۳

form وحید
در:
سلام وقت بخیر حدود شش ماه هست با فیلتر شکن کار میکنم به اسم Lightvpn. یک روز هست این خطا رو میده و...
۱۸:۰۰:۰۶ ۱۳۹۸/۱۲/۰۳

form mahdi
در:
سلام ، استاد شرمنده یه سوال دیگه هم داشتم مثل قبلی ، مطالب مرتبط که انتهای هر پست میاد رو چطوری با جاوا اسکریپت توی...
۲۳:۴۶:۲۳ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد عزیز ، توی لوکس بلاگ میشه چیزی مثل پست های شاخص که توی وردپرس هست با جاوا اسکریپت درست کنیم که مثلا داخل...
۲۳:۱۴:۴۰ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد ، بخش نظرات قالب لوکس بلاگ یعنی طرح کل صفحش رو چطوری دسترسی داشته باشیم که خودمون بتونیم طراحیش کنیم ؟ منظورم اینه...
۱۸:۱۱:۳۳ ۱۳۹۸/۱۲/۰۱

form علیرضا سهیلی
در:
سلام من وقتی میخوام شارژ بزنم این کد واسم میاد معنیش یعنی چی
۱۴:۳۳:۱۴ ۱۳۹۸/۱۲/۰۱

form mahdi
در:
سلام استاد ، فهمیدم چطوریه نیازی به پاسخ نیست، چقدرم ساده بود :) مرسی
۰۹:۴۸:۴۹ ۱۳۹۸/۱۱/۳۰
آگهی