Sådan udføres Basic JavaScript Validation - dummies

Du kan gøre som grundlæggende validering ved hjælp af JavaScript til forskellige inputtyper. Denne første øvelse opretter HTML til webformularen. Når du har gennemført denne øvelse, har du JavaScript-validering udført til en formular.

1. Åbn din teksteditor og opret en ny tom fil.

2. Indsæt følgende HTML-kode:

   En formular Brugerinformation Navn: * Navn er påkrævet 
   
   By: 
   Stat: Alabama California Colorado Florida Illinois New Jersey New York Wisconsin > Postnummer: 
   E-mailadresse: * E-mail er påkrævet 
   Telefonnummer: Format: xxx-xxx-xxxx 
   Nummertype: Arbejdshjem Vælg venligst en indstilling 
   Adgangskode: * Kodeord 
   Bekræft kodeord: * Passwords matcher ikke 
   Gem filen som formular. php i din dokument rod. 
   

3. localhost
4. / formular. php. HTML ser temmelig dårligt ud, med fejlformede formularfelter og fejlvisning. Du kan rette det med CSS.

   

   Opret en ny tekstfil i din editor og indtast følgende CSS:

5. form fieldset {display: inline-block;}. radioButton {float: none; display: inline; margin-højre: 0. 1em; bredde: 2em;} formelabel {bredde: 8em; margen-højre: 1em; flyde: venstre; tekst-align: højre; display: block;} form input {width: 15em;} #submit {margin-top: 2em; flyde: højre;}. errorClass {baggrundsfarve: # CC6666;} #errorDiv {kol eller: rød;}. errorFeedback {synlighed: hidden;}

   Gem filen som formular. css i din dokument rod.
   

6. Denne fil er allerede henvist til i HTML'en, du oprettede i Trin 2, så ingen andre ændringer er nødvendige for den pågældende fil.

   Genindlæs formularen. php-filen i din browser.

7. Med HTML og CSS på plads, er det tid til at tilføje nogle JavaScript.

   

   Bemærk: Du opbygger valideringskoden senere i dette kapitel. For øjeblikket tilføjer du blot en grundlæggende JavaScript-fil.

   Opret en ny tekstfil i din editor.

8. Anbring følgende JavaScript i filen.

9. $ (dokument). klar (funktion () {alarm ("hej");});

   Gem filen som formular. js i din dokument rod.
   

10. Genindlæs formular. php i din webbrowser.

11. Klik på OK for at afvise dialogen.

    

12. Selvom advarselsdialogen ikke er noget nyt, viser det sig, at du har knyttet HTML og JavaScript korrekt til denne øvelse. Herfra kan du arbejde på at tilføje JavaScript-validering til formularen. Før du gør det, kan du finde det nyttigt at nedbryde nogle af HTML og CSS, du har oprettet.