Completarea formularelor Javascript. Crearea de formulare HTML. Formular de înregistrare pas cu pas folosind jQuery

Acest tutorial descrie cum se creează formular JavaScript, care verifică dacă vizitatorul a completat corect câmpurile înainte de a trimite datele către server. Mai întâi vom explica de ce validarea formularelor este o tehnică utilă, apoi vom construi un exemplu simplu care explică cum funcționează.

Validarea formularului este un proces în care datele din formular sunt verificate înainte de procesare. De exemplu, dacă formularul dvs. are un câmp în care utilizatorul trebuie să îl introducă Adresa de e-mail, vă recomandăm să verificați dacă câmpul este complet înainte de a procesa în continuare formularul.

Există două metode principale de verificare a completării unui formular: pe partea de server (folosind scripturi CGI, ASP etc.) și pe partea client (de obicei folosind JavaScript). Validarea pe partea de server este mai sigură, dar în cele mai multe cazuri necesită un cod mai complex, în timp ce validarea pe partea client este mai simplă și mai rapidă (browserul nu trebuie să se conecteze la server pentru a valida formularul, astfel încât utilizatorul primește un răspuns imediat dacă câmpuri lipsă care trebuie completate).

Validarea formularului pe partea clientului. De obicei, se realizează folosind un script JavaScript încorporat.

Validarea formularului pe partea serverului. De obicei, se face folosind un script CGI sau ASP.

ÎN această lecție vom construi formă simplă cu validare partea clientului cu folosind JavaScript. Apoi îl puteți adapta în funcție de nevoile dvs.

Să construim un formular simplu cu verificarea umplerii folosind un script. Acest formular are un câmp de text „Numele tău” și un buton pentru trimiterea datelor. Scriptul nostru verifică dacă utilizatorul și-a introdus numele înainte de a trimite datele către server.

Deschideți formularul și vedeți-l în acțiune. Încercați să faceți clic pe butonul „Trimiteți datele” fără a introduce nimic în câmpul „Numele dumneavoastră”.

Pagina conține o funcție JavaScript numită validate_form(). Verifică dacă formularul este complet. să ne uităm mai întâi la formă.

Prima parte a formularului este eticheta de formular

Formularul se numește contact_form. Cu ajutorul acestuia, vom accesa formularul din funcția de validare JavaScript.

Formularul folosește o metodă post pentru a trimite date într-un fișier htm stub, care afișează pur și simplu un mesaj. De fapt, puteți trimite date către dvs Script CGI, pagina ASP etc. (de exemplu pentru a trimite mail).

Eticheta de formular conține, de asemenea, un atribut onsubmit pentru Apel JavaScript funcțiile de validare validate_form() când se face clic pe butonul Trimitere date. Funcția returnează o valoare booleană, pentru care true înseamnă „verificarea a avut succes” și false înseamnă „datele sunt în așteptare”. În acest fel, putem împiedica trimiterea datelor din formular dacă utilizatorul nu le-a completat corect.

Restul codului formularului adaugă câmpul de intrare contact_name și butonul „Trimite date”:

Te rog scrieti numele.

Numele dumneavoastră:

Funcția de validare a formularului validate_form() este încorporată în secțiunea head de la începutul paginii:

Prima linie () spune browserului ce urmează Cod JavaScript, și comentariul HTML (