好程序員web前端教程分享JavaScript驗證API

好程序員web前端教程分享JavaScript驗證API，小編天天會分享一下乾貨給你們。那麼今天說道的就是web前端培訓課程中的章節。

 

JavaScript驗證API

 

　　約束驗證DOM方法

 

PropertyDescription

 

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" 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>

<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 屬性

嘗試一下 »

JavaScript 表單驗證

JavaScript 保留關鍵字

1 篇筆記

setCustomValidity 的用法：

 

var inpObj = document.getElementById("id1");

 

inpObj.setCustomValidity(''); // 取消自定義提示的方式

 

if (inpObj.checkValidity() == false) {

 

if(inpObj.value==""){

 

inpObj.setCustomValidity("不能爲空!");

 

}else if(inpObj.value<100 || inpObj.value>300){

 

inpObj.setCustomValidity("請從新輸入數值(100~300之間)!");

 

}

 

document.getElementById("demo").innerHTML = inpObj.validationMessage;

 

} else {

 

document.getElementById("demo").innerHTML = "輸入正確";

 

}