Validacija polja na strani klijenta nešto je što svaki obrazac treba imati, u to nema sumnje. Prvo, korisnik ne mora čekati i trošiti živce. Drugo, pokazujete da vam je stalo do vaših posjetitelja. Vrlo je lijepo da posjetitelj unaprijed zna što je pogriješio.
U ovom vodiču naučit ćemo kako napisati jQuery provjeru valjanosti obrasca u stvarnom vremenu. Ako želite vidjeti što možete smisliti, možete kliknuti DEMO i pogledati.
Što ćemo danas naučiti?
Kako implementiramo jquery provjeru valjanosti? Postoji mnogo načina da se to postigne, a evo najčešćih:
Možemo kreirati SPAN oznaku (koja će sadržavati validacijske informacije) pored polja za unos, i dati joj određeni ID preko kojeg ćemo joj pristupiti.
Svako polje možemo zamotati u oznaku P, unutar koje stvaramo SPAN koji će sadržavati informacije o validaciji polja.
Također možete omotati P polje s oznakom, unutar koje možete "naučiti" SPAN (u hodu koristeći jquery).
Sve će ovo uspjeti, ali neće najbolji način implementacija. Zašto? Jer ima previše dodatnog HTML koda u obrascu za unos koji nam ne treba. Mora se promatrati.
Napravit ćemo to onako kako sam ja napravio za sebe. Po meni je to najispravnije rješenje, iako to nitko ne radi. Iskreno, nisam vidio da netko drugi ovo radi... ako znate, napišite mi komentar na kraju lekcije.
Što ćemo učiniti? pisat ćemo jednostavna forma, lijepo i čisto semantički kod, bez nepotrebnih oznaka.
Budući da ljudi ispunjavaju svako polje zasebno, možemo ga pratiti i potvrditi u hodu: - Odredite njegovu poziciju u prozoru (gornji lijevi kut)
- Odredite njegovu širinu
- Tako ćemo znati gdje mu je kraj.
- Dodajmo informacije o potvrdi u DIV blok s određenim ID-om, s desne strane određenog polja. Također ćemo dodijeliti odgovarajuće klase .točno ili .netočno.
Napomena: ovo je također prihvatljivo za ljude koji ne koriste JavaScript u svom pregledniku. Oni će biti potvrđeni na strani poslužitelja.
Struktura projekta Morat ćemo izraditi tri datoteke:
index.html
stil.css
potvrditi.js
Gledat ćemo sve korak po korak... prvo HTML kod, zatim potrebno CSS stilovi, kasnije ćemo se usredotočiti na glavnu skriptu za provjeru valjanosti obrasca jQuery.
Pisanje HTML-a Razbijmo sve...
Korak 1 - kreirajte osnovni HTML kodirati Za početak izradite datoteku index.html i u nju zalijepite ovaj osnovni kod. Možete vidjeti da u nastavku uključujemo jQuery datoteku, prije validation.js, koja sadrži našu skriptu za provjeru valjanosti.
Korak 2 - napravite oblik podijeljen na tri dijela Napravit ćemo trodijelni obrazac da vidimo kako potvrditi različita polja za unos i kontrolnike. Za podjelu koristimo FIELDSET i LABEL, za naslove svakog odjeljka:
Osobni podaci (korisničko ime, datum rođenja, spol, vozilo).
E-pošta (polje za unos e-pošte korisnika).
O meni ( kratka informacija o korisniku). Provjera valjanosti obrasca u stvarnom vremenu pomoću jQueryja Osobni podaci E-pošta o vama Korak 3 - dodajte polja i potvrdite gumb Sjajno, sada kreirajmo neka polja za unos za naš obrazac. Za našu lekciju posebno smo odabrali nekoliko različitih polja:
- Tri polja za unos(korisničko ime, datum rođenja, email adresa).
- RADIO tipke za odabir spola.
- POTVRDIČKI OKVIR za Vozilo korisnik.
- TEXTAREA za korisničke informacije.
- GUMB za gumb "Potvrdi".
Zamotat ćemo svaku OZNAKU i polje za unos u oznaku P kako bismo ih odvojili u zasebne blokove. Sada tvoj konačna datoteka index.html će izgledati ovako:
Provjera obrasca u stvarnom vremenu pomoću jQuery osobnih podataka
Puno ime:
Dan rođenja (dd-mm-gggg):
Ja sam: Muškarac Žena
Posjedujem: auto avion bicikl brod
E-mail E-pošta ( [e-mail zaštićen]):
O tebi Recite nam nešto o sebi:
podnijeti
Ovo može izgledati pomalo zastrašujuće, ali to je zato što u našem obrascu postoji mnogo polja za unos. Zapravo, ovdje nema ništa komplicirano. Spremite svoju datoteku i pogledajte u pregledniku da vidite što se događa. Ajmo sad malo ukrasiti...
Dodavanje CSS-a Budući da CSS stil nije glavna tema današnjeg tutorijala, nećemo se zadržavati na njemu. Samo nam treba ovaj CSS kod da forma izgleda lijepo i da svi blokovi budu na mjestu.
Napravite datoteku style.css i u nju zalijepite donji kod. Sada obrazac s budućom jquery validacijom izgleda nevjerojatno. Nije li?
Tijelo (pozadina: #efefef; margina: 0; ispuna: 0; granica: ništa; poravnanje teksta: središte; font: normalno 13px Georgia, "Times New Roman", Times, serif; boja: #222; ) #sadržaj ( širina: 500px; margina: 0 auto; margin-bottom: 25px; padding: 0; text-align: left; ) fieldset ( margin-top: 25px; padding: 15px; border: 1px solid #d1d1d1; -webkit-border- radius: 7px; -moz-border-radius: 7px; border-radius: 7px; ) legenda skupa polja ( font: normal 30px Verdana, Arial, Helvetica, sans-serif; text-shadow: 0 1px 1px #fff; razmak između slova : -1px; boja: #273953; ) unos, textarea ( padding: 3px; ) label ( cursor: pointer; ) .block ( display: block; ) small ( letter-spacing: 1px; font-size: 11px; font- stil: kurziv; boja: #9e9e9e; ) .info (text-align: lijevo; padding: 5px; font-size: 11px; color: #fff; position: absolute; display: none; -webkit-border-radius: 5px ; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: -1px 1px 2px #a9a9a9; -moz-box-shadow: -1px 1px 2px #a9a9a9; okvir-sjena: -1px 1px 2px #a9a9a9; ) .greška ( pozadina: #f60000; obrub: 3px solid #d50000; ) .correct ( pozadina: #56d800; obrub: 3px solid #008000; ) .wrong (font-weight: bold; color: #e90000; ) .normal (težina fonta: normalna; boja: #222;) #pošalji (pozadina: #3f5a81; širina: 100%; obrub: 5px solid #0F1620; font: podebljano 30px Verdana, sans-serif; boja: #fafafa; tekst- sjena: 1px 1px 1px #0F1620; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; ) #send:hover (background: #4d76b1; border: 5px solid #253750; boja: #fff; ) #send:active ( text-indent: -10px; )
Pisanje validacije jQuery obrasca Ovo je najzanimljiviji i najuzbudljiviji dio lekcije. Ali prvo moramo razmisliti i opisati glavne točke našeg rada. Treba sve isplanirati.
Planiraju Prije nego što pišemo, postavite si tri pitanja:
Što nam treba od ove skripte?
Kako to želimo učiniti?
Kako ćemo to postići?
Ovo je jasno, želimo da skripta potvrdi obrazac. Ali kako? Želimo da to radi u stvarnom vremenu (kada korisnik završi s ispunjavanjem polja za unos) i kada se klikne gumb "Potvrdi". Stoga ćemo morati napisati nekoliko funkcija: posebno za svako polje za unos i za sve forme (koje će biti pozvane kada se klikne na gumb "Potvrdi").
Kako bismo spriječili ponavljanje koda, morat ćemo stvoriti JavaScript objekt za ovo.
Što nam treba za ovo? JS objekt u našem slučaju će se zvati jVal, sadržavat će sljedeće metode:
- jVal.puno ime
- jVal.datum rođenja
- jVal.spol
- jVal.vozilo
- jVal.e-pošta
- jVal.o
Varijabla koja će sadržavati status trenutna greška- jVal.greške. I metoda koja provjerava postoje li greške i potvrđuje slanje obrasca ili ga odbija. Ukoliko se pronađu greške, upućuje korisnika na početak obrasca, gdje može ispravno ispuniti sva polja.
Metoda se zove - jVal.sendIt
Sada možemo početi s razvojem jQuery skripta provjera valjanosti obrasca. Kad napišemo prvu metodu, sve će ići lakše i brže.
Počnimo s radom Osnova koda je jednostavna, apsolutno sav jquery kod bit će sadržan unutar ove sintakse:
$(dokument).spreman(funkcija())( jVal = ( ); ));
Validacija polja korisničkog imena Naša prva metoda će obraditi polje "korisničko ime". Zalijepite ga unutar jVal objekta, kao što je prikazano u primjeru:
Var jVal = ( "fullName" : function() ( ) );
Sada napišimo nekoliko redaka koda unutar metode. Samo ih zalijepite i pogledat ćemo što to znači sljedeće:
$("tijelo").dodaj(""); var nameInfo = $("#nameInfo"); var ele = $("#puno ime"); var pos = ele.offset();
Redak 1: Dokumentu dodajemo DIV blok. Informacije o klasi, daju određeni stil bloku, koji je definiran u datoteci style.css, također ga čini nevidljivim koristeći display:none; Nađi ID, ovo je red da imaš brz pristup u ovaj blok i njime manipulirajte koristeći jQuery. Ovaj DIV blok sadržavat će podatke o potvrdi valjanosti polja.
Linija 3: Zapisujemo poziv ovom bloku u varijabli, jer ćemo je koristiti veliki broj jednom.
Redak 4: Baš kao u prethodnom slučaju, bilježimo vezu s poljem punog imena u varijabli. Također ćemo ga koristiti mnogo puta.
Funkcija jQuery offset() vraća trenutni položaj elementa u odnosu na dokument. Vraća se kao objekt koji sadrži gornja i lijeva svojstva. Ovu funkciju koristimo na ele za određivanje položaja polja za unos.
Dodajmo sada još nekoliko redaka...
NameInfo.css(( gore: pos.top-3, lijevo: pos.left+ele.width()+15 ));
Kao što vidite, počinjemo raditi sa stilovima nameInfo bloka. Točnije, postavljamo njegov položaj desno od polja za unos. Da bismo to učinili, pomaknemo ga 3 piksela prema gore (2. red koda) i pomaknemo ga 15 piksela desno od polja (3. red koda).
Napisali smo 50% prve metode, dovest ćemo je do kraja. Vrijeme je da se utvrdi koliko je korisnik ispravno unio podatke i da se nešto poduzme...
If(ele.val().length< 6) {
jVal.errors = true;
nameInfo.removeClass("correct").addClass("error").html("← at least 6 characters").show();
ele.removeClass("normal").addClass("wrong");
} else {
nameInfo.removeClass("error").addClass("correct").html("√").show();
ele.removeClass("wrong").addClass("normal");
}
Ne izgleda dobro? Nema se čega bojati...
Redak 1: Provjeravamo da ime koje je unio korisnik nije manje od 6 znakova.
Redak 2: Postavite varijablu jVal.errors na true jer smo utvrdili da je korisničko ime prekratko. Ovo ćemo dalje koristiti.
Linija 3: Počinjemo raditi s našim nameInfo elementom (u kojem prikazujemo informacije). Prvo uklanjamo klasu ispravna i dodjeljujemo pogrešku klase. Zatim u element nameInfo ubacujemo sadržaj, to je informacija da ime mora biti duže od 6 znakova. I konačno, našu poruku činimo vidljivom korisniku.
Redak 4: Počinjemo manipulirati našim ele elementom (obrazac za unos korisničkog imena). Uklanjamo normalnu klasu i dodjeljujemo je pogrešnoj.
Redak 5: Ako je korisničko ime dovoljno dugo, onda...
Redak 6: Počinjemo manipulirati elementom nameInfo. Ako je dodijeljena pogreška klase, uklanjamo je i dodjeljujemo klasu ispravnu. Ubacimo "pticu" unutra da shvatimo da je sve u redu. I prikazati poruku za korisnika.
Redak 7: Radimo s elementom ele. Uklanjamo pogrešnu klasu, ako je primijenjena, i primjenjujemo normalnu klasu.
Stvorili smo našu prvu metodu provjere valjanosti! Vrijeme je da ga testirate. Moramo biti sigurni da će naša metoda biti pozvana kada korisnik završi s unosom svog imena. Da bismo ovo implementirali, akciji moramo pridružiti događaj. Koristit ćemo funkciju change(). Zalijepite primjer koda ispod, ispod jVal objekta:
$("#puno ime").change(jVal.puno ime);
Što ovo znači na ljudski jezik: Ako korisnik promijeni vrijednost polja "Puno ime" i završi s tim, poziva se metoda punog imena koja potvrđuje polje.
Vaša validate.js datoteka sada bi trebala sadržavati sljedeći kod:
< 6) {
jVal.errors = true;
nameInfo.removeClass("correct").addClass("error").html("← at least 6 characters").show();
ele.removeClass("normal").addClass("wrong");
} else {
nameInfo.removeClass("error").addClass("correct").html("√").show();
ele.removeClass("wrong").addClass("normal");
}
}
};
// bind jVal.fullName function to "Full name" form field
$("#fullname").change(jVal.fullName);
});
Validacija polja datuma rođenja Sada će sve ići brže. Samo trebamo napraviti kopiju metode fullName i napraviti neke promjene.
Sada kopirajte metodu fullName, zalijepite je ispod i preimenujte je u datum rođenja. I napravite sljedeće promjene:
- Gdje god se nameInfo pojavi, zamijenite ga s birthInfo
- Umjesto #fullname, koristite #birthday za ele varijablu
- Zalijepi ovaj predložak regularni izraz ispod je izraz birthInfo.css():
var patt = /^(2)\-(2)\-(4)$/i; - Naš stari if() izraz trebao bi biti:
if(!patt.test(ele.val())) - Poruka za ovo polje bit će: upišite datum u ispravnom formatu
Ovako bi trebala izgledati metoda datuma rođenja nakon ovih promjena:
"datum rođenja" : funkcija ()( $("body").append(""); var birthInfo = $("#birthInfo"); var ele = $("#birthday"); var pos = ele.offset( ); birthInfo.css(( gore: pos.top-3, lijevo: pos.left+ele.width()+15 )); var patt = /^(2)\-(2)\-(4)$ /i; if(!patt.test(ele.val())) ( jVal.errors = true; birthInfo.removeClass("correct").addClass("error").html("← upišite datum u ispravnom formatu ").show(); ele.removeClass("normal").addClass("wrong"); ) else ( birthInfo.removeClass("error").addClass("correct").html("√").show (); ele.removeClass("pogrešno").addClass("normalno"); ) )
Koristeći regularni izraz (redak 14), provjeravamo da je datum u formatu 03/28/1987. U retku 16 provjeravamo odgovara li korisnikov datum rođenja uzorku regularnog izraza.
I naravno, trebamo priložiti change() događaj polju datuma rođenja:
$("#birthday").change(jVal.birthDate);
Sada imamo još jednu radnu metodu provjere valjanosti obrasca jQuery. Odličan posao!
Provjera valjanosti polja postaje Ponovno kopirajte metodu fullName, preimenujte je u spol i napravite sljedeće promjene:
- Preimenujte sve nameInfo u genderInfo
- Umjesto #fullname, koristite #woman za ele varijablu
- U izrazu genderInfo.css() promijenite gornju varijablu u top: pos.top-10 i slijeva nalijevo: pos.left+ele.width()+60
- Naša if() izjava trebala bi biti:
if($("input:checked").length === 0) - Poruka korisniku će biti: jeste li muškarac ili žena?
Ovako bi trebala izgledati rodna metoda nakon promjena:
"gender" : function ()( $("body").append(""); var genderInfo = $("#genderInfo"); var ele = $("#woman"); var pos = ele.offset( ); genderInfo.css(( gore: pos.top-10, lijevo: pos.left+ele.width()+60 )); if($("input:checked").length === 0) ( jVal .errors = true; genderInfo.removeClass("correct").addClass("error").html("← jeste li muškarac ili žena?").show(); ele.removeClass("normal").addClass ("pogrešno"); ) else ( genderInfo..removeClass("greška").addClass("ispravno").html("√").show(); ele.removeClass("pogrešno").addClass("normalno "); ))
U retku 14 provjeravamo koliko je radio selektora odabrano. Ako je 0, korisnik nije ništa odabrao, prikazujemo poruku o pogrešci.
I kao i uvijek, prilažemo rodnu metodu za radio gumbi:
$("input").promjena(jVal.gender);
Provjera valjanosti - vlasništvo vozila Sada kopirajmo metodu roda i preimenujmo je u vozilo, čineći sljedeće promjene:
- Zamijenite sve genderInfo s vehicleInfo
- Umjesto #woman, unesite #ship za ele.
- U izrazu vehicleInfo.css(), vrijednost lijevo treba biti lijevo: pos.left+ele.width()+40
- Naša if() izjava bi sada trebala biti:
if($("input:checked").duljina
