التحقق من اسم المستخدم - Live Username Availability Checking using jQuery Ajax

المكتبة العربية لتطبيقات الأجاكس » تطبيقات الجي كويري

التحقق من اسم المستخدم - Live Username Availability Checking using jQuery Ajax

قاسمي محمد - بتاريخ : 12 جويلية 2010

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

نتناول في موضوعنا اليوم لفكرة التحقق من اسم المستخدم هل هو متاح لتسجيل أم لا طبعا بنكهة الجي كواري
Live Username Availability Checking using jQuery Ajax and PHP
و كالعادة خلينا نشوف مثال حي للعملية و ايضا رابط تحميل ملفات التطبيق

مشاهدة المثال

تحميل الملفات

بعد تحميلنا لملفات التطبيق و تصفح الملف demo.php نجد اننا كالعادة استدعينا ملف المكتبة في الاول بهذا الكود

كود java script

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

و بعدها اضفنا الدالة المسؤولة عن جلب نتيجة عملية التفحص و كودها :

كود java script

01<script type="text/javascript">
02function check_username(){
03    var username = $("#username").val();
04    if(username.length > 3){
05        $.post("check_username_availablity.php", {
06          username: $('#username').val(),
07       }, function(response){
08          $('#Info').fadeOut();
09          $("#Info").fadeIn(1500).html("<img src='loader.gif'/>");
10          setTimeout("finishAjax('Info', '" escape(response) "')", 450);
11       });
12       return false;
13    }
14}
15function finishAjax(id, response){
16  $('#' id).html(unescape(response));
17  $('#' id).fadeIn(1000);
18}
19</script>

و اهما ما فيها :
1-

كود java script

`1`	`username = $("#username").val();`

حيث ان username هو المتغير الذي يحمل القيمة التي نريد تنفيذ العملية عليها
و #username هو الاي دي الذي راح يجلب تلك القيمة من حقل الادخال
2-

كود java script

`1`	`username.length > 3`

هي عدد الحروف الادنى لكي تنفذ العملية و في حالتنا العدد الادنى هو 3 حروف - ان كان اقل من ذالك لن تنفذ العملية .
3-

كود java script

`1`	`check_username_availablity.php`

صفحة تنفيذ كود التفحص
4-

كود xhtml

1 #Info

الديف - المنطقة التي تظهر فيها النتائج
و بعدها اضفنا بعض اللمسات التنسيقية للمظهر عبر الانماط الانسيابية - css - و تحديدا :

كود css

01<style>
02BODY {
03    FONT-SIZE: 13px;
04    COLOR: #003399;
05    FONT-FAMILY: Tahoma, Helvetica, Arial, sans-serif;
06}
07A {
08    COLOR: #003399; TEXT-DECORATION: none;
09    text-align: right;
10}
11.box {
12
13    margin: 2px 0px 2px 0px;
14    padding: 5px;
15    border: 1px solid #87CEFA;
16    width: 500px;
17}
18#customForm input{
19    width: 220px;
20    padding: 3px;
21    float:right;
22    margin-bottom:0px;
23    height:20px;
24    color: #000000;
25    font-size: 12px;
26    border: 1px solid #cecece;
27    text-align: center;
28}
29#customForm div{
30    margin-left: 10px;
31    font-size: 11px;
32    float:right;
33}
34#customForm div span{
35    margin-left: 10px;
36    color: #000000;
37    font-size: 11px;
38    float:right;
39}
40</style>

و بعدها اصنا لحقل النص الاي دي الخاص بالعملية و اضفنا الحدث onBlur : اي عندما يضغط خارج الحقل يتم تنفيذ العملية - بالمجمل كود حقل الادخال هو

كود xhtml

`1`	`<input id="username" name="username" type="text" value="" onblur="return check_username();" /`

و كود الفورم كامل :

كود xhtml

1<form  action="#" name="customForm" id="customForm" method="post" enctype="multipart/form-data">
2<div class="box">
3<h4 style="text-align: right">admin و root : الأسماء اغير متوفرة هي  </h4>
4<div>
5<input  id="username" name="username" type="text" value="" onblur="return check_username();" />
6<div id="Info"></div>
7</div>
8</div>
9</form>

خلاصة كود الصفحة هو :

كود xhtml

