Validarea formularului în JavaScript. Validarea câmpurilor de formular folosind jQuery
Cei care creează la un moment dat site-uri web se confruntă cu nevoia de a verifica dacă utilizatorul a completat câmpurile unui formular postat pe site. Pentru a face acest lucru, este creat un fel de opțiune pentru verificarea câmpurilor goale, care este utilizată în proiectele sale. Dar pentru fiecare caz, numărul de câmpuri care trebuie verificate poate fi diferit. Acest lucru duce la faptul că opțiunea de verificare creată trebuie modificată în funcție de condițiile specifice, iar în viitor vom avea mai multe modificări ale acesteia.
În plus, pe o pagină a site-ului pot fi plasate mai multe formulare, fiecare dintre ele va avea un număr diferit de câmpuri obligatorii. Drept urmare, codul va include mai multe blocuri cu aceleași funcții, dar condiții diferite, ceea ce nu este întotdeauna soluția potrivită.
În practica mea, a trebuit să folosesc și diferite opțiuni pentru verificarea completării câmpurilor de formular, în funcție de condițiile specifice. Și fișierul *.js conținea mai multe funcții pentru verificarea diferitelor forme, care au crescut cantitatea de cod și au înrăutățit percepția acestuia.
La un moment dat, s-a decis să se scrie o versiune a unei metode universale de verificare a câmpurilor goale, care ar putea fi folosită pentru orice formular cu orice număr de câmpuri obligatorii. Condițiile necesare pentru această metodă au fost simplitatea și absența structurilor voluminoase. Drept urmare, s-a găsit o metodă care m-a mulțumit complet atât prin simplitate, cât și prin versatilitate.
Esența acestei metode:
Exemplu de marcare a formularului:
Titlul formularului #1 Obligatoriu Obligatoriu Obligatoriu
Exemplu de cod de validare a câmpului:
$(".js-form-validate").submit(function () ( var form = $(this); var field = ; form.find("input").each(function () (field.push(" input"); var valoare = $(this).val(), line = $(this).closest(".some-form__line"); for(var i=0;i
";
endif;
?>
Foarte des este nevoie să adăugați un formular pe un site, deoarece un formular este cel mai popular mod de comunicare cu un site pentru un utilizator și este foarte important ca datele introduse de utilizator să fie corecte. Și pentru ca formularul să fie trimis cu datele corecte, acesta trebuie verificat înainte de a face acest lucru. Și așa ne vom ocupa de validarea formularelor în JavaScript în acest articol.
Să creăm mai întâi un formular pe care apoi îl vom verifica:
Numele dumneavoastră:
Parola Dvs:
Care este sexul tau:
Selectați numărul:
1
2
3
Mesajul dvs:
De acord cu regulile noastre:
Incarca fisier:
Aceasta este forma. Sper că sunteți familiarizat cu HTML și cred că nu costă nimic de explicat. Dacă ceva nu este clar, atunci uită-te la modul în care funcționează acest cod în browser.
Acum să vorbim despre cum să obțineți valori din câmpurile de formular. La urma urmei, înainte de a le verifica, trebuie să aflați ce a scris utilizatorul acolo. Vederea generală a accesării unui câmp de formular este următoarea:
Document.nume_form.nume_câmp.valoare;
Adică accesăm mai întâi obiectul Document, apoi proprietatea lui Form (prin numele formularului), apoi numele câmpului acestui formular și, în final, valoarea câmpului. Să redăm toate câmpurile care se supun acestei vederi generale:
Var form = document.form1;
document.write(form.firstname.value + "
");
document.write(form.pass.value + "
");
document.write(form.number.value + "
");
document.write(form.message.value + "
");
document.write(form.rules.value + "
");
document.write(form.hidefield.value + "
");
document.write(form.fileupload.value + "
");
document.write(form.sub.value + "
");
document.write(form.but.value + "
");
Acestea sunt toate câmpurile care au o proprietate de valoare și pot fi accesate în acest fel.
Acum să vorbim despre un element special de formă - radio. Să accesăm valoarea radio:
Var sex = (document.form1.sex.checked)?
document.form1.sex.value: document.form1.sex.value;
Observați că avem două elemente radio care se află în matricea sex. Indicii lor sunt 0 și 1. În acest script verificăm dacă primul nostru element este inclus ( verificat), apoi atribuim valoarea primului element, în caz contrar atribuim valoarea celui de-al doilea element. Apropo, dacă cineva nu înțelege, aceasta este o construcție a operatorului de condiție IF. Desigur, s-ar putea scrie astfel:
Var sex;
if (document.form1.sex.checked) sex = document.form1.sex.value;
else sex = document.form1.sex.value;
Acum că avem acces la toate câmpurile, să validăm în sfârșit formularul. Dar mai întâi, să adăugăm atributul „onSubmit” la eticheta cu valoarea „return check();”. Acest atribut va face următoarele: înainte de a trimite formularul, apelați o funcție care ar trebui să returneze fie adevărat, fie fals. Dacă returnează true , atunci formularul va fi trimis la server, iar dacă false , atunci formularul nu va fi trimis.
Acum să creăm o funcție check(), care ar trebui, în primul rând, să verifice întregul formular, să informeze utilizatorul despre erori și, de asemenea, să returneze true (dacă formularul este complet corect) sau false (dacă formularul conține erori).
Verificare funcție (formular) (
var prenume = form.prenume.valoare;
var pass = form.pass.value;
var mesaj = form.message.value;
var reguli = form.rules.value;
var fisier = form.fileupload.value;
var bad = "";
dacă (prenume.lungime< 3)
bad += "Numele este prea scurt" + "\n";
dacă (prenume.lungime > 32)
bad += "Numele este prea lung" + "\n";
dacă (pass.lungime< 3)
bad += „Parola este prea scurtă” + „\n”;
dacă (lungimea trecerii > 32)
bad += „Parola este prea lungă” + „\n”;
dacă (mesaj.lungime< 3)
bad += „Mesajul prea scurt” + „\n”;
dacă (reguli != „pe”)
bad += „Nu ați fost de acord cu regulile” + „\n”;
dacă (lungimea fișierului == 0)
bad += "Nu ați selectat un fișier de încărcat" + "\n";
dacă (rău != "") (
bad = "Formularul este completat incorect:" + "\n" + bad;
alerta(rau);
returnează fals;
}
returnează adevărat;
}
În acest script, primim mai întâi toate datele care trebuie verificate și le scriem în variabile. Apoi creăm o variabilă bad, în care scriem toate datele incorecte. Apoi există un întreg set de IF-uri care verifică câmpurile din formular și scriu orice erori în variabila proastă. Apoi, dacă variabila proastă nu este goală (adică au existat erori), atunci afișăm o fereastră (alert()) cu erori. Și returnăm false pentru ca formularul să nu fie depus. Dacă variabila proastă este goală, atunci pur și simplu returnăm true, astfel încât formularul să fie trimis pentru procesare la „handler.php”.
„Protecția proștilor” este un set de măsuri pentru a preveni introducerea de informații incorecte într-un formular. De exemplu, dacă un câmp necesită introducerea unui număr pozitiv de la 0 la 10, atunci ar trebui să verificați dacă utilizatorul nu introduce text sau un număr care nu se află în intervalul specificat, de exemplu. numărul nu trebuie să fie mai mic de zero și mai mare de zece.
De ce sunt introduse informații incorecte? Acest lucru se face în principal din trei motive.
Trebuie înțeles că formularea precisă și corectă, deși reduce probabilitatea erorilor, nu te scutește în niciun fel de ele. Doar mijloacele tehnice din partea serverului vă permit să obțineți rezultatul dorit și să evitați introducerea de informații incorecte. Cu toate acestea, revizuirea sau, așa cum se mai numește, validarea client-side vă permite să verificați rapid datele introduse de utilizator pentru corectitudine, fără a trimite formularul la server. Acest lucru economisește timp utilizatorului și reduce sarcina pe server. Din punct de vedere al utilizabilității, există și avantaje - utilizatorul primește imediat un mesaj despre informațiile introduse incorect și își poate corecta greșeala.
Câmp obligatoriuUnele câmpuri de formular trebuie completate înainte de a fi trimise la server. Acest lucru, de exemplu, se aplică formularului de înregistrare, în care vi se solicită să introduceți o autentificare și o parolă. Pentru a specifica câmpurile obligatorii, utilizați atributul obligatoriu, așa cum se arată în Exemplul 1.
Exemplul 1. Atributul necesar
HTML5 IE 10+ Cr Op Sa Fx
Câmp obligatoriu
Log in:
Parola:
Câmpurile obligatorii trebuie completate înainte de a trimite formularul, altfel formularul nu va fi trimis la server și browserul va emite un avertisment în acest sens. Tipul de mesaj depinde de browser, de exemplu Chrome afișează un sfat explicativ, așa cum se arată în Fig. 1.
Orez. 1. Câmpul obligatoriu nu este completat
Corectitudinea datelorInițial, există două câmpuri în care introducerea utilizatorului este verificată automat. Aceasta este o adresă web și o adresă de e-mail. De asemenea, Chrome verifică validitatea câmpului calendarului, dar numai pentru că nu are o interfață click-to-calendar. Următoarele reguli se aplică acestor elemente.
- Adresa web ( ) trebuie să conţină protocolul (http://, https://, ftp://).
- Adresa de e-mail ( ) trebuie să conțină litere sau cifre înainte de simbolul @, după acesta, apoi un punct și un domeniu de nivel superior.
Browserele au politici ușor diferite pentru verificarea datelor utilizatorilor. De exemplu, Opera inserează automat protocolul http:// în fața textului introdus, în timp ce alte browsere îl așteaptă de la utilizator. Chrome și Opera necesită un punct în adresa de e-mail; Firefox nu o necesită.
Exemplul 2 arată un formular cu câmpuri obligatorii în care două câmpuri sunt validate de browser.
Exemplul 2: Corectitudinea datelor
HTML5 IE 10+ Cr Op Sa Fx
Corectitudinea datelor
Completați formularul (toate câmpurile sunt obligatorii)
Nume:
E-mail:
Site:
Opera verifică un element de formular numai dacă are un atribut de nume.
Ce se întâmplă în Opera când introduceți date incorecte este prezentat în Fig. 2.
Orez. 2. Avertisment despre date incorecte
Șablon de intrareUnele date nu pot fi clasificate într-unul dintre tipurile de elemente de formular, așa că trebuie să utilizați un câmp de text pentru ele. În același timp, acestea sunt introduse după un anumit standard. Astfel, o adresă IP conține patru numere separate printr-un punct (192.168.0.1), codul poștal al Rusiei este limitat la șase cifre (124007), un număr de telefon conține un prefix și un anumit număr de cifre, adesea separate printr-un cratima (391 555-341-42), etc. Browserul trebuie să specifice un șablon de intrare astfel încât să verifice datele introduse de utilizator în funcție de acesta. Pentru a face acest lucru, este folosit atributul model, iar valoarea sa este o expresie regulată. Unele valori tipice sunt enumerate în tabel. 1.
Exemplul 3 vă solicită să introduceți o valoare de culoare hexazecimală (#ffcc00) și dacă nu se află în acest interval, browserul afișează un mesaj de eroare.
Exemplul 3. Şablon de intrare
HTML5 IE 10+ Cr Op Sa Fx
Intrare culoare
Introduceți valoarea hexazecimală a culorii (trebuie să înceapă cu #)
În fig. Figura 3 arată un avertisment în browserul Chrome.
Orez. 3. Datele introduse nu se potrivesc cu șablonul
NevalidareValidarea nu este întotdeauna necesară pentru un formular; de exemplu, un dezvoltator va dori să utilizeze o soluție JavaScript universală și nu va mai avea nevoie de o verificare duplicată de către browser. În astfel de cazuri, trebuie să dezactivați validarea încorporată. Pentru a face acest lucru, utilizați atributul novalidate al etichetei. Exemplul 4 arată utilizarea acestui atribut.
Exemplul 4: nevalidare
HTML5 IE 10+ Cr Op Sa Fx
atribut novalidate
Într-un scop similar se folosește atributul formnovalidate, care se adaugă la butonul de trimitere a formularului, în acest caz la etichetă. În acest caz, forma din exemplul 4 va arăta astfel.
