API Walidacji JavaScript

Metody i atrybuty walidacji DOM

Metoda

Metoda opis
checkValidity() Zwraca true, jeśli element wejściowy zawiera poprawne dane.
setCustomValidity() Ustawia atrybut validationMessage elementu wejściowego.

atrybut

atrybut opis
validity Zawiera logiczne atrybuty związane z walidacją elementu wejściowego.
validationMessage Zawiera wiadomość, którą przeglądarka wyświetli, gdy walidacja jest fałszywa.
willValidate Indykuje, czy element wejściowy będzie poddany walidacji.

Przykład - metoda checkValidity()

Jeśli pole wejściowe zawiera nieprawidłowe dane, wyświetli wiadomość:

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

Spróbuj sam

atrybuty walidacji

elementu inputatrybuty walidacjizawiera wiele atrybutów związanych z walidacją danych：

atrybut opis
własnyBłąd Jeśli ustawiono własną wiadomość walidacji, to ustaw na true。
niepasującyWzór Jeśli wartość elementu nie pasuje do atrybutu pattern, to ustaw na true。
nadWartość Jeśli wartość elementu jest większa niż atrybut max, to ustaw na true。
podWartość Jeśli wartość elementu jest mniejsza niż atrybut min, to ustaw na true。
niepoprawneDopuszczenieKroku Jeśli wartość elementu jest nieważna zgodnie z atrybutem step, to ustaw na true。
zbytDługi Jeśli wartość elementu przekracza atrybut maxLength, to ustaw na true。
niepoprawnyTyp Jeśli wartość elementu jest nieważna zgodnie z atrybutem type, to ustaw na true。
brakWartości Jeśli element (z atrybutem required) nie ma wartości, to ustaw na true。
ważny Jeśli wartość elementu jest ważna, to ustaw na true。

przykład

atzustawienie rangeOverflow

Jeśli liczba w polu input jest większa niż 100（pola input max Jeśli�性质），to wyświetla wiadomość：

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Wartość OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Wartość zbyt duża";
  }
}
</script>

Spróbuj sam

atzustawienie rangeUnderflow

Jeśli liczba w polu input jest większa niż 100（pola input max Jeśli�性质），to wyświetla wiadomość：

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Wartość OK";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Wartość zbyt mała";
  }
}
</script>

Spróbuj sam