01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05<title>Demo: Live Username Availability Checking using jQuery Ajax and PHP</title>
06<script type="text/javascript" src="jquery.js"></script>
07<script type="text/javascript">
08function check_username(){
09    var username = $("#username").val();
10    if(username.length > 3){
11        $.post("check_username_availablity.php", {
12          username: $('#username').val(),
13       }, function(response){
14          $('#Info').fadeOut();
15          $("#Info").fadeIn(1500).html("<img src='loader.gif'/>");
16          setTimeout("finishAjax('Info', '" escape(response) "')", 450);
17       });
18       return false;
19    }
20}
21function finishAjax(id, response){
22  $('#' id).html(unescape(response));
23  $('#' id).fadeIn(1000);
24}
25</script>
26<style>
27BODY {
28    FONT-SIZE: 13px;
29    COLOR: #003399;
30    FONT-FAMILY: Tahoma, Helvetica, Arial, sans-serif;
31}
32A {
33    COLOR: #003399; TEXT-DECORATION: none;
34    text-align: right;
35}
36.box {
37
38    margin: 2px 0px 2px 0px;
39    padding: 5px;
40    border: 1px solid #87CEFA;
41    width: 500px;
42}
43#customForm input{
44    width: 220px;
45    padding: 3px;
46    float:right;
47    margin-bottom:0px;
48    height:20px;
49    color: #000000;
50    font-size: 12px;
51    border: 1px solid #cecece;
52    text-align: center;
53}
54#customForm div{
55    margin-left: 10px;
56    font-size: 11px;
57    float:right;
58}
59#customForm div span{
60    margin-left: 10px;
61    color: #000000;
62    font-size: 11px;
63    float:right;
64}
65</style>
66</head>
67<body >
68<form  action="#" name="customForm" id="customForm" method="post" enctype="multipart/form-data">
69<div class="box">
70<h4 style="text-align: right">admin و root : الأسماء اغير متوفرة هي  </h4>
71<div>
72<input  id="username" name="username" type="text" value="" onblur="return check_username();" />
73<div id="Info"></div>
74</div>
75</div>
76</form>
77</body>
78</html>

و الان نمر لصفحة تنفيذ كود التفحص و هي check_username_availablity.php و محتواها :

كود php

01if($_REQUEST)
02{
03    $username   = $_REQUEST['username'];
04
05    if($username =="admin" OR $username =="root") // not available
06    {
07       echo '<div >غير متوفر <img src="no.jpg" alt="" /></div>';
08    }
09    else
10    {
11       echo '<div >متوفر <img src="yes.jpg" alt="" /></div>';
12    }
13
14}

في اولها تاكدنا من انه حدث ارسال لصفحة بهذا السطر :

كود php

`1`	`if($_REQUEST)`

و بعدها عملنا شرط انه ان كانت قيمة المتغير $username مساوية للاسماء المحجوزة سلفا يظهر رسالة خطأ و هي

كود php

`1`	`echo` `'<div >غير متوفر <img src="no.jpg" alt="" /></div>';`

مع اضافة صورة تجميلية عبارة عن علامة خطأ
و ان كانت قيمة ذالك المتغير غير مساوية لتلك الاسماء المحجوزة يظهر رسالة صح شبيهة لسابقتها :

كود php

`1`	`echo` `'<div >متوفر <img src="yes.jpg" alt="" /></div>';`

اجمالا الكود كامل :

كود php

01if($_REQUEST)
02{
03    $username   = $_REQUEST['username'];
04
05    if($username =="admin" OR $username =="root") // not available
06    {
07       echo '<div >غير متوفر <img src="no.jpg" alt="" /></div>';
08    }
09    else
10    {
11       echo '<div >متوفر <img src="yes.jpg" alt="" /></div>';
12    }
13
14}

مع ملاحظة اننا لم نتعامل مع قواعد بيانات مع ان الفرق من حيث المبدأ نفسه
الى هنا نكون قد طبقنا الفكرة الاساسية لهذه العملية - ملتقانا في درس جديد باذن الله
و السلام عليكم و رحمة الله و بركاته

أضف تعليقك

ساكو ماكو

بحث هذه المدونة الإلكترونية

التحقق من اسم المستخدم - Live Username Availability Checking using jQuery Ajax

التحقق من اسم المستخدم - Live Username Availability Checking using jQuery Ajax

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

تعليم النوتة الموسيقية | شرح طريقة كتابة المازورة وعلامات التحويل

نسخ مقاطع اليوتوب

جمل 100 حكمة 1