7.3. Validare

Utilizarea principală a JavaScript în gestionarea formularelor este validarea datelor introduse de utilizatori. Înainte de a trimite un formular la server, se recomandă validarea datelor introduse de utilizator prin JavaScript. În acest fel, dacă utilizatorul a făcut o eroare la completarea formularului, acesta poate fi notificat instantaneu, fără a fi nevoie să așteptați răspunsul serverului.

Notificarea erorilor imediat utilizând JavaScript îmbunătățește utilizatorul Satisfacția cu aplicația (care este cunoscută din punct de vedere tehnic ca „Îmbunătățirea experienței utilizatorului”) și ajută la reducerea încărcăturii de procesare pe server.

În mod normal, validarea unui formular constă în apelarea la o funcție de validare atunci când Utilizatorul face clic pe butonul Trimitere formular. În această funcție, acestea sunt verificate dacă valorile pe care utilizatorul le-a introdus respectă restricțiile impuse de aplicație.

Deși există cât mai multe verificări posibile ca elemente de formă diferite, unele verificări sunt foarte frecvente : că un câmp obligatoriu, care este selectat valoarea unei liste derulantă, pe care adresa de e-mail indicată este corectă, că data introdusă este logică, pe care un număr este introdus după cum este necesar, etc.

Un cod de mai jos este codul JavaScript de bază necesar pentru a încorpora validarea într-o formă:

<form action="" method="" name="" onsubmit="return validacion()"> ...</form>

și schema de funcții validacion() este după cum urmează:

function validacion() { if (condicion que debe cumplir el primer campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } else if (condicion que debe cumplir el segundo campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } ... else if (condicion que debe cumplir el último campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } // Si el script ha llegado a este punto, todas las condiciones // se han cumplido, por lo que se devuelve el valor true return true;}

Funcționarea acestei tehnici de validare se bazează pe comportamentul Evenimentul onsubmit prin JavaScript. Ca și alte evenimente cum ar fi onclick și , variază comportamentul în funcție a valorii care este returnată.

Astfel, dacă evenimentul onsubmit returnează valoarea true, formularul Trimite Cum aș face în mod normal. Cu toate acestea, dacă evenimentul onsubmit returnează valoarea , forma nu este trimisă. Cheia acestei tehnici este de a verifica fiecare dintre elementele formularului. Atunci când există un element incorect, valoarea este returnată. Dacă nu se găsesc erori, valoarea true este returnată.

Prin urmare, evenimentul iv ID = „19026AD6C7” este definit în primul rând. a formularului ca:

onsubmit="return validacion()"

„> , forma va fi trimisă numai la server dacă această funcție returneazătrue. În cazul în care funcțiavalidacion()returnează , forma va rămâne nesemnificativă.

în cadrul funcției validacion() Toate condițiile impuse de aplicație sunt verificate. Atunci când o condiție nu este îndeplinită, este returnat și, prin urmare, forma nu este trimisă. Dacă se ajunge la sfârșitul funcției, toate condițiile au fost îndeplinite corect, așa că este returnată true și formularul este trimis.

notificarea de Erorile comise depind de proiectarea fiecărei aplicații. În codul exemplului anterior, mesajele sunt afișate pur și simplu utilizând funcția alert() indicând eroarea produsă. Cele mai bune aplicații web proiectate arată fiecare mesaj de eroare de lângă elementul de formă corespunzător și, de obicei, afișați un mesaj principal care indică faptul că formularul conține erori.

Odată ce schema de funcții este definită validacion(), codul corespunzător tuturor controalelor efectuate pe elementele formularului trebuie adăugat la această funcție. În continuare, sunt afișate unele dintre cele mai comune validări ale câmpurilor de formular.

7.3.1. Validați un câmp de text obligatoriu

Este pe punctul de a forța utilizatorul să introducă o valoare într-un text sau o cartelă de text în care este obligatorie. Condiția din JavaScript poate fi indicată ca:

astfel încât un câmp de text obligatoriu să fie finalizat, se verifică că Valoarea introdusă este validă, că numărul de caractere introduse este mai mare decât zero și că au fost introduse numai spații goale.

cuvântul rezervat null este o valoare specială care este folosit pentru a indica „nici o valoare”. Dacă valoarea unei variabile este null, variabila nu conține nici o valoare a obiectului, matrice, numerică, șir de text sau boolean.

A doua parte a afecțiunii necesită ca textul introdus să aibă o lungime mai mare decât caracterele zero, adică, care nu este un text gol.

În cele din urmă, a treia parte din Condiția iv id = „8d4e53b422” Forțele Valoarea introdusă de utilizator nu numai formată de spațiile goale. Această verificare se bazează pe utilizarea „expresiilor regulate”, o resursă obișnuită în orice limbă de programare, dar că datorită complexității sale mari, acestea nu vor fi studiate. Prin urmare, este necesar doar să copiați literalmente această condiție, luând o atenție deosebită să nu modificați niciun caracter al expresiei.

H3> 7.3.2. Validarea unui câmp de text cu valori numerice

Este vorba despre legarea utilizatorului să introducă o valoare numerică într-o casetă de text. Condiția JavaScript constă din:

valor = document.getElementById("campo").value;if( isNaN(valor) ) { return false;}

Dacă conținutul variabilei valor Nu este un număr valid, condiția nu este îndeplinită. Avantajul utilizării funcției interne isNaN() este că simplifică controalele, deoarece JavaScript este responsabil pentru luarea în considerare a zecimalelor, semnelor etc.

sub unele Rezultatele funcției isNaN()

902d2581fc „>

7.3.3 sunt afișate. Validați-vă că este selectată o opțiune dintr-o listă

, este vorba despre legarea utilizatorului pentru a selecta un element dintr-o listă derulantă. Următorul cod JavaScript vă permite să îl realizați:

din proprietatea , se verifică dacă indexul opțiunii selectate este valabil și este, de asemenea, diferit de zero. Prima opțiune din listă (- Selecciona un valor –) nu este validă, astfel încât valoarea este permisă pentru această proprietate .

7.3.4. Validați o adresă de e-mail

Este vorba despre legarea utilizatorului să introducă o adresă de e-mail cu un format valid. Prin urmare, ceea ce este verificat este că adresa pare valabilă, deoarece nu este verificată dacă este un cont de e-mail real și operațional. Condiția JavaScript constă din:

div> iv id = „d81d93094f”

Verificarea se face din nou prin expresii regulate, deoarece adresele de e-mail valide pot fi foarte diferite. Pe de altă parte, deoarece standardul care definește formatul adreselor de e-mail este foarte complex, expresia regulată anterioară este o simplificare. Deși această regulă validează majoritatea adreselor de e-mail utilizate de utilizatori, aceasta nu acceptă toate formatele de e-mail valide diferite.

7.3.5. Validați o dată

Datele sunt, de obicei, cele mai complicate câmpuri de formă pentru a valida de multitudinea de moduri diferite în care pot fi introduse. Următorul cod presupune că anul a fost obținut într-un fel, luna și ziua introdusă de utilizator:

var ano = document.getElementById("ano").value;var mes = document.getElementById("mes").value;var dia = document.getElementById("dia").value;valor = new Date(ano, mes, dia);if( !isNaN(valor) ) { return false;}

Funcția Date(ano, mes, dia) este o funcție internă JavaScript care vă permite să construiți date din an, luna și data datei. Este foarte important să rețineți că numărul lunii este indicat de la la , fiind luna ianuarie și luna decembrie. Zilele lunii urmează o altă numerotare, deoarece minimul permis este 1 și maxim 31.

Validarea este de a încerca să construiți o dată cu datele furnizate de utilizator. Dacă datele utilizatorului nu sunt corecte, data nu poate fi construită corect și, prin urmare, validarea formei nu va fi corectă.

7.3.6. Validarea unui număr de DNI

Este vorba despre verificarea faptului că numărul furnizat de utilizator corespunde unui număr valid de document național de identitate sau DNI. Deși pentru fiecare țară sau regiune, cerințele documentului de identitate ale persoanelor pot varia, se arată mai jos un exemplu generic adaptabil este prezentat mai jos. Validarea nu trebuie să verifice numai că numărul este format din opt cifre și o literă, dar este de asemenea necesar să se verifice dacă litera indicată este corectă pentru numărul introdus:

valor = document.getElementById("campo").value;var letras = ;if( !(/^\d{8}$/.test(valor)) ) { return false;}if(valor.charAt(8) != letras) { return false;}

Primul cec asigură că formatul numărului introdus este corect, adică este format din 8 numere urmate și o scrisoare. Dacă scrisoarea este la începutul numerelor, verificarea ar fi /^\d{8}$/. Dacă în loc de opt numere și o scrisoare, sunt necesare zece numere și două litere, verificarea ar fi /^\d{10}{2}$/ și așa mai departe.

A doua verificare aplică algoritmul de calcul al literei DNI și o compară cu litera furnizată de utilizator. Algoritmul fiecărui document de identificare este diferit, astfel încât această parte a validării trebuie adaptată convenabil.

7.3.7. Validarea unui număr de telefon

Numerele de telefon pot fi indicate în moduri foarte diferite: cu prefixul național, cu prefix internațional, grupate de perechi, separarea numerelor cu scripturi etc.

următorul script Consideră că un număr de telefon constă din nouă cifre consecutive și fără spații sau scripturi între cifre:

Starea lui JavaScript se bazează pe utilizarea expresiilor regulate, care verifică dacă valoarea indicată este o succesiune de nouă numere consecutive. Mai jos sunt alte expresii regulate care pot fi utilizate pentru alte formate de numere de telefon:

7.3.8. Validați că a fost selectată o casetă de selectare

dacă trebuie selectat un element de tip de selectare, JavaScript vă permite să îl verificați foarte ușor:

elemento = document.getElementById("campo");if( !elemento.checked ) { return false;}

Dacă este să verificați dacă a fost selectată o casetă de selectare a formularului, este mai ușor să utilizați o buclă:

formulario = document.getElementById("formulario");for(var i=0; i<formulario.elements.length; i++) { var elemento = formulario.elements; if(elemento.type == "checkbox") { if(!elemento.checked) { return false; } }}

7.3.9. Validați-vă că un radiobutton a fost selectat

Deși este un caz similar cu cel al casetei de selectare, validarea radiobuttonului prezintă o diferență importantă: în general, verificarea efectuată este că utilizatorul are a selectat un radiobutton al celor care formează un anumit grup. Folosind JavaScript, este ușor de determinat dacă a fost selectat un grup de radiobutton:

opciones = document.getElementsByName("opciones");var seleccionado = false;for(var i=0; i<opciones.length; i++) { if(opciones.checked) { seleccionado = true; break; }}if(!seleccionado) { return false;}

Exemplul anterior execută toate radioobuttonul Ele formează un grup și verifică elementul după element dacă a fost selectat. Când se găsește primul radioobutton selectat, acesta părăsește bucla și este indicat faptul că cel puțin unul a fost selectat.