Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

Høgskolen i Oslo Webprogrammering Java-scripting 2 Klientvalidering.

Liknende presentasjoner


Presentasjon om: "Høgskolen i Oslo Webprogrammering Java-scripting 2 Klientvalidering."— Utskrift av presentasjonen:

1 Høgskolen i Oslo Webprogrammering Java-scripting 2 Klientvalidering

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

3 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

4 Samspillet klient / tjener Hent http:://localhost/index.php 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

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

6 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

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

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

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

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

11 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; } *

12 Eksempel

13 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 }

14 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!) }


Laste ned ppt "Høgskolen i Oslo Webprogrammering Java-scripting 2 Klientvalidering."

Liknende presentasjoner


Annonser fra Google