Pagina de destinație SEO. Optimizarea internă a paginilor de destinație. Și iată ce trebuie să faci pentru asta:

Validarea câmpului la nivelul clientului este ceva ce ar trebui să aibă orice formular, nu există nicio îndoială. În primul rând, utilizatorul nu trebuie să aștepte și să-și piardă nervii. În al doilea rând, arăți că îți pasă de vizitatorii tăi. Este foarte frumos ca vizitatorul să știe din timp ce a greșit.

În acest tutorial, vom învăța cum să scriem validarea formularului jQuery în timp real. Dacă vrei să vezi cu ce poți veni, poți să dai clic pe DEMO și să arunci o privire.

Ce vom învăța astăzi? Cum implementăm validarea jquery?

Există multe modalități de a realiza acest lucru, iată cele mai comune:

Putem crea o etichetă SPAN (care va conține informații de validare) lângă câmpul de introducere și să îi dăm un ID specific prin care îl vom accesa.

Putem împacheta fiecare câmp într-o etichetă P, în interiorul căreia creăm un SPAN care va conține informații despre validarea câmpului.

De asemenea, puteți împacheta câmpul P cu o etichetă, în interiorul căreia puteți „învăța” SPAN (din mers folosind jquery).

Toate acestea vor funcționa, dar nu vor funcționa cel mai bun mod implementare. De ce? Deoarece există prea mult cod HTML suplimentar în formularul de intrare de care nu avem nevoie. Trebuie observat.

O vom face așa cum am făcut-o pentru mine. După părerea mea, acesta este cel mai mult solutie corecta, deși nimeni nu face asta. Sincer, nu am văzut pe nimeni altcineva făcând asta... dacă știi, scrie-mi un comentariu la sfârșitul lecției.

Ce vom face?

Vom scrie formă simplă, frumos si curat cod semantic, fără etichete inutile.

Deoarece oamenii completează fiecare câmp individual, îl putem urmări și valida din mers:

Determinați poziția sa în fereastră (colțul din stânga sus)
Determinați lățimea acestuia
Astfel vom ști unde este sfârșitul lui.
Să adăugăm informații de validare într-un bloc DIV cu un anumit ID, în dreapta unui anumit câmp. De asemenea, vom atribui clasele corespunzătoare .corect sau .incorect.

Notă: acest lucru este acceptabil și pentru persoanele care nu folosesc JavaScript în browser. Acestea vor fi validate pe partea serverului.

Structura proiectului

Va trebui să creăm trei fișiere:

index.html

stil.css

validate.js

Vom privi totul pas cu pas... mai întâi codul HTML, apoi necesarul Stiluri CSS, mai târziu ne vom concentra pe scriptul principal de validare a formularului jQuery.

Scrierea HTML

Hai sa despartim totul...

Pasul 1 - creați codul HTML de bază

Pentru a începe, creați un fișier index.html și inserați-l în el codul de bază. Vedeți că ne conectăm fișier jQueryîn partea de jos, înainte de validation.js, care conține scriptul nostru de validare.

Pasul 2 - creați o formă împărțită în trei părți

Vom crea un formular din trei părți pentru a vedea cum să validăm diferite câmpuri de intrare și verificatoare. Pentru împărțire folosim FIELDSET și LABEL, pentru titlurile fiecărei secțiuni:

Informații personale (nume de utilizator, naștere, sex, vehicul).

E-mail (câmp de introducere a e-mailului utilizatorului).

Despre mine ( informatie scurta despre utilizator).

Validarea formularelor în timp real folosind jQuery e-mail cu informații personale Despre tine Pasul 3 - adăugați câmpuri și confirmați butonul

Grozav, acum să creăm câteva câmpuri de intrare pentru formularul nostru. Pentru lecția noastră, am selectat în mod special mai multe domenii diferite:

Trei câmpuri de INPUT (nume de utilizator, data nașterii, adresa de e-mail).
Butoane RADIO pentru a selecta sexul.
CHECKBOX pentru Vehicul utilizator.
TEXTAREA pentru informații despre utilizator.
BUTON pentru butonul „Confirmare”.

Vom împacheta fiecare Etichetă și câmp de intrare într-o etichetă P pentru a o separa în blocuri separate. Fișierul final index.html va arăta acum astfel:

