forma de validare Jquery și câmp în timp real

Validarea câmpurile de pe partea de client - este ceva ce ar trebui să aibă orice formă, nu există nici o îndoială. În primul rând, utilizatorul nu trebuie să aștepte să-și petreacă nervii lor. În al doilea rând, vă arată că vă preocupă pentru vizitatorii lor. Vizitatorul este foarte frumos să știe dinainte că el nu a făcut-o.

forma de validare Jquery și câmp în timp real

In acest tutorial, vom învăța cum să scrie o validare formular jQuery în timp real. Dacă doriți să vedeți ce veți obține, puteți apăsa „demo“ și a se vedea.

Ce știm astăzi?

Așa cum am pune în aplicare jquery Validează?

Există mai multe moduri de a face acest lucru, aici sunt cele mai frecvente:

  1. Putem crea o etichetă SPAN (care va conține informații cu privire la validarea), de lângă câmpul de introducere, si da-i un act de identitate, după care ne vom întoarce la el.
  2. Putem încheia fiecare domeniu în tag-ul P, în interiorul căruia a crea SPAN, care va conține informații cu privire la validarea teren.
  3. De asemenea, este posibil să-și încheie câmpul pentru etichetă P, în care „pref» SPAN (pe zbor prin jquery).

Acest lucru va funcționa, dar nu este cel mai bun mod de a pune în aplicare. De ce? Pentru că prea multe cod HTML inutile în formularul de înscriere, pe care nu avem nevoie. Trebuie să urmați semantica codului.

Ce facem?

  1. Vom scrie un formular simplu, un cod frumos și curat semantic, fără tag-uri suplimentare.
  2. Din moment ce oamenii umple fiecare câmp individual, putem urmări și validați-l pe zbor:
    • Pentru a determina poziția în fereastra (colțul din stânga sus)
    • Se determină lățimea
    • Deci, noi știm unde se termină.
    • Adăugați informații despre validare într-un bloc DIV cu un anumit ID-ul, spre dreapta câmpului specific. De asemenea, atribuite claselor sau .correct .incorrect.

Structura proiectului

Vom avea nevoie pentru a crea trei fișiere:

Vom lua în considerare toate etapele ... primul cod HTML, atunci stilurile CSS necesare, mai târziu, ne vom concentra pe principalele - forma script de validare jQuery.

Scrierea HTML

Break-l în jos ...

Pasul 1 - a crea un cod HTML simplu

Pentru a începe, creați un fișier index.html și inserați acest cod de bază. Puteți vedea că conecta jQuery fișier de mai jos înainte de validation.js, care conține script-ul nostru de validare.

Pasul 2 - Crearea unui formular care este împărțit în trei părți

Vom crea o formă care constă din trei părți, pentru a vedea cum să valideze diferite câmpuri de intrare și de verificare a. Pentru separarea folosim FIELDSET și o etichetă, pentru titlurile fiecărei secțiuni:

  1. Informații personale (nume de utilizator, data nașterii, sexul, vehicul).
  2. E-mail (câmpul de introducere e-mail de utilizator).
  3. Declarație (informații succinte despre utilizator).

Pasul 3 - adăugați câmpul și butonul pentru a confirma

Ok, acum vom crea mai multe domenii de intrare pentru formularul nostru. În lecția noastră, am selectat un număr special de domenii diferite:

Vom învelește fiecare Lable și câmp de intrare în tag-ul P, care urmează să fie împărțită în unități separate. Acum, fișierul index.html final va fi după cum urmează:

Se poate arata un pic înfricoșător, dar este pentru că o mulțime de domenii de intrare în forma noastră. De fapt, nu e nimic complicat. Salvați fișierul și căutați în browser-ul care sa dovedit. Acum, un pic ... Decorate

Adăugarea CSS

Deoarece CSS stilizată nu principalul subiect de lecția de astăzi, nu vom insista asupra acestui. Avem nevoie de acest cod CSS pentru a forma privit frumos și toate blocurile sunt la locul lor.

Creați un fișier style.css, inserați codul de mai jos în ea. Acum forma viitorul cu validare jQuery, se pare uimitor. Nu-i așa?

Scrierea formularului de validare jQuery

Aceasta este cea mai interesantă și interesantă parte a lecției. Dar, mai întâi, trebuie să ne gândim și să descrie principalele aspecte ale muncii noastre. Tot ce trebuie să-și planifice.

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

  1. Ceea ce avem nevoie de script-ul?
  2. Cum vrem să facem acest lucru?
  3. Cum putem face?

Este clar, dorim ca script-ul pentru a valida forma. Dar cum? Vrem ca el să o facă în timp real (în cazul în care utilizatorul a terminat completarea câmpul de introducere) și atunci când faceți clic pe butonul „Confirm“. Așa că trebuie să scrie mai multe funcții separat pentru fiecare câmp de intrare și toate formele (care va fi numit făcând clic pe butonul „Confirmare“).

Ceea ce trebuie să facem?

