JavaScript Academy · Oppitunti

Constraint Validation API

Käyttäkää sisäänrakennettua kelpoisuustarkistusta.

Oppitunti 4/413 vaihetta

Constraint Validation API on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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.

Sisäänrakennettu validointi

HTML-lomakekentät tukevat määritteitä, kuten required, min, max, pattern ja type="email". Constraint Validation API:n avulla JavaScript voi tarkastella tätä sisäänrakennettua validointia ja hallita sitä.

checkValidity

checkValidity palauttaa totuusarvon ja laukaisee invalid-tapahtuman jokaisessa virheellisessä ohjaimessa näyttämättä selaimen ilmoituskuplaa.

const email = document.querySelector("#email");
console.log(email.checkValidity());

reportValidity

reportValidity toimii kuten checkValidity, mutta näyttää lisäksi selaimen validointiviestin käyttöliittymän virheellisille kentille.

if (!form.reportValidity()) {
  console.log("show built-in errors");
}

validity-objekti

Jokaisella ohjaimella on validity-objekti, joka sisältää totuusarvoisia ilmaisimia ja kuvaa tarkasti, mikä on vialla.

console.log(email.validity.valueMissing);  // empty required
console.log(email.validity.typeMismatch);  // wrong format
console.log(email.validity.tooShort);

validity.valid

validity.valid on tosi vain, kun kenttä täyttää kaikki rajoitteet. Se kokoaa yhteen muiden ilmaisimien tiedot.

if (email.validity.valid) {
  console.log("ok");
}

validationMessage

validationMessage sisältää lokalisoidun viestin, jonka selain näyttäisi nykyisestä virheestä.

console.log(email.validationMessage);

setCustomValidity

setCustomValidity merkitsee kentän virheelliseksi omalla viestillänne. Epätyhjä merkkijono tarkoittaa virhettä, kun taas tyhjä merkkijono poistaa sen.

function checkMatch() {
  if (pass.value !== confirm.value) {
    confirm.setCustomValidity("Passwords must match");
  } else {
    confirm.setCustomValidity("");
  }
}

Tyhjentäkää mukautetut virheet aina

Jos asetatte mukautetun viestin, tyhjentäkää se kelvollisen arvon yhteydessä tyhjällä merkkijonolla. Muuten kenttä pysyy aina virheellisenä.

confirm.addEventListener("input", () => {
  confirm.setCustomValidity("");
  checkMatch();
});

invalid-tapahtuma

Kuunnelkaa invalid-tapahtumaa mukautetun logiikan, kuten kentän tyylittelyn, suorittamiseksi validoinnin epäonnistuessa.

email.addEventListener("invalid", () => {
  email.classList.add("error");
});

Selaimen ilmoituskuplien poistaminen käytöstä

Lisätkää lomakkeelle novalidate, jos haluatte estää selaimen omat ponnahdusikkunat mutta käyttää API:a edelleen omiin viesteihinne.

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

Tyylittely :valid- ja :invalid-valitsimilla

CSS:n näennäisluokat :valid ja :invalid tyylittelevät kentät automaattisesti niiden validointitilan perusteella.

Pikatarkistus

Mukautettu validointisääntö.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Constraint Validation API toimii yhdessä HTML:n rajoitemääritteiden kanssa. Testatkaa virheitä checkValidity- ja reportValidity-metodeilla ja näyttäkää ne tarvittaessa, tarkastelkaa validity-ilmaisimia ja validationMessage-viestiä sekä lisätkää mukautettuja sääntöjä setCustomValidity-metodilla. Tyhjentäkää mukautettu virhe tyhjällä merkkijonolla. invalid-tapahtuma ja CSS:n :valid/:invalid-valitsimet helpottavat tyylittelyä.

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 ”Constraint Validation API” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Constraint Validation API”. 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 ”Constraint Validation API”?

Käyttäkää sisäänrakennettua kelpoisuustarkistusta. 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 4/4.

Kuinka kauan ”Constraint Validation API”-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