Validarea formularelor în timp real folosind informațiile personale jQuery

Numele complet:

Ziua nașterii (zz-ll-aaaa):

Eu sunt: Bărbat Femeie

Dețin: mașină avion bicicletă navă

E-mail

E-mail ( [email protected]):

Despre tine

Povestește-ne puțin despre tine:

Trimite

Acest lucru poate părea puțin înfricoșător, dar asta pentru că există o mulțime de câmpuri de intrare în formularul nostru. De fapt, aici nu este nimic complicat. Salvați fișierul și căutați în browser pentru a vedea ce se întâmplă. Acum hai să decorăm puțin...

Adăugarea CSS

Deoarece stilul CSS nu este subiectul principal al tutorialului de astăzi, nu ne vom opri asupra lui. Avem nevoie doar de acest cod CSS pentru ca formularul să arate frumos și ca toate blocurile să fie la locul lor.

Creați un fișier style.css și inserați codul de mai jos în el. Acum formularul cu validarea jquery viitoare arată uimitor. Nu-i așa?

Corp ( fundal: #efefef; margine: 0; umplutură: 0; chenar: niciunul; text-align: center; font: normal 13px Georgia, „Times New Roman”, Times, serif; culoare: #222; ) #conținut ( lățime: 500 px; margine: 0 automat; margin-bottom: 25px; padding: 0; text-align: left; ) fieldset ( margin-top: 25px; padding: 15px; chenar: 1px solid #d1d1d1; -webkit-border- radius: 7px; -moz-border-radius: 7px; border-radius: 7px; ) legendă fieldset ( font: normal 30px Verdana, Arial, Helvetica, sans-serif; text-shadow: 0 1px 1px #fff; spațiere între litere : -1px; culoare: #273953; ) input, textarea ( padding: 3px; ) etichetă ( cursor: pointer; ) .block ( display: block; ) small ( letter-spacing: 1px; font-size: 11px; font- stil: cursiv; culoare: #9e9e9e; ) .info ( text-align: stânga; umplutură: 5px; dimensiunea fontului: 11px; culoare: #fff; poziție: absolut; afișare: niciunul; -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; box-shadow: -1px 1px 2px #a9a9a9; ) .eroare ( fundal: #f60000; chenar: 3px solid #d50000; ) .corect ( fundal: #56d800; chenar: 3px solid #008000; ) .greșit (greutate font: bold; culoare: #e90000; ) .normal ( greutate font: normal; culoare: #222; ) #trimite ( fundal: #3f5a81; lățime: 100%; chenar: 5px solid #0F1620; font: bold 30px Verdana, sans-serif; culoare: #fafafa; text- umbră: 1px 1px 1px #0F1620; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; ) #send:hover ( fundal: #4d76b1; chenar: 5px solid #253750; culoare: #fff; ) #send:activ (text-indent: -10px; )

Noi scriem validare jQuery forme

Aceasta este partea cea mai interesantă și interesantă a lecției. Dar mai întâi, trebuie să gândim și să descriem punctele principale ale muncii noastre. Trebuie să planificați totul.

Planuim

Înainte de a scrie, pune-ți trei întrebări:

De ce avem nevoie de la acest script?

Cum vrem să facem asta?

Cum vom realiza acest lucru?

Acest lucru este clar, dorim ca scriptul să valideze formularul. Dar cum? Dorim să facă acest lucru în timp real (când utilizatorul termină de completat câmpul de introducere) și când se face clic pe butonul „Confirmare”. Prin urmare, va trebui să scriem mai multe funcții: separat pentru fiecare câmp de introducere și pentru toate formularele (care vor fi apelate când se va apăsa butonul „Confirmare”).

Pentru a preveni repetarea codului, va trebui să creăm obiect JavaScript pentru aceasta.

De ce avem nevoie pentru asta?

Obiectul JS în cazul nostru se va numi jVal, va conține următoarele metode:

jVal.fullName
jVal.birthDate
jVal.gen
jVal.vehicul
jVal.email
jVal.despre

Variabila care va conține starea erorii curente este jVal.errors. Și o metodă care verifică dacă există erori și confirmă trimiterea formularului sau îl respinge. Dacă se găsesc erori, acesta direcționează utilizatorul la începutul formularului, unde poate completa corect toate câmpurile.

Metoda se numește - jVal.sendIt

Acum putem începe să ne dezvoltăm Scriptul jQuery validarea formularului. Odată ce scriem prima metodă, atunci totul va merge mai ușor și mai repede.

Să începem treaba

Codul de bază este simplu, absolut totul cod jquery va fi conținut în această sintaxă:

$(document).ready(function())( jVal = ( ); ));

