Javascript: verificarea unui formular


Închei astăzi scurta serie ce a mai inclus Controlează ce se tastează şi Verificarea emailurilor, cu problema generică a verificării unui formular. Am văzut că putem controla ca de exemplu într-un câmp gen „anul naşterii” să se introducă doar cifre. Am văzut că putem verifica dacă textul introdus pentru o adresă de email respectă formatul unei adrese de email. Dar mai pot fi şi alte verificări, şi acestea se fac de regulă pe evenimentul onSubmit. Aceasta înseamnă că în tagul de formular adăugăm ceva de genul:

<form … onSubmit=”return verificaFormular(this);”>

În funcţia verificaFormular putem face testele, inclusiv cel privind adresa de email. La sfârşitul articolului am inclus codul integral pentru o pagină cu un formular fictiv cu trei câmpuri: nume, email şi vârstă. În funcţia verificaFormular analizăm pe rând:

– nume necompletat? formular.nume.value==””
– email necompletat? formular.email.value==””
– email scris incorect? validareEmail(formular.email.value)
– vârstă necompletată? formular.varsta.value==””
– vârstă „anormală”? formular.varsta.value>100

În fiecare dintre cazurile de eroare indicăm eroarea cu alert, poziţionăm mouse-ul pe câmpul completat eronat cu focus() şi returnăm false pentru ca formularul să nu se execute.

Pe baza acestui exemplu puteţi construi desigur formulare mai complexe. Nu am inclus liste sau butoane radio/checkbox… poate într-un alt articol.

 

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Transitional//EN”>

<html>
<head>
<title>Demonstratie</title>
</head>
<body>

<script language=”JavaScript” type=”text/javascript”>
<!–
    function verificaFormular(formular){
        if(formular.nume.value==””){
            alert(„Nu fiti rusinos! Spuneti-ne cum va cheama!”)
            document.demo.nume.focus();
            return false;
        }
        if(formular.email.value==””){
            alert(„Nu fiti secretos! Scrieti emailul Dvs!”)
            document.demo.email.focus();
            return false;
        }
        if(validareEmail(formular.email.value)){
            alert(„Nu ati scris bine adresa de email!”);
            document.demo.email.focus();
            return false;
        }
        if(formular.varsta.value==””){
            alert(„Nu va ascundeti varsta! Va rugam sa o scrieti!”)
            document.demo.varsta.focus();
            return false;
        }
        if(formular.varsta.value>100){
            alert(„Nu se poate sa aveti peste 100 de ani!”)
            document.demo.varsta.focus();
            return false
        }
        return true
    }
    function validareEmail(adremail) {
        var exclude=/[^@\-\.\w]|^[_@\.\-]|[\._\-]{2}|[@\.]{2}|(@)[^@]*\1/;
        var check=/@[\w\-]+\./;
        var checkend=/\.[a-zA-Z]{2,3}$/;
        if(((adremail.search(exclude) != -1)||(adremail.search(check)) == -1)||(adremail.search(checkend) == -1))
            return true;
        else
            return false;
    }
    function esteCifra(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
        }
//–>
</script>

<form name=”demo” action=”prelucrare.php” method=post onSubmit=”return verificaFormular(this);”>
<table align=center cellpadding=3 cellspacing=0 border=0>
<tr><td>Nume:</td><td><input type=text name=nume></td></tr>
<tr><td>Email:</td><td><input type=text name=email></td></tr>
<tr><td>Vârstã:</td><td><input type=text name=varsta onkeypress=”return esteCifra(event)”></td></tr>
<tr><td></td><td><input type=submit value=”OK”></td></tr>
</table>
</form>

</body>
</html>


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *