Beschränkungsvalidierungs DOM-Methoden
| Eigentum | Beschreibung |
|---|---|
| checkValidity() | Gibt true zurück, wenn ein Eingabeelement gültige Daten enthält. |
| setCustomValidity() | Setzt die Validation Eigenschaft eines Eingabeelements. |
Wenn ein Eingabefeld ungültige Daten enthält, wird eine Meldung angezeigt:
Die CheckValidity () Methode
<input id="id1" type="number" min="100" max="300">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj =
document.getElementById("id1");
if (inpObj.checkValidity()
== false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script> Versuch es selber " Beschränkungsvalidierungs DOM Eigenschaften
| Eigentum | Beschreibung |
|---|---|
| validity | Enthält boolean Eigenschaften in Bezug auf die Gültigkeit eines Eingabeelements. |
| validationMessage | Enthält die Nachricht ein Browser angezeigt wird, wenn die Gültigkeit falsch ist. |
| willValidate | Gibt an, ob ein Eingabeelement wird validiert werden. |
Gültigkeit Eigenschaften
Die Gültigkeit Eigenschaft eines Eingabeelement enthält eine Reihe von Eigenschaften auf die Gültigkeit der Daten im Zusammenhang mit :
| Eigentum | Beschreibung |
|---|---|
| customError | Wird auf true gesetzt, wenn eine benutzerdefinierte Gültigkeit Nachricht eingestellt ist. |
| patternMismatch | Wird auf true gesetzt, wenn der Wert eines Elements nicht sein Muster Attribut entspricht. |
| rangeOverflow | Wird auf true gesetzt, wenn der Wert eines Elements größer ist als seine max-Attribut. |
| rangeUnderflow | Wird auf true gesetzt, wenn der Wert eines Elements geringer ist als sein min Attribut. |
| stepMismatch | Wird auf true gesetzt, wenn der Wert eines Elements pro dessen Schritt Attribut ungültig ist. |
| tooLong | Wird auf true gesetzt, wenn der Wert eines Elements übersteigt seine maxLength Attribut. |
| typeMismatch | Wird auf true gesetzt, wenn der Wert eines Elements pro dessen type-Attribut ist ungültig. |
| valueMissing | Wird auf true gesetzt, wenn ein Element (mit einem erforderlichen Attribut) keinen Wert hat. |
| valid | Wird auf true gesetzt, wenn der Wert eines Elements gültig ist. |
Beispiele
Wenn die Zahl in einem Eingabefeld ist größer als 100 (die max Attributs-Eingang), eine Nachricht anzuzeigen:
Die rangeOverflow Property
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "Value too large";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Versuch es selber " Wenn die Zahl in einem Eingabefeld ist weniger als 100 (die min Attributs-Eingang), eine Nachricht anzuzeigen:
Die rangeUnderflow Property
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeUnderflow) {
txt = "Value too small";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Versuch es selber "