JavaScript formulär

JavaScript-formulärverifiering

HTML-formulärverifiering kan genomföras med JavaScript.

Om formulärfältet (fname) är tomt, kommer denna funktion att visa ett meddelande och returnera false för att förhindra att formuläret skickas:

JavaScript-exempel

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Namn måste fyllas i");
    return false;
  }
}

Denna funktion kan anropas vid skickande av formulär:

HTML-formulärexempel

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Namn: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Prova det själv

JavaScript kan verifiera numerisk inmatning

JavaScript används ofta för att verifiera numerisk inmatning:

Ange ett nummer mellan 1 och 10:

Prova det själv

Automatisk HTML-formulärverifiering

HTML-formulärverifiering kan utföras automatiskt av webbläsaren:

Om formulärfältet (fname) är tomt: required Egenskaper kan förhindra att detta formulär skickas:

HTML-formulärexempel

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

Prova det själv

Tips:Automatisk HTML-formulärverifiering fungerar inte i Internet Explorer 9 eller tidigare versioner.

Dataverifiering

Dataverifiering är en process för att säkerställa att användarens inmatning är ren, korrekt och användbar.

Typiska verifieringstasker inkluderar:

  • Har användaren fyllt i alla obligatoriska fält?
  • Har användaren angivit en giltig datum?
  • Har användaren angivit text i numeriska fält?

I de flesta fall är syftet med dataverifiering att säkerställa att användaren anger korrekt information.

Verifiering kan definieras på många olika sätt och implementeras på många olika sätt.

ServerSIDIG verifiering utförs av webbservern efter att inmatningen har skickats till servern.

Innan inmatningen skickas till webbservern utför klienten verifiering av webbläsaren.

HTML restriktiv verifiering

HTML5 introducerade ett nytt HTML-verifieringskoncept som kallas restriktiv verifiering.

HTML-restriktiv validering baseras på:

  • Restriktiv validering HTML-inputegenskaper
  • CSS-pseudo-väljare för restriktiv validering
  • Restriktiv validering DOM-egenskaper och metoder

Restriktiv validering HTML-inputegenskaper

Egenskaper Beskrivning
disabled Bestäm att inmatningselementet bör vara inaktiverat.
max Bestäm inmatningselementets maxima värde.
min Bestäm inmatningselementets minsta värde.
pattern Bestäm inmatningselementets värdeschema.
required Bestäm att inmatningsfältet måste fyllas i.
type Bestäm inmatningselementets typ.

För en fullständig lista, besök HTML Input-attribut.

CSS-pseudo-väljare för restriktiv validering

Väljare Beskrivning
:disabled Välj input-element som har specificerat "disabled"-egenskapen.
:invalid Välj input-element med ogiltigt värde.
:optional Välj input-element som inte har specificerat "required"-egenskapen.
:required Välj input-element som har specificerat "required"-egenskapen.
:valid Välj input-element med giltigt värde.

För en fullständig lista, besök CSS-pseudo-klass.