تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


اعتبار سنجی همزمان فرم با آژاکس (ajax) و php
استفاده از آژاکس (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>
<!-- http://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>


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, فیسبوک, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین