Gibt true zurück, wenn ein Eingabeelement gültige Daten enthält.
Legt die validationMessage-Eigenschaft eines Eingabeelements fest.
Wenn ein Eingabefeld ungültige Daten enthält, wird eine Meldung angezeigt:
<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>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<p>Enter a number and click OK:</p>
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>
<p id="demo"></p>
<script>
function myFunction() {
const inpObj = document.getElementById("id1");
if (!inpObj.checkValidity()) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "Input OK";
}
}
</script>
</body>
</html>
Enthält boolesche Eigenschaften im Zusammenhang mit der Gültigkeit eines Eingabeelements.
Enthält die Meldung, die ein Browser anzeigt, wenn die Gültigkeit falsch ist.
Gibt an, ob ein Eingabeelement validiert wird.
Die Gültigkeitseigenschaft eines Eingabeelements enthält eine Zahl von Eigenschaften im Zusammenhang mit der Gültigkeit von Daten:
Wird auf „true“ gesetzt, wenn eine benutzerdefinierte Gültigkeitsmeldung festgelegt ist.
Wird auf „true“ gesetzt, wenn der Wert eines Elements nicht mit seinem Musterattribut übereinstimmt.
Wird auf „true“ gesetzt, wenn der Wert eines Elements größer als sein max-Attribut ist.
Wird auf „true“ gesetzt, wenn der Wert eines Elements kleiner als sein Min-Attribut ist.
Wird auf „true“ gesetzt, wenn der Wert eines Elements gemäß seinem Schrittattribut ungültig ist.
Wird auf „true“ gesetzt, wenn der Wert eines Elements sein maxLength-Attribut überschreitet.
Wird auf „true“ gesetzt, wenn der Wert eines Elements gemäß seinem Typattribut ungültig ist.
Wird auf „true“ gesetzt, wenn ein Element (mit einem erforderlichen Attribut) keinen Wert hat.
Wird auf „true“ gesetzt, wenn der Wert eines Elements gültig ist.
Wenn die Zahl in einem Eingabefeld größer als 100 ist (der max
der Eingabe). Attribut), eine Meldung anzeigen:
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
let text = "Value OK";
if (document.getElementById("id1").validity.rangeOverflow) {
text = "Value too large";
}
}
</script>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<p>Enter a number and click OK:</p>
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p>If the number is greater than 100 (the input's max attribute), an error message will be displayed.</p>
<p id="demo"></p>
<script>
function myFunction() {
let text;
if (document.getElementById("id1").validity.rangeOverflow) {
text = "Value too large";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Wenn die Zahl in einem Eingabefeld kleiner als 100 ist (das Attribut min
der Eingabe), wird eine Meldung angezeigt:
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
let text = "Value OK";
if (document.getElementById("id1").validity.rangeUnderflow) {
text = "Value too small";
}
}
</script>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<p>Enter a number and click OK:</p>
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>
<p id="demo"></p>
<script>
function myFunction() {
let text;
if (document.getElementById("id1").validity.rangeUnderflow) {
text = "Value too small";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>