JS obiect în acest caz, va fi numit jVal. acesta va conține următoarele metode:

  • jVal.fullName
  • jVal.birthDate
  • jVal.gender
  • jVal.vehicle
  • jVal.email
  • jVal.about

Variabilă care va conține starea erorii curente - jVal.errors. Și metoda care verifică dacă există erori, și confirmă sau respinge depunerea formularului. Dacă au existat erori, direcționează utilizatorul către partea de sus a formularului, în cazul în care se poate umple în mod corect toate câmpurile.

Metoda se numește - jVal.sendIt

Acum, putem începe să dezvolte un formular jQuery script de validare. Când am scrie prima metodă, atunci totul va merge mai repede și mai ușor.

Noțiuni de bază

cod bazat pe un simplu, absolut tot codul jQuery este conținut în această sintaxă:

Validarea câmpul numelui de utilizator

Prima metodă se va ocupa de „numele de utilizator“. Se introduce în obiectul jVal, așa cum se arată în exemplul următor:

Acum scrie mai multe linii de cod în metoda. Doar introduceți-le, atunci vom lua în considerare ceea ce înseamnă:

Linia 1: Adăugăm un bloc DIV la document. info Class, ofera un stil pentru unitate, care este definit în fișierul style.css, de asemenea, face invizibil folosind display: none; Naschet ID-ul, astfel încât, în scopul de a avea acces rapid la acel bloc și să le manipuleze folosind jQuery. Acest bloc DIV va conține informații privind validarea teren.

Linia 3: Scrierea unui apel la această unitate într-o variabilă, așa cum o vom folosi de mai multe ori.

Linia 4: La fel ca și în cazul precedent, vom scrie câmpul FULLNAME conexiune într-o variabilă. O vom folosi, de asemenea, de multe ori.

jQuery offset () întoarce poziția curentă a elementului în raport cu documentul. Acesta este returnat ca un obiect care conține proprietăți de sus și din stânga. Noi folosim această funcție pentru ELE, pentru a determina poziția câmpului de intrare.

Acum, voi adăuga câteva linii ...

După cum puteți vedea, vom începe să opereze cu bloc de stiluri nameInfo. Mai exact, ne-am stabilit poziția sa la dreapta câmpului de intrare. Pentru aceasta, vom crește cu 3 pixeli up (string 2 cod), și pentru a muta 15 pixeli la dreapta câmpului (3 cod string).

Am scris 50% din prima metodă, aducând problema la capăt. Acum este momentul pentru a stabili dacă utilizatorul a introdus datele în mod corect, și să ia măsuri ...

Ea nu arata? Nu au nimic să se teamă ...

Linia 1: Verificați dacă a fost introdus numele de utilizator cel puțin 6 caractere.

Linia 2: Setați variabila jVal.errors la adevărat, așa cum am stabilit că numele de utilizator este prea scurt. O vom folosi în continuare.

Linia 3: Vom începe să opereze elementul nostru nameInfo (care afișează informații). În primul rând, eliminăm clasa corectă, și să alocați de eroare de clasă. În continuare am pus conținut în elementul nameInfo, adică, informațiile că numele trebuie să fie mai mare de 6 caractere. Și, în sfârșit, vom face vizibil mesajul nostru pentru utilizator.

Linia 4: Vom începe să opereze elementul nostru ELE (formularul de înregistrare a unui nume de utilizator). Scoateți clasa normală și atribuie greșit.

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

Linia 6: Vom începe să opereze elementul nameInfo. Dacă eroarea de clasă atribuită, scoateți-l și atribuie clasa corectă. Se introduce în „pasăre“ pentru a înțelege că totul este în regulă. Și afișează un mesaj pentru utilizator.

Linia 7: Elementul de termeni ELE. Scoateți clasa greșit, în cazul în care se aplică, și să aplice clasa normală.

Am creat prima noastră metodă de validare! Este timpul să-l testeze. Trebuie să fim siguri că metoda noastră va fi apelat atunci când utilizatorul a terminat de scris numele tău. Pentru a realiza acest lucru, avem nevoie pentru a atașa un eveniment la acțiune. Vom folosi funcția de schimbare (). Introduceti codul exemplu de mai jos, în conformitate cu obiectul jVal:

Ce înseamnă în limbaj uman: în cazul în care utilizatorul modifică valoarea câmpului «Numele complet» și apoi se termină cu această metodă se numește FULLNAME, care validează câmpul.

Acum, fișierul validate.js trebuie să conțină următorul cod:

Data nașterii Validarea câmpului

Acum totul merge mai repede. Avem nevoie doar pentru a face o metodă de copiere FULLNAME și să facă unele modificări.

Acum, copiați metoda FULLNAME, lipiți-l de mai jos și redenumi data nașterii. Și fac următoarele modificări:

  • Peste tot în cazul în care nameInfo găsit, înlocuiți-l cu un birthInfo
  • În schimb #fullname, utilizați #birthday variabilă ELE
  • Lipire modelul de expresie regulate după expresii birthInfo.css ():
  • Expresia noastră anterioară, dacă () trebuie să fie:
  • Un mesaj pentru acest câmp este următoarea: tipul de la data în formatul corect

