JavaScript Academy · leksjon

Validering på klientsiden

Valider inndata før den sendes noe sted.

Leksjon 3 av 413 trinn

Validering på klientsiden er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hvorfor validere på klientsiden

Validering på klientsiden gir umiddelbar tilbakemelding og en bedre brukeropplevelse. Husk at dette er en bekvemmelighet, ikke sikkerhet: valider alltid på serveren også.

Validere ved innsending

Et vanlig mønster er å kontrollere feltene når skjemaet sendes inn, og avbryte innsendingen hvis noe er ugyldig.

form.addEventListener("submit", (e) => {
  if (!isValid()) {
    e.preventDefault();
  }
});

Kontrollere et obligatorisk felt

Trim verdien og avvis tom input. Trimming hindrer at strenger som bare består av mellomrom, blir godtatt.

function checkName() {
  const v = nameInput.value.trim();
  return v.length > 0;
}

Lengderegler

Sammenlign lengden etter trimming med minimums- og maksimumsgrensene for felt som passord.

function checkPassword() {
  const v = passwordInput.value;
  return v.length >= 8 && v.length <= 64;
}

Mønstersamsvar

Regulære uttrykk tester formater, for eksempel e-postformater. Hold mønstrene enkle og kombiner dem med kontroller på serveren.

function checkEmail() {
  const v = emailInput.value.trim();
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}

Vise feilmeldinger

Vis tilbakemeldingen nær feltet ved hjelp av et eget feilelement og textContent for å beskytte mot XSS.

function showError(field, msg) {
  const err = field.nextElementSibling;
  err.textContent = msg;
}

Fjerne feilmeldinger

Tilbakestill meldingen når feltet blir gyldig, slik at gamle feilmeldinger ikke blir stående.

function clearError(field) {
  field.nextElementSibling.textContent = "";
}

Validering i sanntid

Valider ved input- eller blur-hendelsen for å gi tilbakemelding i sanntid mens brukeren skriver eller forlater et felt.

emailInput.addEventListener("blur", () => {
  if (!checkEmail()) showError(emailInput, "Invalid email");
  else clearError(emailInput);
});

Tilgjengelighet med aria-invalid

Angi aria-invalid og koble feilmeldinger med aria-describedby slik at hjelpemiddelteknologi kunngjør problemene.

emailInput.setAttribute("aria-invalid", "true");

Fokusere på den første feilen

Ved mislykket innsending flytter De fokuset til det første ugyldige feltet, slik at feilen kan rettes umiddelbart.

function focusFirstError(fields) {
  const bad = fields.find((f) => !f.valid);
  if (bad) bad.el.focus();
}

Valider på serversiden også

Klientvalidering kan omgås ved å deaktivere JavaScript eller lage egne forespørsler. Betrakt serveren som fasiten.

Kort kontroll

Sikkerhetsperspektiv.

Besvar den i den interaktive leksjonen

Oppsummering

Manuell validering kontrollerer felt, for eksempel obligatoriske felt, lengde og mønster, og avbryter innsendingen ved feil med preventDefault. Vis og fjern meldinger på en trygg måte med textContent, valider fortløpende ved input/blur, forbedre tilgjengeligheten med aria-invalid, og fokuser på den første feilen. Valider alltid på nytt på serveren.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Validering på klientsiden» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Validering på klientsiden», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Validering på klientsiden»?

Valider inndata før den sendes noe sted. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Validering på klientsiden»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy