| PROIECTARE SITE WEB > DOCUMENTATIE - JAVASCRIPT - Validare
date in formulare HTML |
Proiectare Site si Web Design - JavaScript
Validarea Datelor din Formularele HTML
Formularele (Forms) sunt foarte des intalnite pe Internet.
Datele introduse in formular (input) sunt de regula trimise catre
server sau prin posta electronica spre un cont de e-mail. Dar putem
fi siguri ca datele intoduse de catre utilizator in formular pentru
a fi trimise sunt si corecte? Cu ajutorul JavaScript datele introduse
intr-un formular pot fi cu usurinta verificate inainte de a fi transmise
prin Internet. Dorim sa demonstram in aceasta sectiune cum pot fi
formularele verificate (validate).
Mai intai sa creem un script simplu. Formularul din pagina
HTML va contine 2 campuri text. Utilizatorul trebuie sa introduca
numele in primul camp si adresa de email in cel de-al doilea. Putem
introduce orice in formular si apoi avem grija sa apasam butonul de
trimitere. De asemenea putem incerca sa nu introducem nimic si sa
apasam butonul.
Codul este urmatorul:
<FORM
name=first>Introduceti numele dumneavoastra:<BR><INPUT
name=text1>
<INPUT onclick=test1(this.form) type=button value="Test
Input" name=button1>
<P>Introduceti adresa dumneavostra de email:<BR><INPUT
name=text2>
<INPUT onclick=test2(this.form) type=button value="Test
Input" name=button2>
</P></FORM>
Rezultatul este urmatorul:
In cazul primului element de formular se va
returna un mesaj de eroare daca nu este nimic introdus. Desigur, acest
tip de verificare insa nu impiedica utilizatorul sa introduca un nume
fictiv! Browserul accepta si numere. Asa ca daca veti introduce "17"
va fi returnat mesajul "Hi 17!". Se pare ca nu este cel
mai bun mod de verificare.
Cel de-al doilea element de formular este mai sofisticat. Incercati
sa introduceti un sir simplu - numele dumneavostra de exemplu - in
casuta pentru e-mail. Nu o sa treaca testul (decat daca ati avea caracterul
"@" in numele dumneavostra). Criteriul de baza pentru a
accepta datele introduse ca si adresa de e-mail este ca aceste date
trebuie sa contina caracterul "@". Un sigur "@"
ajunge dar, desigur, nu este o conditie suficienta ci numai necesara.
Toate adresele de e-mail contin "@" asa ca este normal sa
cautam "@" in adresa (printre altele).
Cum arata scriptul pentru aceste doua elemente?
Iata-l:
<html>
<head>
<script language="JavaScript">
<!-- Hide
function
test1(form) {
if (form.text1.value == "")
alert("Please enter a string!")
else {
alert("Hi "+form.text1.value+"! Form input ok!");
}
}
function
test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("No valid e-mail address!");
else alert("OK!");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test
Input" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test
Input" onClick="test2(this.form)">
</body>
</html>
Mai intai sa ne uitam putin la codul HTML din corpul
documentului. Este vorba doar de creerea a doua elemente text si doua
butoane. Butoanele apeleaza functiile test1(...) sau
test2(...) in functie de ce buton este apasat. Transmitem
this.form catre functii pentru a adresa elementele din
functii.
Functia test1(form) verifica daca sirul este
gol. Aceasta se realizeaza prin intermediul secventei "if
(form.text1.value == "")...", "form"
fiind variabila care primeste valoarea "this.form". Putem
obtine valoarea elementului introdus prin folosirea "value"
in combinatie cu "form.text1". Pentru a vedea daca sirul
este gol il comparam cu "". Daca datele introduse sunt egale
cu "" atunci nu a fost introdus nimic. Utilizatorul va primi
un mesaj de eroare. Daca ceva este introdus, utilizatorul va primi
un mesaj OK.
Problema care poate aparea aici este ca utilizatorul poate introduce
numai spatii. Acestea sunt consemnate ca un input valid! Daca doriti,
puteti verifica aceste posibilitati si sa le excludeti. Credem ca
este destul de simplu tinand cont de restrictiile prevazute in cazul
nostru.
Sa aruncam o privire si peste functia test2(form). Aceasta
functie compara sirul de intrare cu un sir gol "" pentru
a fi siguri ca a fost introdus ceva. Dar mai trebuie ceva adaugat
comenzii "if". Anume operatorul "||" numit si
operatorul OR. In acest fel comanda "if" verifica daca prima
sau cea de-a doua comparare este adevarata. Daca cel putin una dintre
ele este adevarata, atunci comanda "if" primeste valoarea
"adevarat" si urmatoarea comanda este executata. Asadar
vom obtine un mesaj de eroare numai daca sirul este gol sau daca nu
exista caracterul @ in sirul nostru.
|
Creare
si actualizare site