Validarea câmpului nume de utilizator

Prima noastră metodă va procesa câmpul „nume utilizator”. Lipiți-l în interiorul obiectului jVal, așa cum se arată în exemplu:

Var jVal = ( "nume complet" : function() ( ) );

Acum să scriem câteva linii de cod în cadrul metodei. Doar lipiți-le și ne vom uita la ce înseamnă asta în continuare:

$("corp").append(""); var nameInfo = $("#nameInfo"); var ele = $("#nume complet"); var pos = ele.offset();

Linia 1: Adăugăm un bloc DIV la document. Informații despre clasă, oferă un anumit stil blocului, care este definit în fișierul style.css, îl face și invizibil folosind display:none; Găsiți un ID, acesta este pentru a avea acces rapid la acest bloc și manipulați-l cu folosind jQuery. Acest bloc DIV va conține informații de validare a câmpului.

Linia 3: Scriem un apel către acest bloc într-o variabilă, deoarece îl vom folosi un numar mare de o singura data.

Linia 4: La fel ca în cazul precedent, înregistrăm conexiunea la câmpul nume complet într-o variabilă. De asemenea, îl vom folosi de multe ori.

Funcția jQuery offset() returnează poziția curentă a unui element relativ la document. Returnat ca obiect care conține proprietățile de sus și din stânga. Folosim această funcție pe ele pentru a determina poziția câmpului de intrare.

Acum să mai adăugăm câteva rânduri...

NameInfo.css(( sus: pos.top-3, stânga: pos.left+ele.width()+15 ));

După cum puteți vedea, începem să operam cu stilurile blocului nameInfo. Mai exact, i-am setat poziția în dreapta câmpului de intrare. Pentru a face acest lucru, îl mutăm în sus cu 3 pixeli (a doua linie de cod) și îl mutăm cu 15 pixeli la dreapta câmpului (a treia linie de cod).

Am scris 50% din prima metodă, o vom duce până la capăt. Este timpul să determinați cât de corect a introdus utilizatorul datele și să luați măsuri...

Dacă(ele.val().lungime< 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"); }

Nu arata bine? Nu este nimic de care să-ți fie frică...

Linia 1: Verificăm ca numele introdus de utilizator să nu aibă mai puțin de 6 caractere.

Linia 2: Setați variabila jVal.errors la true deoarece am stabilit că numele de utilizator este prea scurt. Vom folosi acest lucru în continuare.

Linia 3: Începem să operam cu elementul nostru nameInfo (în care afișăm informații). În primul rând, eliminăm clasa corectă și atribuim eroarea clasei. Apoi inserăm conținut în elementul nameInfo, aceasta este o informație că numele trebuie să aibă mai mult de 6 caractere. Și, în sfârșit, facem mesajul nostru vizibil pentru utilizator.

Linia 4: Începem să manipulăm elementul nostru ele (formularul de introducere a numelui de utilizator). Înlăturăm clasa normală și o atribuim greșit.

Linia 5: Dacă numele de utilizator este suficient de lung, atunci...

Linia 6: Începem să manipulăm elementul nameInfo. Dacă eroarea de clasă este atribuită, o eliminăm și atribuim clasa corectă. Introducem o „pasăre” înăuntru pentru a înțelege că totul este în regulă. Și afișați un mesaj pentru utilizator.

Linia 7: Operăm cu elementul ele. Îndepărtăm clasa greșită, dacă este aplicată, și aplicăm clasa normală.

Am creat prima noastră metodă de validare! Este timpul să-l testăm. Trebuie să fim siguri că metoda noastră va fi apelată atunci când utilizatorul își termină introducerea numelui. Pentru a implementa acest lucru, trebuie să atașăm un eveniment unei acțiuni. Vom folosi funcția change(). Lipiți exemplul de cod de mai jos, sub obiectul jVal:

$("#nume complet").change(jVal.nume complet);

Ce înseamnă asta în limbajul uman: dacă utilizatorul modifică valoarea câmpului „Nume complet” și apoi termină cu el, se apelează metoda fullName, care validează câmpul.

Fișierul dvs. validate.js ar trebui să conțină acum următorul cod:

< 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); });

