JavaScript Validation API
Constraint Validation DOM 方法
| 屬性 | 描述 |
|---|---|
| checkValidity() | 如果輸入元素包含有效資料，則返回 true。 |
| setCustomValidity() | 設定輸入元素的 validationMessage 屬性。 |
如果輸入欄位包含無效資料，則顯示訊息
checkValidity() 方法
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
const inpObj = document.getElementById("id1");
if (!inpObj.checkValidity()) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script>
自己動手試一試 »
Constraint Validation DOM 屬性
| 屬性 | 描述 |
|---|---|
| validity | 包含與輸入元素有效性相關的布林屬性。 |
| validationMessage | 包含當有效性為 false 時瀏覽器將顯示的郵件。 |
| willValidate | 指示輸入元素是否將被驗證。 |
有效性屬性
輸入元素的 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()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
let text = "Value OK";
if (document.getElementById("id1").validity.rangeOverflow) {
text = "Value too large";
}
}
</script>
自己動手試一試 »
如果輸入欄位中的數字小於 100（輸入元素的 min 屬性），則顯示訊息
rangeUnderflow 屬性
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
let text = "Value OK";
if (document.getElementById("id1").validity.rangeUnderflow) {
text = "Value too small";
}
}
</script>
自己動手試一試 »
