Nwahy Articles V3 pro

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

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

القسم php - الزيارات 10762 - التاريخ 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 &quot;traidnt&quot;, &quot;egypt-it&quot; ,&quot;ayman&quot; </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

وبالتوفيق
مشاركة الموضوع

كن أول من يقيم الموضوع
12345

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