Iată cum să se uite metoda dată de naștere, după efectuarea acestor modificări:

Cu ajutorul expresiei regulate (14 linii), vom verifica dacă data a fost format 28/3/1987. În linia 16, vom verifica data conformitatea ziua de nastere a membrului cu un model de expresie regulată.

Și, desigur, avem nevoie pentru a atașa un eveniment de modificare () pentru data câmpului nașterii:

Acum avem o altă metodă de operare forme de validare pe jQuery. Bună treabă!

Validarea câmpului devin

Din nou, copiați metoda FULLNAME, redenumiți de gen și de a face următoarele modificări:

  • Toate nameInfo redenumiți genderInfo
  • În schimb #fullname, aplica variabila #woman ELE
  • In genderInfo.css () expresie variabilă schimbare top sus: pos.top-10 și din stânga pentru stânga: pos.left + ele.width () + 60
  • Expresia noastră, dacă () ar trebui să fie:
  • Mesaj pentru a fi: ești un bărbat sau o femeie?

Iată cum să se uite metoda de gen, după schimbarea:

În linia 14, vom verifica cât de multe selectoare selectat de radio. Dacă este setat la 0, utilizatorul nu au ales, apare un mesaj de eroare.

Și, ca întotdeauna, atașați o abordare de gen pentru butoanele radio:

Validarea dame - transport de proprietate

Acum, copiați metodele de gen și redenumiți-l în vehicul, efectuați următoarele modificări:

  • Toate genderInfo pentru a înlocui vehicleInfo
  • În schimb #woman, introduceți #ship pentru ELE.
  • In vehicleInfo.css () termeni, valoarea trebuie lăsată stânga: pos.left + ele.width () + 40
  • Expresia noastră, dacă () ar trebui să fie acum:
  • Mesaj pentru utilizator: Sunt sigur că aveți cel puțin două!

Iată cum să se uite această metodă, după schimbarea:

Pe linia 14, determinăm cât de multe vehicule alese de către utilizator. Dacă mai puțin de două, apare un mesaj de eroare. Dacă numărul de checkbox ales este egală sau mai mică de 1, aceasta înseamnă o eroare.

Din nou, ne prinde această metodă în domeniul vehiculului:

Probabil că ai obosit deja ... Un cuplu de metode de validare completă jQuery. Este timpul pentru validarea e-mailului.

E-mail Câmp de validare

Metoda de copiere data nașterii, e-mail pentru a redenumi și modifica:

  • Toate birthInfo schimbat la emailInfo
  • În schimb #birthday, scrie în valoarea variabilei #email ELE
  • Expresia noastră anterioară regulată este:
  • Mesaj pentru: da-mi o adresa de email valida, OK?

Iată cum va arăta metoda de e-mail, după efectuarea modificărilor:

Și, ca întotdeauna, vom prinde metoda de e-mail domeniu:

Validarea domeniul informațiilor de utilizator

Pentru această ultimă metodă, metoda de copiere FULLNAME, redenumiți-l si schimba-l cu privire la:

  • Toate schimbările de la nameInfo aboutInfo
  • În schimb #fullname, introduceți #about în valoarea ELE
  • Expresia noastră anterioară dacă () este:
  • Mesaj în caz de eroare: haide, spune-mi un pic mai mult!

Iată cum ar trebui să arate ca această metodă, după schimbarea:

Ne agățăm de această metodă în domeniu:

Tocmai am creat toate metodele de validare a jQuery. Ea are de a face două lucruri: a scrie ultima metoda sendIt, să prezinte pentru a controla acțiunea făcând clic pe „Submit“ pe formular.

Scrierea metoda sendIt

Această metodă se numește, după toate metodele validate, ca ultimul, după ce faceți clic pe „Submit“. El verifică dacă au existat erori de validare. Vestea bună, este mai ușor să mai devreme:

În cazul în care jVal.errors variabile nu este adevărat, permitem trimiterea formularului la server.

Acțiunile de control submit

Ultimul lucru de care avem nevoie pentru a gestiona efectul butonul de trimitere. Acest lucru se face după cum urmează:

Ne-am trimis la elementul de la un clic eveniment. Deoarece diferite browsere au percepții diferite derulați la partea de sus a paginii, trebuie să facem mai mult în afara defilare (linia 2). Efectuarea de defilare în partea de sus (linia 3). Apoi, modificați jVal.errors variabile la false, pentru a trimite date produse cu succes. În continuare pe prioritatea apelului toate metodele de validare. După aceea ne întoarcem fals, ceea ce înseamnă că împiedicăm transmiterea de date înainte de a le verifica validitatea.

produs finit

Acum formularul nostru script de validare jQuery este finalizată. Se pare, după cum urmează:

după cuvintele

Descărcați sursele Demo (0.03 Mb).

Vă mulțumesc, totul este în regulă!

Spune-mi, dacă nu este dificil, dar ambele pot adăuga ceva pentru a verifica lungimea verifica numele pentru a se asigura că numele a fost introdus doar litere românești?

Vă mulțumesc, funcționează)