約束驗證DOM方法
| 屬性 | 描述 |
|---|---|
| checkValidity() | 如果輸入元素包含有效的數據，則返回true。 |
| setCustomValidity() | 設置一個輸入元素的validationMessage財產。 |
如果輸入字段包含無效數據，顯示一條消息：
該checkValidity（）方法
<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> 試一試» 約束驗證DOM屬性
| 屬性 | 描述 |
|---|---|
| validity | 包含與一個輸入元件的有效性布爾屬性。 |
| validationMessage | 包含當該有效性是假的瀏覽器將顯示消息。 |
| willValidate | 表示如果輸入的元素將被驗證。 |
效度屬性
輸入元素的有效性屬性包含了一些相關的數據的有效性屬性：
| 屬性 | 描述 |
|---|---|
| customError | 設置為true，如果設置自定義有效性消息。 |
| patternMismatch | 設置為true，如果一個元素的值不符合其模式屬性。 |
| rangeOverflow | 設置為true，如果一個元素的值低於其最大屬性越大。 |
| rangeUnderflow | 設置為true，如果一個元素的值低於其最小屬性。 |
| stepMismatch | 設置為true，如果元素的值是每一步的屬性無效。 |
| tooLong | 設置為true，如果一個元素的價值超過其最大長度屬性。 |
| typeMismatch | 設置為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() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "Value too large";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
試一試» 如果在輸入字段中的數小於100（輸入的min屬性），則顯示一條消息：
該rangeUnderflow物業
<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>
試一試»