JavaScript Academy · Oppitunti

Asiakaspuolen validointi

Validoikaa syöte ennen sen lähettämistä mihinkään.

Oppitunti 3/413 vaihetta

Asiakaspuolen validointi on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Miksi validoida selaimessa

Validointi lähetyksen yhteydessä

Yleinen toimintamalli tarkistaa kentät lomakkeen lähetyksen yhteydessä ja peruuttaa lähetyksen, jos jokin kenttä ei ole kelvollinen.

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

Pakollisen kentän tarkistaminen

Poistakaa arvon alusta ja lopusta tyhjät merkit ja hylätkää tyhjä syöte. Näin pelkistä välilyönneistä koostuvia merkkijonoja ei hyväksytä.

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

Pituussäännöt

Verratkaa poistettujen tyhjien merkkien jälkeisen arvon pituutta vähimmäis- ja enimmäisrajoihin esimerkiksi salasanakentissä.

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

Mallin täsmäytys

Säännöllisillä lausekkeilla testataan esimerkiksi sähköpostiosoitteiden kaltaisia muotoja. Pitäkää mallit yksinkertaisina ja yhdistäkää ne palvelimella tehtäviin tarkistuksiin.

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

Virheilmoitusten näyttäminen

Näyttäkää palaute kentän lähellä erillisellä virhe-elementillä ja käyttäkää textContent-ominaisuutta XSS-haavoittuvuuksien välttämiseksi.

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

Virheiden tyhjentäminen

Tyhjentäkää viesti, kun kenttä muuttuu kelvolliseksi, jotta vanhat virheilmoitukset eivät jää näkyviin.

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

Reaaliaikainen validointi

Validoikaa input- tai blur-tapahtuman yhteydessä, jotta käyttäjä saa reaaliaikaista palautetta kirjoittaessaan tai poistuessaan kentästä.

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

Saavutettavuus aria-invalid-ominaisuudella

Asettakaa aria-invalid ja yhdistäkää virheet aria-describedby-ominaisuudella, jotta avustava teknologia ilmoittaa ongelmista.

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

Fokuksen siirtäminen ensimmäiseen virheeseen

Jos lähetys epäonnistuu, siirtäkää fokus ensimmäiseen virheelliseen kenttään, jotta käyttäjä voi korjata sen heti.

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

Validoikaa myös palvelimella

Selainpuolen validoinnin voi ohittaa poistamalla JavaScriptin käytöstä tai muodostamalla pyynnöt itse. Pitäkää palvelinta totuuden lähteenä.

Pikatarkistus

Tietoturva-ajattelutapa.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Manuaalisessa validoinnissa tarkistetaan kentät, kuten pakollisuus, pituus ja muoto, ja lähetys peruutetaan virheen yhteydessä preventDefault-metodilla. Näyttäkää ja tyhjentäkää viestit turvallisesti textContent-ominaisuudella, validoikaa reaaliaikaisesti input-/blur-tapahtumilla, parantakaa saavutettavuutta aria-invalid-ominaisuudella ja siirtäkää fokus ensimmäiseen virheeseen. Validoikaa tiedot aina uudelleen palvelimella.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Asiakaspuolen validointi” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Asiakaspuolen validointi”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Asiakaspuolen validointi”?

Validoikaa syöte ennen sen lähettämistä mihinkään. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Asiakaspuolen validointi”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy