JavaScript 驗證API
約束驗證 DOM 方法和屬性
| 方法/屬性 | 描述 |
|---|---|
| checkValidity() | 如果輸入元素包含有效資料，則返回 true。 |
| setCustomValidity() | 設定輸入元素的 validationMessage 屬性。 |
| 屬性 | 描述 |
| validity | 包含與輸入元素有效性相關的布林屬性。 |
| validationMessage | 包含當有效性為 false 時瀏覽器將顯示的訊息。 |
| willValidate | 指示輸入元素是否將被驗證。 |
如果輸入欄位包含無效資料，則顯示一條訊息
checkValidity() 方法
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">確定</button>
<p id="demo"></p>
<script>
function myFunction() {
const inpObj = document.getElementById("id1");
if (!inpObj.checkValidity()) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script>
自己動手試一試 »
有效性屬性
輸入元素的 validity 屬性包含許多與資料有效性相關的屬性
| 屬性 | 描述 |
|---|---|
| customError | 如果設定了自定義有效性訊息，則設定為 true。 |
| patternMismatch | 如果元素的值與其 pattern 屬性不匹配，則設定為 true。 |
| rangeOverflow | 如果元素的值大於其 max 屬性，則設定為 true。 |
| rangeUnderflow | 如果元素的值小於其 min 屬性，則設定為 true。 |
| stepMismatch | 如果元素的值因其 step 屬性而無效，則設定為 true。 |
| tooLong | 如果元素的值超過其 maxLength 屬性，則設定為 true。 |
| typeMismatch | 如果元素的值因其 type 屬性而無效，則設定為 true。 |
| valueMissing | 如果元素（帶有 required 屬性）沒有值，則設定為 true。 |
| valid | 如果元素的值有效，則設定為 true。 |
示例
如果輸入欄位中的數字大於 100（輸入的 max 屬性），則顯示一條訊息
rangeOverflow 屬性
<input id="id1" type="number" max="100">
<button onclick="myFunction()">確定</button>
<p id="demo"></p>
<script>
function myFunction() {
let text = "值正常";
if (document.getElementById("id1").validity.rangeOverflow) {
text = "值過大";
}
}
</script>
自己動手試一試 »
如果輸入欄位中的數字小於 100（輸入的 min 屬性），則顯示一條訊息
rangeUnderflow 屬性
<input id="id1" type="number" min="100">
<button onclick="myFunction()">確定</button>
<p id="demo"></p>
<script>
function myFunction() {
let text = = "值正常";
if (document.getElementById("id1").validity.rangeUnderflow) {
text = "值過小";
}
}
</script>
自己動手試一試 »
