API weryfikacji JavaScript

Weryfikacja ograniczeń metoda DOM

atrybut opis
checkValidity() jeśli element input zawiera poprawne dane, zwróci true.
ustawNiestandardowąWalidację() ustaw atrybut walidacji wiadomości input elementu.

jeśli pole wejściowe zawiera niewłaściwe dane, wyświetl wiadomość:

metoda zweryfikujWażność()

<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.zweryfikujWażność()) {
    document.getElementById("demo").innerHTML = inpObj.wiadomośćWalidacji;
  }
}
</script>

Spróbuj sam

DOM atrybuty walidacji ograniczeń

atrybut opis
ważność zawiera logiczne atrybuty związane z walidacją elementu wejściowego.
wiadomośćWalidacji zawiera wiadomość, którą przeglądarka wyświetli, gdy walidacja jest fałszywa.
czyBędzieWalidowany oznacza, czy walidacja input elementu będzie przeprowadzona.

atrybutyWalidacji

Atrybuty walidacji elementu input zawierają wiele atrybutów związanych z walidacją danych:

atrybut opis
niestandardowyBłąd jeśli ustawiono niestandardową wiadomość walidacji, ustaw na true.
niepasującyWzór jeśli wartość elementu nie pasuje do jego atrybutu pattern, ustaw na true.
przekroczeniePrzedziału jeśli wartość elementu jest większa niż jego atrybut max, ustaw na true.
przekroczeniePrzedziału jeśli wartość elementu jest mniejsza niż jego atrybut min, ustaw na true.
niepasującyStep jeśli wartość elementu jest nieważna dla jego atrybutu step, ustaw na true.
zbytDługi jeśli wartość elementu przekracza jego atrybut maxLength, ustaw na true.
niepasującyTyp jeśli wartość elementu jest nieważna dla jego atrybutu type, ustaw na true.
brakWartości jeśli element (posiadający atrybut required) nie ma wartości, ustaw na true.
ważny jeśli wartość elementu jest ważna, ustaw na true.

przykład

jeśli liczba w polu wejściowym jest większa niż 100 (elementu maks Atrybut), wyświetl wiadomość:

属性的 nazwa

<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

Jeśli liczba w polu wejścia jest mniejsza niż 100 (element input) min Atrybut), wyświetl wiadomość:

Atrybut rangeUnderflow

<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