Jquery kayıt ve yetkilendirme formları. PHP, MySQL ve jQuery kullanarak harika bir kayıt sistemi yapmak. Açılır PHP iletişim formu

5 üzerinden 3,8

İyi günler arkadaşlar!

Bugün alışılmadık bir kayıt-yetkilendirme-şifre hatırlatma formu yapacağız.

jQuery'i ve jQuery'nin animasyon yeteneklerini genişleten jQuery kolaylaştırma eklentisini kullanacağız. Bu eklenti hakkında daha önce yazmıştık. Şimdi gerçek bir örnek kullanacağız.

Not: Bu makale .

Yapmak istediğim şeyin özü şudur. Üç form da: kayıt, yetkilendirme ve şifre hatırlatma sayfadadır. Ama iki tanesi görünmüyor. İlgili sözde bağlantıya tıkladığınızda (herkese Pavel Markovnin'in bağlantılar hakkındaki makalesini okumasını tavsiye ederim), gerekli form görünür.

Genel olarak, bir örneğe bakıyoruz ve her şey netleşecek:

HTML ve CSS

Sayfa kodu şöyle görünecektir:

css'de aşağıdaki satırlar

tarayıcıda aşağıdaki görüntüyü etkinleştirin:

Her loginBlock, hataları göstermek için girişler, düğmeler ve bloklar içerir. Oturum açmaya bir göz atalım:

#error1 bloğu başlangıçta görünmez ve boştur. Alan doğrulaması başarısız olursa, onu hata metniyle doldurur ve gösteririz.

JavaScript

Yaptığımız ilk şey, $(document).ready() üzerinde sözde bağlantılara tıklama işleyicileri asmak. Aynı sonuca götürmesi gereken üç çift bağlantımız var, her çiftin kendi sınıfı var. Ona göre, bağlantıları arayacağız:

$(belge).ready(işlev() (
$("a.remindPass").click(işlev(e) (
e.preventDefault();
Git(2);
});
$("a.signin").click(işlev(e) (
e.preventDefault();
Git(1);
});
$("a.signup").click(işlev(e) (
e.preventDefault();
Git(0);
});
});

GoTo(num) işlevi, #wr öğesini istenen sol girinti değerine geri saracaktır. jQuery kolaylaştırma eklentisinin kullanımı burada açılır:

İşlev Git(sayı) (
kenar boşluğu = sayı * 382;
$("#wr").animate((marginLeft: -margin ),
(süre: 800, kolaylaştırma: "easeInOutBack" ));
}

382px - tüm dolgu ve kenarlıkları dikkate alarak bir .loginBlock "a genişliği.

Her eylem düğmesi için - kayıt, yetkilendirme ve postaya bir şifre gönderme, bir tıklama işleyici işlevi yazacağız. Burada sadece bir örnek vereceğim. Gerisi js dosyasında görülebilir (arşiv bağlantısı makalenin altında olacaktır).

İşlev Kaydı() (
email = $("#email").val();
geçiş = $("#şifre").val();
passAgain = $("#passwordAgain").val();
if (!ValidEmail(email)) (
Hata Göster(0);
}
başka(
if ((pass!="")&&(pass == passAgain)) (
if (!UserWithEmailExists(email)) (
//kullanıcıyı kaydet
HideError()
}
) başka (
Hata Göster(1);
}
}
}

UserWithEmailExists(email) işlevi, sistemde o e-postaya sahip bir kullanıcı olup olmadığını öğrenmek için sunucuya bir istek göndermelidir. Varsa, true, değilse false döndürün.

Şimdi hataları ve hata olmayanları gösterme hakkında konuşalım. Bunun gibi bir şeye benzemeli:

E-posta doğrulama hatası:

Şifre eşleştirme hatası:

Hata:

Her hata için bir kod vardır, her hatanın kendi formu vardır, böylece aşağıdaki sabitler listesine sahip olabilirsiniz:

Var er0 = "Yanlış e-posta formatı"a"; //0
var er1 = "Şifreler uyuşmuyor"; //0
var er2 = "Bu e-postaya sahip kullanıcı" zaten kayıtlı"; //0
var er3 = "Parola eksik. Veya e-posta. Lütfen tekrar deneyin"; //1
var er4 = "Bu e-postaya sahip bir kullanıcımız yok"; //2
var er5 = "Kötü e-posta formatı"a"; //2

Ve hata ekranının kendisi aşağıdaki işlevi uygular:

İşlev HideError() (
$(".error").hide();
}
işlev ShowError(kod) (
HideError();
anahtar (kod) (
durum 0:
$("#error0").html(er0).slideDown();
kırmak;
dava 1:
$("#error0").html(er1).slideDown();
kırmak;
durum 2:
$("#error0").html(er2).slideDown();
kırmak;
durum 3:
$("#hata1").html(er3).slideDown();
kırmak;
durum 4:
$("#error2").html(er4).slideDown();
kırmak;
durum 5:
$("#error2").html(er5).slideDown();
kırmak;
}
}

Hata olmayanların görüntülenmesi de benzer şekilde gerçekleştirilir.

Kayıt ve yetkilendirme formlarını iyileştirmeye yönelik bazı "yenilikçi teknikler" hakkında bilgi sahibi olmanız için Habré'de yayınlanan bazı örnekleri tamamlamaya karar verdik.

Kayıt formlarını basitleştirme

Yani, birkaç numara:

şifre girişini çoğaltmaya gerek yok;

Kullanıcı için hayatı kolaylaştırmak için (bunun neden yapılacağı Google'da iyi gösterilmiştir), bir alan ve "maskeyi" kaldıracak bir onay kutusu yapmak daha iyidir - tüm bunlar küçük bir javascript kodu kullanılarak yapılır.

1. jQuery kitaplığı.

2-7. eleman başlatma.

B. Form için HTML kodu aşağıdaki gibidir:

5-6. bu alanların görünürlüğü komut dosyası tarafından onay kutusu tarafından değiştirilir.

B.init.js

$(document).ready(function()( $("#testpassword1").showPassword(); $("#testpassword").showPassword(".checker", ( text: "Custom checkbox", name: "showmypassword") ")); ));

G.styles.css

Gövde ( font-ailesi: Arial, Helvetica, serif, sans-serif; ) biçim ( kenar boşluğu: 15 piksel 0; dolgu: 15 piksel; arka plan: #ccc; renk: #000; sınır: 1 piksel katı #aaa; genişlik: 500 piksel; ) form etiketi.form ( float: left; genişlik: 120 piksel; ekran: blok; ) form girişi#testşifresi1, form girişi#testşifresi ( kayan nokta: sol; ekran: blok; ) .clear ( temizle: her ikisi; ) div.checker ( temizle : her ikisi; ekran: blok; kenarlık: 1 piksel noktalı #2d2d2d; renk: #2d2d2d; arka plan: şeffaf; genişlik: 230 piksel; yazı tipi boyutu: 0,8em; kenar boşluğu: 20 piksel 0 0 0; )

girilen verilere göre alanları otomatik olarak doldurmak daha iyidir;

Kullanıcının ne kadar az girmesi gerekiyorsa o kadar iyidir. Bazı alanlar, önceden girilmiş olan önceki verilerden başlayarak doldurulabilir. Örneğin, "posta kodu" alanından değeri okuyup işleyerek "şehir" alanını doldurabilirsiniz. Basit bir ajax isteği ve bitirdiniz. Bir posta kodundan şehir ve eyalet verilerini almak için AJAX kullanma.

A. ‹header› içine kitaplıkları dahil ediyoruz:

1. jQuery kitaplığı.
2. Ana komut dosyası.

B. Form için HTML kodu aşağıdaki gibidir:

dizin Şehir Bir ülke

1. Posta kodunun girilmesi gereken alan.

B. zip_city.js:

function fillcitystate(controlname)( var zipcode = trim(controlname.value); // boşlukları kırp if(zipcode.length!=5)( //uzunluğu kontrol et false; ) var zipstring = ""; xmlhttp = new XMLHttpRequest() ; xmlhttp.open("GET", "php/zip_city.php?zip=" + posta kodu, true); //php'ye istek gönder xmlhttp.onreadystatechange=function()( //eğer sonuç alınırsa if (xmlhttp.readyState) = =4)( var zipstring = xmlhttp.responseText; if (zipstring!="Error")( var ziparray = zipstring.split("|"); document.getElementById("txtCity").value = ziparray; //set şehir alanı için değerler document.getElementById("txtCountry").value = ziparray; //Ülke alanı için değerleri ayarla ) ) ) xmlhttp.send(null); ) //Boşluk kırpma işlevi function trim(s) ( var l =0; var r=s.uzunluk -1;while(l< s.length && s[l] == " ") { l++; } while(r >l && s[r] == " ") ( r-=1; ) dönüş s.altdize(l, r+1); )

G.zip_city.php: ajax istek işleyicisi.

Require_once("db.php"); $db_table = "zip_city"; //dönüş değeri için varsayılan ayar $returnval = "Hata"; //GET parametresini al $zipcode = $_GET["zip"]; // if (strlen($zipcode)>5)( $zipcode = substr($zipcode, 0, 5); ) if (strlen($zipcode)!=5)( die ($returnval); ) ön işleme veritabanından değerler $query = "SELECT * FROM ($db_table) WHERE zip="($zipcode)""; $resultval = mysql_query($query) veya die("Sorgu çalıştırılamıyor: Sorgu: ".$query."".mysql_error($conn)); $rowcount = mysql_num_rows($resultval); if ($rowcount==1)( $row = mysql_fetch_array($resultval); $returnval = $row["zip"]."|".ucwords(strtolower($row["city"]))."|" .$row["ülke"];//aslında başarılı bir yanıt oluşumu ) echo $returnval;

D.db.php: veritabanı bağlantı yapılandırması.

//veritabanı bağlantı ayarları $dbhost = "localhost"; $dbusername = "kök"; $dbpass = ""; $db_name = "blog_login"; $conn = mysql_connect($dbhost, $dbusername, $dbpass) veya die("MySQL veritabanı sunucusuna bağlanılamıyor:".mysql_error()); $db = mysql_select_db($db_name, $conn) veya die("Veritabanı açılamıyor:".mysql_error($conn));

F. Veritabanı tablosu oluşturma:

TABLO OLUŞTURMAYIN `zip_city` (`id` int(11) NULL DEĞİL AUTO_INCREMENT, `zip` varchar(5) NULL DEĞİL, `city` varchar(255) NULL DEĞİL, `country` varchar(255) NULL DEĞİL, BİRİNCİL ANAHTAR (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=41921 ;

giriş alanında otomatik değiştirme yapabilirsiniz;

Bazı alanlar sınırlı sayıda giriş değeri gerektirir. Örneğin, bir kullanıcı iki karakter girebilir, bu harflerle başlayan ülkelerin listesini görebilir ve istediğini kolayca seçebilir. Ayrıca vatan adına kesinlikle hata yapmayacaktır. jQuery altında AJAX Otomatik Tamamlama.

A. ‹Başlığa› dahil et:

1. jQuery kitaplığı.
2. jQuery için otomatik tamamlama komut dosyası.
3. Ana komut dosyası.

B. Form için HTML kodu aşağıdaki gibidir:

Bir ülke

1. Ülke adını girmeye başlamanız gereken alan.

B.init.js:

Var seçenekleri, bir; jQuery(function()( options = ( serviceUrl:"./php/autocomplete.php" ); /*işleyici dosya adresini belirtin*/ a = $("#query").autocomplete(seçenekler); /*otomatik tamamlama nesnesini ata id="sorgu"*/ ));

G. otomatik tamamlama.php: ajax istek işleyici

If(isset($_GET["query"]) && (!empty($_GET["query"])))( request_once("db.php"); $db_table = "system_countries"; //veritabanı tablosu adı $ query = $_GET["query"]; //form alanından sorgu $varyantlar = ""; $q = "($db_table)" WHERE "name_en" REGEXP "^($query)(. *)" GROUP BY `name_en`"; /*girilen ilk karakterlere göre arama yapın*/ $res = mysql_query($q) veya die("Sorgu çalıştırılamıyor: Sorgu: ".$q."".mysql_error($conn) ) ); /*sorgu sonucunu al*/ if(mysql_num_rows($res)>0)( while($row = mysql_fetch_row($res))( $variants = """.$row."""; /* dizi seçeneklerini doldur*/) $variants = implode(",",$variants); /*virgülle ayrılmış tüm seçenekleri bir dizgeye doldur*/ /*cevatı oluştur*/ $request = "( sorgu:"". $query."", öneriler:[".$variants."] )"; echo $request; ) )

E. Veritabanı tablosu oluşturma:

VARSA TABLOYU DROP `system_countries`; CREATE TABLE 'system_countries' ('id' int(11) NULL DEĞİL auto_increment, 'name_en' char(128) NULL DEĞİL, 'name_en' char(128) varsayılan NULL, 'code' char(2) NULL DEĞİL, '_order' int(3) varsayılan "0", "bağımsız" tinyint(1) varsayılan "1", BİRİNCİL ANAHTAR ('id')) ENGINE=MyISAM DEFAULT CHARSET=utf8;

G.styles.css:

Otomatik tamamlama-w1 ( arka plan:url(/autocomplete/img/shadow.png) sağ alt tekrar yok; konum:mutlak; üst:0px; sol:0px; kenar boşluğu:8px 0 0 6px; /* IE6 düzeltmesi: */ _background :yok; _margin:0; ) .autocomplete ( border:1px solid #999; background:#FFF; imleç:default; text-align:left; max-height:350px; overflow:auto; kenar boşluğu:-6px 6px 6px - 6px; /* IE6'ya özel: */ _height:350px; _margin:0; _overflow-x:hidden; ) .autocomplete .selected ( background:#F0F0F0; ) .autocomplete div ( padding:2px 5px; white-space:nowrap; ) .autocomplete güçlü ( font-weight:normal; color:#3399FF; )

verileri neden iki kez girelim?

Birçok çevrimiçi mağaza, ödeme ve gönderim adresi alanları olan çok adımlı sipariş formları kullanır. Çoğu zaman anlamları aynıdır. Neden kullanıcıya önceden girilmiş alanların değerlerini tek bir tıklamayla çoğaltmasını önermiyorsunuz? Programlı olarak, teknik basittir ve değerleri tekrar etme olasılığının ima edildiği farklı durumlarda kullanabilirsiniz.

A. ‹Başlığa› dahil et:

1. jQuery kitaplığı.

2.jQuery Seçim Eklentisi

3. ana komut dosyası.

B. Formlar için HTML kodu aşağıdaki gibidir:

Ödeme verileri.

14. Kopyala onay kutusu.

B.init.js:

//sayfa yüklendiğinde $(document).ready(function() ( //onay kutusu etkinleştirildiğinde veya devre dışı bırakıldığında $("#kopyalamaadresi").click(function() ( // etkinse if ($("#) copyaddress") .is(":checked")) ( //her giriş alanı için $("#shipping_fields input", ":visible", document.body).each(function(i) ( //değerleri kopyala ) ödeme alanlarından // uygun teslimat alanlarına $(this).val($("#billing_fields input").eq(i).val()); )); //açılır menülerle çalışmaz, bu yüzden kullanın eklenti işlevleri var bcountry = $( "#bcountry").val(); $("#scountry").selectOptions(bcountry); ) else ( //onay kutusu devre dışıysa //her giriş alanı için $("# shipping_fields input", ":visible", document.body).each(function(i) ( //nakliye veri alanlarını temizle $(this).val(""); )); $("#scountry").selectOptions (""); ) )) ; ));

Anlaşılan insanlar captcha okumaktan bıkmış :)

Ne de olsa, captcha'dan okunamayan karakterleri okumaktan ve sonra bunları girmekten muhtemelen siz de bıktınız. Kullanıcılara merhamet edelim ama aynı zamanda botları da gözden kaçırmayalım. Bunu yapmak için birkaç yönteme başvurabilirsiniz, bunlardan birini düşünün. Honeypot Captcha yaklaşımı - formda kullanıcı tarafından görülemeyen ancak bot tarafından görülebilen bir alan oluşturuyoruz. Bu değeri kontrol ederek, Gerçek Kişiler için zorluk yaratmazken, ihmalkar spam gönderenleri yakalayabileceğiz. Captcha'nın dönüşüm oranı üzerindeki etkisi.

A. Formun HTML kodu aşağıdaki gibidir:

B. aşağıdaki js'yi ekleyin:

İşlev kontrolü() ( if(document.form_find.body.value)( console.log("DİKKAT!!! SAYFADA BOT!!!"); ) )

Oturum açma formlarını basitleştirme

Mecazi anlamda yetkilendirme süreci, bir kişinin siteyi "selamlaması"dır. Orta Çağ'da, nezih evlerde, tekrarlanan selamlar ve reveranslarla selamladılar. Ancak zamana ayak uyduracağız ve bir selamlama için yalnızca bir sıcak el sıkışmanın yeterli olduğundan emin olacağız. Siteye girişi basitleştiriyoruz.

Kullanıcıyı giriş yaptığı sayfada bırakıyoruz;

Aralarından seçim yapabileceğiniz iki seçenek vardır: açılır form ve kalıcı pencere. Açılır form, sayfanın yalnızca küçük bir alanını kaplar ve kullanımı kolay ve hızlıdır.

A. ‹header› içine kitaplıkları dahil ediyoruz:

3. Ana komut dosyası.

B. Form için HTML kodu aşağıdaki gibidir:

Giriş yapmak Şifre Beni hatırla