JavaScript 驗證 API
約束驗證 DOM 方法
| Property | Description |
|---|---|
| checkValidity() | 如果 input 元素中的數據是合法的返回 true，否則返回 false。 |
| setCustomValidity() | 設置 input 元素的 validationMessage 屬性，用於自定義錯誤提示資訊的方法。 使用 setCustomValidity 設置了自定義提示後，validity.customError 就會變成true，則 checkValidity 總是會返回false。如果要重新判斷需要取消自定義提示，方式如下：
setCustomValidity('')
setCustomValidity(null)
setCustomValidity(undefined)
|
以下實例如果輸入資訊不合法，則返回錯誤資訊：
checkValidity() 方法
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">驗證</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script>
約束驗證 DOM 屬性
| 屬性 | 描述 |
|---|---|
| validity | 布爾屬性值，返回 input 輸入值是否合法 |
| validationMessage | 流覽器錯誤提示資訊 |
| willValidate | 指定 input 是否需要驗證 |
Validity 屬性
input 元素的 validity 屬性包含一系列關於 validity 數據屬性:
| 屬性 | 描述 |
|---|---|
| customError | 設置為 true, 如果設置了自定義的 validity 資訊。 |
| patternMismatch | 設置為 true, 如果元素的值不匹配它的模式屬性。 |
| rangeOverflow | 設置為 true, 如果元素的值大於設置的最大值。 |
| rangeUnderflow | 設置為 true, 如果元素的值小於它的最小值。 |
| stepMismatch | 設置為 true, 如果元素的值不是按照規定的 step 屬性設置。 |
| tooLong | 設置為 true, 如果元素的值超過了 maxLength 屬性設置的長度。 |
| typeMismatch | 設置為 true, 如果元素的值不是預期相匹配的類型。 |
| valueMissing | 設置為 true，如果元素 (required 屬性) 沒有值。 |
| valid | 設置為 true，如果元素的值是合法的。 |
實例
如果輸入的值大於 100，顯示一個資訊：
rangeOverflow 屬性
<input id="id1" type="number" max="100">
<button onclick="myFunction()">驗證</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "輸入的值太大了";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
如果輸入的值小於 100，顯示一個資訊：
rangeUnderflow 屬性
<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
var inpObj = document.getElementById("id1");
if(!isNumeric(inpObj.value)) {
txt = "你輸入的不是數字";
} else if (inpObj.validity.rangeUnderflow) {
txt = "輸入的值太小了";
} else {
txt = "輸入正確";
}
document.getElementById("demo").innerHTML = txt;
}
// 判斷輸入是否為數字
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>