Nwahy Articles V3 pro

التحقق من اسم المستخدم باستخدام الاجاكس

التحقق من اسم المستخدم باستخدام الاجاكس

القسم php - الزيارات 10665 - التاريخ 15/7/2008 - الكاتب Egypt-IT.com
ان شاء الله فى الدرس دا
هنعمل سكربت بسيط يقوم بالتحقق من user name متاح للتسجيل او غير متاح باستخدام الاجاكس
اولا كود html

<div align='center' > User Name : <input name="username" type="text" id="username" value="" maxlength="15" />
<span id="msgbox" style="display:none"></span> </div>



فى السطر الاول عملنا مربع نص اسمة username والقيمة بتاعتة فارغة لاننا فى المربع هنكتب الاسم المراد التاكد من صلاحيتة
فى السطر التانى استخدمنا العنصر المحياد span ولة id=msgbox لعمل تاثير باستخدام الاجاكس
وبين تاجى <head> <head/>
هنكتب جملة الاتصال بمكتبة الاجاكس

<script src="jquery.js" type="text/javascript" language="javascript"></script>


والوقتى هنعمل خاصية focus out من مربع النص هنقوم باستدعاء الملفuser_availability.php
واستخدام الاجاكس فى اظهار الرسالة وذلك باستخدام كودا javascript التالى

<script language="javascript">

$(document).ready(function()
{
$("#username").blur(function()
{

$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
// التحقق من اسم المستخدم باستخدام الاجاكس
$.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
{
if(data=='no') //فى حالة اليوزر غير متاح
{
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html('اسم المستخدم غير متاح').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html('اسم المستخدم متاح للتسجيل').addClass('messageboxok').fadeTo(900,1);
});
}

});

});
});
</script>


والان مع ملف index.php مع بعض لمسات ال css البسيطة

<html>
<head>
<title>التحقق من اسم التسجيل بالاجكس</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script language="javascript">

$(document).ready(function()
{
$("#username").blur(function()
{

$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
// التحقق من اسم المستخدم باستخدام الاجاكس
$.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
{
if(data=='no') //فى حالة اليوزر غير متاح
{
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html('اسم المستخدم غير متاح').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html('اسم المستخدم متاح للتسجيل').addClass('messageboxok').fadeTo(900,1);
});
}

});

});
});
</script>

<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
}
.messagebox{
position:absolute;
width:100px;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;

}
.messageboxerror{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
}

</style>
</head>
<body>


<br>
<br>
<div align="center">
<div class="top" > التحقق من user name بالستخدام الاجاكس - <strong>username "traidnt", "egypt-it" ,"ayman" </strong><br>
من فضلك حرك مؤشر الماوس خارج المربع للتحقق من الاسم
</div>
<div >
user name : <input name="username" type="text" id="username" value="" maxlength="15" />
<span id="msgbox" style="display:none"></span>
</div>

</div>
</body>
</html>


_____________________________

ملف user_availability.php
فى هذا الملف يتم التاكد من الاسم المدخل فى مربع النص موجود ومتاح للتسجيل ام لا


<?php
//هذا المتغير يحتوى على مصفوفة باسماء المستخدمين الغير متاحين
$existing_users=array('traidnt','egypt-it','ayman'); 
$user_name=$_POST['user_name'];
//فحص الاسماء والتاكد من خلوها من المصفوفة السابقة
if (in_array($user_name$existing_users))
{
    
//اسم المستخدم غير متاح للتسجيل
    
echo "no";

else
{
    
//اسم المستخدم متاخ للتسجيل
    
echo "yes";
}
?>


فى السطر الثالث قمنا بعمل مصفوفة تحتوى على الاسماء الغير متاحىة للتسجيل
لتجربة الاسكربت اضغط هنا
الاسكربت مرفق كامل
http://www.traidnt.net/vb/attachment.php?attachmentid=269113&d=1215191998

وبالتوفيق
Facebook Twitter Google+ Pinterest Reddit StumbleUpon Linkedin Tumblr Google Bookmarks Email

أضف تعليقك على الموضوع