Validarea câmpului datei nașterii

Acum totul va merge mai repede. Trebuie doar să facem o copie a metodei fullName și să facem câteva modificări.

Acum, copiați metoda fullName, lipiți-o mai jos și redenumiți-o data de naștere. Și faceți următoarele modificări:

Oriunde apare nameInfo, înlocuiți-l cu birthInfo
În loc de #fullname, utilizați #birthday pentru variabila ele
Lipiți acest șablon expresie uzuala mai jos este expresia birthInfo.css():

var patt = /^(2)\-(2)\-(4)$/i;

Vechea noastră expresie if() ar trebui să fie:

dacă(!patt.test(ele.val()))

Mesajul pentru acest câmp va fi: introduceți data în formatul corect

Iată cum ar trebui să arate metoda datei de naștere după efectuarea acestor modificări:

"birthDate": function ()( $("body").append(""); var birthInfo = $("#birthInfo"); var ele = $("#birthday"); var pos = ele.offset( ); birthInfo.css(( sus: pos.top-3, stânga: pos.left+ele.width()+15 )); var patt = /^(2)\-(2)\-(4)$ /i; if(!patt.test(ele.val())) ( jVal.errors = true; birthInfo.removeClass(„corect”).addClass(„eroare”).html(„← introduceți data în formatul corect „).show(); ele.removeClass(„normal”).addClass(„greșit”); ) else ( birthInfo.removeClass(„eroare”).addClass(„corectă”).html(„√”).show (); ele.removeClass(„greșit”).addClass(„normal”); ) )

Folosind o expresie regulată (linia 14), verificăm dacă data este în formatul 28/03/1987. În rândul 16, verificăm dacă data de naștere a utilizatorului se potrivește cu modelul expresiei regulate.

Și, desigur, trebuie să atașăm un eveniment change() la câmpul pentru data nașterii:

$("#ziua de naștere").change(jVal.data nașterii);

Acum avem o altă metodă de validare a formularului jQuery. Buna treaba!

Validarea câmpului devin

Din nou, copiați metoda fullName, redenumiți-o gen și faceți următoarele modificări:

Redenumiți toate nameInfo în genderInfo
În loc de #fullname, utilizați #woman pentru variabila ele
În expresia genderInfo.css(), modificați variabila de sus în sus: pos.top-10 și de la stânga la stânga: pos.left+ele.width()+60
Declarația noastră if() ar trebui să fie:

if($("input:verificat").length === 0)

Mesajul către utilizator va fi: ești bărbat sau femeie?

Iată cum ar trebui să arate metoda de gen după modificări:

"gen": function ()( $("corp").append(""); var genderInfo = $("#genderInfo"); var ele = $("#femeie"); var pos = ele.offset( ); genderInfo.css(( sus: pos.top-10, stânga: pos.left+ele.width()+60 )); if($("input:checked").length === 0) ( jVal .errors = true; genderInfo.removeClass(„corectă”).addClass(„eroare”).html(„← ești bărbat sau femeie?”).show(); ele.removeClass(„normal”).addClass („greșit”); ) else ( genderInfo..removeClass(„eroare”).addClass(„corect”).html(„√”).show(); ele.removeClass(„greșit”).addClass(„normal "); ))

Pe linia 14 verificăm câte selectoare radio sunt selectate. Dacă 0, atunci utilizatorul nu a selectat nimic, afișăm un mesaj de eroare.

Și, ca întotdeauna, atașăm o metodă de gen pentru butoanele radio:

$("input").change(jVal.gender);

Verificatori de validare - deținerea vehiculului

Acum să copiem metoda de gen și să o redenumim vehicul, făcând următoarele modificări:

Înlocuiți toate genderInfo cu vehiculInfo
În loc de #femeie, introduceți #ship pentru ele.
În expresia vehiculInfo.css(), valoarea stângă ar trebui să fie lăsată: pos.left+ele.width()+40
Declarația noastră if() ar trebui să fie acum:

if($("input:checked").lungime