JavaScript検証API
制約の検証DOMメソッド
| Property | Description |
|---|---|
| checkValidity() | 入力要素に有効なデータが含まれている場合は trueを返します。 |
| setCustomValidity() | 入力要素のvalidationMessageプロパティを設定します。 |
入力フィールドに無効なデータが含まれている場合は、次のメッセージが表示されます。
checkValidity() メソッド
<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>
制約の検証DOMプロパティ
| Property | Description |
|---|---|
| validity | 入力要素の有効性に関連するブールプロパティが含まれます。 |
| validationMessage | 妥当性がfalseの場合にブラウザが表示するメッセージが含まれます。 |
| willValidate | 入力要素が検証されるかどうかを示します。 |
有効性プロパティ
input要素のvalidityプロパティには、データの有効性に関連する多数のプロパティが含まれています。
| Property | Description |
|---|---|
| customError | カスタム有効性メッセージが設定されている場合は、trueに設定します。 |
| patternMismatch | 要素の値がパターン属性と一致しない場合は、trueに設定します。 |
| rangeOverflow | 要素の値がそのmax属性より大きい場合は、trueに設定します。 |
| rangeUnderflow | 要素の値がその最小属性より小さい場合は、trueに設定します。 |
| stepMismatch | step属性ごとに要素の値が無効な場合は、trueに設定します。 |
| tooLong | 要素の値がそのmaxLength属性を超える場合は、trueに設定します。 |
| typeMismatch | 要素の値がtype属性ごとに無効な場合は、trueに設定します。 |
| valueMissing | 要素(必須属性を持つ)に値がない場合は、trueに設定します。 |
| valid | 要素の値が有効な場合は、trueに設定します。 |
例
入力フィールドの数値が100(入力の属性)より大きい場合max、次のメッセージが表示されます。
rangeOverflowプロパティ
<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>
入力フィールドの数値が100(入力の属性)未満の場合min、次のメッセージが表示されます。
rangeUnderflowプロパティ
<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>
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。