Slik utfører du grunnleggende JavaScript-validering - dummies

Du kan gjøre som grunnleggende validering ved hjelp av JavaScript for en rekke inngangstyper. Denne første øvelsen oppretter HTML for webskjemaet. Når du har fullført denne oppgaven, har du JavaScript-validering gjort for et skjema.

1. Åpne tekstredigeringsprogrammet og opprett en ny, tom fil.

2. Innenfor filen, legg inn følgende HTML:

   Et skjema Brukerinformasjon Navn: * Navn kreves 
   
   By: 
   Stat: Alabama California Colorado Florida Illinois New Jersey New York Wisconsin > Postnummer: 
   E-postadresse: * E-post kreves 
   Telefonnummer: Format: xxx-xxx-xxxx 
   Nummertype: Arbeid Hjem Vennligst velg et alternativ 
   Passord: * Passord kreves 
   Verifiser passord: * Passord stemmer ikke overens 
   Lagre filen som skjema. php i dokumentroten din. 
   

3. localhost
4. / form. php. HTML ser ganske dårlig ut, med feilformede skjemafelter og feilvisning. Du kan fikse det med CSS.

   

   Opprett en ny tekstfil i editoren din og skriv inn følgende CSS:

5. formfeltsettet {display: inline-block;}. radioButton {float: none; skjerm: inline; margin-høyre: 0. 1em; bredde: 2em;} formetikett {bredde: 8em; margin-høyre: 1em; flyte: venstre; tekstjustering: høyre; display: block;} form input {width: 15em;} #submit {margin-top: 2em; flyte: høyre;}. errorClass {bakgrunnsfarge: # CC6666;} #errorDiv {kol eller: rød;}. errorFeedback {synlighet: hidden;}

   Lagre filen som skjema. css i dokumentroten din.
   

6. Denne filen var allerede referert i HTML-koden du opprettet i trinn 2, slik at ingen andre endringer er nødvendige for den filen.

   Oppdater skjemaet. php-filen i nettleseren din.

7. Med HTML og CSS på plass, er det på tide å legge til noe JavaScript.

   

   Merk: Du bygger valideringskoden senere i dette kapittelet. For øyeblikket legger du bare til en grunnleggende JavaScript-fil.

   Lag en ny tekstfil i editoren din.

8. Plasser følgende JavaScript i filen.

9. $ (dokument). klar (funksjon () {alarm ("hei");});

   Lagre filen som skjema. js i dokumentroten din.
   

10. Oppdater skjema. php i nettleseren din.

11. Klikk OK for å avvise dialogboksen.

    

12. Selv om varseldialogen selv ikke er noe nytt, viser det seg at du har koblet HTML og JavaScript riktig til denne øvelsen. Herfra kan du jobbe med å legge til JavaScript-validering i skjemaet. Før du gjør det, kan det hende du finner det nyttig å bryte ned noen av HTML og CSS som du har opprettet.