Jquery Username Control

Demo Ajax Uygulaması

Web sitelerine kayıt olurken;  username girişi sırasında anında kontrol edilmesini, veri tabanında eşleşen bir username olup olmadığını kontrol etmek isteyebiliriz. Bu örneğimizde, username, rumuz, eposta gibi bilgilerin sistemlere kayıt olurken kontrol ve uyarılarını öğreneceğiz. Örneğimizde username tablosundaki rumuz eşleşmesi olup olmadığını kontrol edeceğiz.

İlk olarak index.php kodlarımızdan başlayalım.

</p>
<p>&lt;head&gt;</p>
<p>&lt;meta content=&quot;text/html; charset=iso-8859-9&quot; http-equiv=&quot;Content-Type&quot;&gt;&lt;/meta&gt;</p>
<p>&lt;meta content=&quot;en-us&quot; http-equiv=&quot;Content-Language&quot;&gt;</p>
<p>&lt;title&gt;Ajax username control&lt;/title&gt;</p>
<p>&lt;script src=&quot;js/jquery.js&quot; type=&quot;text/javascript&quot;&gt; &lt;/script&gt;</p>
<p>&lt;script src=&quot;js/settings.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</p>
<p>&lt;script type=&quot;text/javascript&quot;&gt;</p>
<p>pic1 = new Image(16, 16);</p>
<p>pic1.src=&quot;loader.gif&quot;;</p>
<p>$(document).ready(function(){</p>
<p>$(&quot;#username&quot;).change(function() {</p>
<p>var usr = $(&quot;#username&quot;).val();</p>
<p>if(usr.length &gt;= 6) // karekter uzunluğu kontolü yapıyoruz 6 ya eşit veya daha fazla ise</p>
<p>{$(&quot;#status&quot;).html('&lt;img src=&quot;loader.gif&quot; align=&quot;absmiddle&quot; /&gt; Tarama işlemi yapılıyor...');</p>
<p>$.ajax({type: &quot;POST&quot;,  // yolladığımız methodurl: &quot;check.php&quot;,  //kontrol işleminin yapıldığı php dosyamız<br />
data: &quot;username=&quot;+ usr,  //gelen veri<br />
success: function(msg){$(&quot;#status&quot;).ajaxComplete(function(event, request, settings){<br />
if(msg == 'OK'){$(&quot;#username&quot;).removeClass('object_error');</p>
<p>$(&quot;#username&quot;).addClass(&quot;object_ok&quot;);</p>
<p>$(this).html('&lt;img src=&quot;accepted.png&quot; align=&quot;absmiddle&quot;/&gt;</p>
<p>&lt;font color=&quot;Green&quot;;&gt; vvvv &lt;/font&gt;  ');</p>
<p>}else{$(&quot;#usernam&quot;).removeClass('object_ok');</p>
<p>$(&quot;#username&quot;).addClass(&quot;object_error&quot;);</p>
<p>$(this).html(msg);}});}});}else</p>
<p>// 6 karekterden az ise uyarı verdiğimiz bölüm</p>
<p>{$(&quot;#status&quot;).html('&lt;font color=&quot;red&quot;&gt;Kullanıcı adı en az&lt;strong&gt;6&lt;/strong&gt; karekter olmalıdır.&lt;/font&gt;');</p>
<p>$(&quot;#username&quot;).removeClass('object_ok');</p>
<p>$(&quot;#username&quot;).addClass(&quot;object_error&quot;);}});});//--&gt;&lt;/script&gt;</p>
<p>&lt;style type=&quot;text/css&quot;&gt;<br />
body{font-family:&quot;Trebuchet MS&quot;;font-size:12px;}<br />
.inn{float:left;font-size:14px;border:solid 1px #000000;width:143px;font-family:Arial, Helvetica, sans-serif;color:#0066CC;font-weight:bold;</p>
<p>}</p>
<p>&lt;/style&gt;</p>
<p>&lt;/meta&gt;</p>
<p>&lt;/head&gt;</p>
<p>&lt;body&gt;</p>
<p>&lt;div style=&quot;float:left&quot;&gt;</p>
<p>&lt;input id=&quot;username&quot;  type=&quot;text&quot; name=&quot;username&quot; onkeyup=&quot;twitter.updateUrl(this.value)&quot; class=&quot;inn&quot; /&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;div id=&quot;status&quot; style=&quot;float:left&quot;&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;script type=&quot;text/javascript&quot;&gt;</p>
<p>$( function () {twitter.screenNameKeyUp();</p>
<p>$('#user_screen_name').focus();});</p>
<p>&lt;/script&gt;</p>
<p>&lt;/body&gt;</p>
<p>&lt;/html&gt;</p>
<p>

Gelen verilerin kontrol edildiği check.php dosyamız.

</p>
<p>&lt;?php</p>
<p>if(isset($_POST['username'])) // post ile gelen username varsa{$username = $_POST['username']; //$username 'e  post ile gelen username 'i aktardık.require_once(&quot;mysql.php&quot;); // sayfamıza veri tabanı bağlantımızı ekledik.</p>
<p>$sql_check = $kdb-&gt;query(&quot;SELECT * FROM username WHERE rumuz='$username'&quot;); // sql sorgumuz</p>
<p>if($kdb-&gt;num_rows($sql_check)) // eğer eşleşen bir değer varsa yani uyğun değilse no.png'yi ekrana yansıtıyoruz{echo '&lt;img src=&quot;no.png&quot; /&gt;';}else</p>
<p>// uygun ise ok.png yi ekrana yansıtıyoruz</p>
<p>{</p>
<p>echo '&lt;img src=&quot;ok.png&quot;/&gt;';</p>
<p>}</p>
<p>}</p>
<p>?&gt;</p>
<p>

Örnek uygulama görüntüleri;

demo

ajax demo

7 thoughts on “Jquery Username Control

  • vermiş olduğunuz kodda e-posta adresi ve şifre girişi için input parametreleri eksik… bilginize…

  • onu da sen tamamlayabilirsin artık, diğer html form elemanlarını yazmaya gerek yok.

    ajax sisteminin çalışma mantığını kavradıysan, bu yazı işini yapmış demektir 🙂

  • örnek için çok teşekkür ederim. Bu bir sorunla karşılaşıyorum, kullanıcı adını değiştirdiğim halde ilk istediğim kullanıcıyı buluyor ve ikinci yazdığım kullanıcı adını imkansız ekranad basmıyor. sanırım cache ile ilgili bir sorun var, bu konuda öneriniz ne olabilir. tşk ederim

  • merhabalar bende check sayfasının tamamı dönüyor sebebi nedir acaba bu sorunu yaşayan varmı ? not sadece localde denedim wamp ile

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir