JavaScript

Validare formular Javascript

Validare formular Javascript

Validarea formularelor este partea de bază și cea mai importantă a procesului de dezvoltare web. De obicei, validarea formularului se face pe partea de server. Validarea formularului ajută la afișarea mesajelor de eroare către utilizator dacă sunt furnizate date inutile sau greșite sau dacă un câmp obligatoriu este lăsat gol. Dacă serverul găsește vreo eroare, aruncă înapoi acea eroare; apoi, afișăm mesajul de eroare utilizatorului. Dar putem folosi javascript în front-end pentru a valida datele formularului și pentru a afișa erori imediat. În acest articol, vom învăța validarea formularului de bază în javascript. Deci, să trecem direct la exemple și să vedem cum putem face asta în javascript.

Exemple

În primul rând, presupunem un formular cu numele „testForm”, în care avem un câmp de intrare cu eticheta „Nume utilizator” și un tip de intrare se trimite în fișierul nostru HTML. În eticheta formular, am creat un eveniment onsubmit, în care facem închiderea și returnăm o funcție validateFunc ().






În fișierul script, vom scrie definiția funcției validateFunc (), care va fi executată de fiecare dată când utilizatorul apasă butonul de trimitere. În acea funcție, vom valida câmpul de introducere a numelui de utilizator. Presupunem că vrem să validăm fie câmpul de nume de utilizator este gol, fie nu, atunci când utilizatorul apasă butonul de trimitere.

Deci, pentru a valida câmpul de nume de utilizator. Mai întâi atribuim o variabilă documentului.testForm, doar pentru a da un aspect curat și ușor de înțeles codului. Apoi, în definiția funcției, vom scrie codul pentru validare. Vom scrie o declarație if pentru a verifica câmpul formularului gol. Dacă câmpul pentru numele de utilizator este gol, vom afișa o casetă de alertă pentru a afișa eroarea, ne vom concentra din nou pe câmpul pentru numele de utilizator și vom returna fals, astfel încât formularul să nu fie trimis. În caz contrar, dacă trece verificarea și datele sunt validate, vom reveni la funcție.

var theForm = document.testForm;
// Cod de validare formular
function validationFunc ()
if (theForm.Nume.valoare == "")
alert („numele este gol”);
forma.Nume.focus ();
returnează fals;

retur (adevărat);

După ce am scris tot acest cod. Dacă rulăm codul și facem clic pe butonul de trimitere fără a scrie nimic în câmpul formularului.

După cum puteți observa în captura de ecran atașată mai jos, aceasta aruncă o eroare în caseta de alertă.

Acesta este un exemplu foarte de bază, dar bun pentru a începe cu implementarea validării formularului. Pentru implementare ulterioară, cum ar fi validări de formulare multiple sau doriți să verificați și lungimea caracterelor.

În acest scop, presupunem mai întâi două câmpuri de formular din eticheta formularului cu eticheta „e-mail” și „parolă” în fișierul nostru HTML.













Pentru validarea în javascript, vom pune din nou o declarație if pentru validarea câmpurilor formularului de e-mail și parolă în definiția funcției fișierului script. Să presupunem că dorim să aplicăm mai multe validări pe câmpul de e-mail, cum ar fi câmpul să nu fie gol, iar lungimea acestuia să nu fie mai mică de 10 caractere. Deci, putem folosi SAU „||” în declarația if. Dacă apare oricare dintre aceste erori, va apărea o casetă de alertă cu mesajul de eroare pe care dorim să îl afișăm, se va concentra pe câmpul formularului de e-mail și va reveni la funcția fals. În mod similar, dacă dorim să aplicăm verificarea lungimii caracterelor pe câmpul parolei, o putem face.

var theForm = document.testForm;
// Cod de validare formular
function validationFunc ()
if (theForm.Nume.valoare == "")
alert („numele este gol”);
forma.Nume.focus ();
returnează fals;

if (theForm.e-mail.valoare == "" || forma.e-mail.valoare.lungime < 10)
alertă („E-mailul este inadecvat”);
forma.e-mail.focus ();
returnează fals;

if (theForm.parola.valoare.lungime < 6)
alert („Parola trebuie să aibă 6 caractere”);
forma.parola.focus ();
returnează fals;

retur (adevărat);

După ce ați scris tot acest cod, reîncărcați pagina pentru a avea cod actualizat. Acum, fie lăsăm un câmp de e-mail gol, fie scriem un e-mail mai mic de 10 caractere. În ambele cazuri, va apărea o eroare „E-mailul este inadecvat”.

Deci, așa putem aplica validarea formularului de bază în JavaScript. De asemenea, putem aplica validarea datelor din partea clientului folosind Regex sau scriind propria noastră funcție personalizată. Să presupunem că dorim să aplicăm validarea datelor pe câmpul de e-mail. Regex-ul ar fi astfel pentru validarea unui e-mail.

if (/ ^ [a-zA-Z0-9.!# $% & '* + / =?^ _ '| ~ -] [e-mail protejat] [a-zA-Z0-9 -] + (?: \.[a-zA-Z0-9 -] +) * $ /.
test (theForm.e-mail.valoare))
alertă („E-mailul este inadecvat”);
forma.e-mail.focus ();
returnează fals;

Aceasta a fost doar o demonstrație de bază a validării datelor folosind regex. Dar, cerul este deschis pentru a zbura.

Concluzie

Acest articol acoperă validarea formularului de bază în javascript. De asemenea, am încercat și ne-am strecurat în validarea datelor folosind regex. Dacă doriți să aflați mai multe despre regex, avem un articol dedicat legat de regex pe linuxhint.com. Pentru a învăța și a înțelege conceptele javascript și conținut mai util ca acesta, continuați să vizitați linuxhint.com. Mulțumesc!

Remap your mouse buttons differently for different software with X-Mouse Button Control
Maybe you need a tool that could make your mouse's control change with every application that you use. If this is the case, you can try out an applica...
Microsoft Sculpt Touch Wireless Mouse Review
I recently read about the Microsoft Sculpt Touch wireless mouse and decided to buy it. After using it for a while, I decided to share my experience wi...
AppyMouse On-screen Trackpad and Mouse Pointer for Windows Tablets
Tablet users often miss the mouse pointer, especially when they are habitual to using the laptops. The touchscreen Smartphones and tablets come with m...