Høgskolen i Oslo Webprogrammering Java-scripting 2 Klientvalidering

I dag l Hvordan få en bedre klientvalidering via Java- script l Gjennomgang av kode l Oppgaveløsning på lab –Prosjekt!!

Klientsideprogrammering med JavaScript l Et JavaScript er et lite program som blir utført ”i en nettside”. l JavaScript kan brukes for å lage interaktive nettsider. l Noen anvendelser: –Inndatavalidering –Utføre beregninger –Menyer –Visuelle effekter l Inndatavalidering –Kontroll på klienten gir umiddelbar tilbakemelding til bruker. –Visse kontroller vil bli gjentatt på tjenersiden

Samspillet klient / tjener Hent C://…/index.php Svar : Kildekode i form av HTML 1) 2) PHP Tolker ”; ?> document.write( ”Hei Java" ); Hei PHP document.write( ”Hei Java" ); 3) Hei PHP Hei Java Java Script Tolker

Validering l Kilent-validering i Javascript l Server-validering i PHP

Bruk av RegEx i Javascript l Eller enklere (ingen new på klassen) regEx = /^[a-zA-ZøæåØÆÅ. ] {2,20}$/; OK = regEx.test(navn); if ( !OK ) // feil regEx = new RegExp("^[a-zA-ZøæåØÆÅ. ]{2,20}$"); OK = regEx.test(navn); if ( !OK ) // feil

RegEx i Javascript forts. function valider_navn () { regEx = /^[a-zA-ZøæåØÆÅ.\- ]*$/; OK = regEx.test(document.skjema.navn.value); if ( !OK ) { return false; } return true; }

Kalle valideringsfunksjonen function valider_navn () { regEx = /^[a-zA-ZøæåØÆÅ.\- ]*$/; OK = regEx.test(document.skjema.navn.value); if ( !OK ) { return false; } return true; }

En valideringsfunksjon per felt function valider_navn () function valider_adresse () function valider_telefonnr ()

Feilmeldinger etter feltet Navn: <input type="text" name="navn" onchange ="valider_navn()" /> * * Indikerer at feltet er obligatorisk

Legg ut feilmeldinger i div function valider_navn () { regEx = /^[a-zA-ZøæåØÆÅ.\- ]*$/; OK = regEx.test(document.skjema.navn.value); if ( !OK ) { document.getElementById(”feilNavn”).innerHTML=”Feil”; return false; } document.getElementById(”feilNavn”).innerHTML=””; return true; } *

Eksempel

Må også validere OnSubmit function valider_navn () function valider_adresse () function valider_telefonnr () function valider_alt() { valider_navn (); valider_adresse (); valider_telefonnr (); // return true eller false }

Må også validere på server l Dersom Javascript blir slått av i nettleseren: l Må også validere på server i PHP! $navn = $_REQUEST[”navn”]; If( ! preg_match(”/^[a-zA-ZøæåØÆÅ.\- ]*$/",$navn)) { echo ”Navnet er feil!”; } else { // OK, lagre dataene i database! (endelig!) }