Cum se implementează validarea formularului în partea clientului cu JavaScript

Cum se implementează validarea formularului în partea clientului cu JavaScript

JavaScript este unul dintre cele mai populare și versatile limbaje de programare cu care puteți începe astăzi. Se spune despre acest limbaj de programare că este limbajul web și este esențial pentru a adăuga interactivitate site-urilor dvs. web.





Elementul formular este unul dintre cele mai utilizate elemente HTML de pe site-uri web. Aceste formulare primesc date de la utilizator și le procesează în browser sau server. Cu toate acestea, este important să validați aceste date pentru a aborda problemele de securitate și erorile nedorite.



Înțelegerea manipulării DOM

Înainte de a continua implementarea validării formularului pe partea de client cu JavaScript, este esențial să înțelegem Modelul de obiect document, cunoscut în mod obișnuit ca „DOM”. DOM este un API standardizat care permite JavaScript să interacționeze cu elementele de pe o pagină web HTML.





Aflați mai multe: Eroul ascuns al site-urilor web: Înțelegerea DOM

Pentru a adăuga ascultători de evenimente și pentru a prelua datele introduse de utilizator, va trebui să înțelegeți elementele de bază ale manipulării DOM. Iată un exemplu care explică modul în care puteți modifica conținutul paginii web utilizând API-ul DOM și JavaScript:









Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';

În codul de mai sus,

eticheta are un ID de paragraf . În timp ce scrieți codul JavaScript, puteți accesa acest element apelând document.getElementById („paragraf”) metoda și manipularea valorii acesteia.

Acum că ați înțeles elementele de bază ale manipulării DOM, haideți să implementăm validarea formularului.



Validarea formularului cu JavaScript

Există diferite tipuri de intrări pe care le puteți lua de la un utilizator. Tipul de text, tipul de e-mail, tipul parolei, butoanele radio și casetele de selectare sunt unele dintre cele mai frecvente pe care le puteți întâlni. Datorită acestei mari majorități a tipurilor de intrare, va trebui să utilizați o logică diferită pentru a valida fiecare dintre ele.

Înainte de a intra în validare, să luăm un moment pentru a înțelege formularele HTML și importanța acestora. Formularele HTML sunt unul dintre principalele moduri în care interacționați cu site-ul web, deoarece vă permit să introduceți datele, să aplicați modificări, să invocați ferestre pop-up, să trimiteți informații unui server și multe altele.



poți juca jocuri ps4 pe ps3

Codul HTML elementul este utilizat pentru a crea aceste forme orientate către utilizator. Iată cum puteți valida intrările unui formular HTML:

1. Validare e-mail

Indiferent dacă creați un sistem de autentificare sau pur și simplu colectați e-mailuri de utilizator pentru buletinul dvs. informativ, este important să validați e-mailul înainte să îl puteți stoca în baza de date sau să îl procesați. Pentru a verifica dacă un e-mail îndeplinește toate condițiile cerute, puteți utiliza un expresie uzuala .

HTML:

JavaScript:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. Validarea parolei

Parolele sunt un element crucial de date care necesită un tip special de validare pentru a asigura securitatea acestuia. Luați în considerare un formular de înscriere care are două câmpuri: parola și câmpurile de confirmare a parolei. Pentru a valida aceste perechi de intrări, iată câteva lucruri pe care trebuie să le luați în considerare:

  • Parola trebuie să aibă mai mult de 6 caractere.
  • Valoarea parolei și câmpul de confirmare a parolei trebuie să fie aceleași.

HTML:


JavaScript:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3. Validare intrare radio

Intrarea radio HTML este un tip special de element de control grafic care permite utilizatorului să aleagă doar una dintr-un set predefinit de opțiuni care se exclud reciproc. Un caz de utilizare obișnuit a unei astfel de intrări ar fi pentru selectarea sexului. Pentru a valida o astfel de intrare, va trebui să verificați dacă este selectată cel puțin una dintre ele.

Acest lucru poate fi realizat folosind operatori logici cum ar fi AND ( && ) si nu ( ! ) operator în acest mod:

HTML:

Male

Female

Others

JavaScript:

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4. Selectați Validare intrare

The Elementul HTML este utilizat pentru a crea o listă derulantă. The etichete în interiorul element definește opțiunile disponibile în lista derulantă. Fiecare dintre acestea etichetele au un atribut de valoare asociat.

cum se schimbă parola wifi Windows 10

Pentru opțiunea implicită sau inițială, puteți seta valoarea sa ca un șir gol, astfel încât să fie considerat o opțiune nevalidă. Pentru toate celelalte opțiuni, setați un atribut de valoare adecvat. Iată un exemplu despre cum puteți valida un element de intrare:

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

cum să ștergeți linia orizontală în cuvânt
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Validare casetă de selectare

Elementele de intrare ale casetei de selectare tip sunt redate în mod implicit ca casete care sunt bifate sau bifate când sunt activate. O casetă de selectare vă permite să selectați valori unice pentru trimitere într-un formular. Casetele de selectare sunt o alegere populară pentru introducerea „acceptă termenii și condițiile”.

Pentru a afla dacă o casetă de selectare este bifată sau nu, puteți accesa atributul bifat din intrarea casetei de selectare. Iată un exemplu:

HTML:


I agree to the terms and conditions

JavaScript:

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}

Prevenirea este mai bună decât vindecarea

Este întotdeauna recomandat să validați toate intrările pe care le primiți de la un vizitator pentru a oferi o experiență sigură. Hackerii încearcă întotdeauna să introducă date rău intenționate în câmpurile de intrare pentru a efectua atacuri de cross-site scripting și injecții SQL.

Acum că înțelegeți cum să vă validați intrările HTML, de ce să nu încercați construind un formular și implementând strategiile pe care le-ați văzut mai sus?

Acțiune Acțiune Tweet E-mail Cum se creează un formular în HTML

Permiteți utilizatorilor să introducă date pe site-urile dvs. web cu formulare HTML.

Citiți în continuare Subiecte asemănătoare
  • Programare
  • HTML
  • JavaScript
  • Dezvoltare web
  • Tutoriale de codare
Despre autor Nitin Ranganath(31 articole publicate)

Nitin este un dezvoltator avid de software și un student în ingineria computerelor care dezvoltă aplicații web folosind tehnologii JavaScript. Lucrează ca dezvoltator web independent și îi place să scrie pentru Linux și Programare în timpul liber.

Mai multe de la Nitin Ranganath

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona