JavaScript 驗證 API

約束驗證 DOM 方法

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 元素的validity 屬性包含一系列關於 validity 資料屬性:

例項

如果輸入的值大於 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>