ข้อ จำกัด วิธีการตรวจสอบ DOM
| คุณสมบัติ | ลักษณะ |
|---|---|
| checkValidity() | ผลตอบแทนจริงถ้าองค์ประกอบเข้ามีข้อมูลที่ถูกต้อง |
| 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 | ตั้งค่าเป็นจริงถ้าข้อความถูกต้องมีการตั้งค่าที่กำหนดเอง |
| patternMismatch | ตั้งค่าเป็นจริงถ้าค่าองค์ประกอบไม่ตรงกับรูปแบบของแอตทริบิวต์ |
| rangeOverflow | ตั้งค่าเป็นจริงถ้าค่าองค์ประกอบของมีค่ามากกว่าแอตทริบิวต์ของแม็กซ์ |
| rangeUnderflow | ตั้งค่าเป็นจริงถ้าค่าองค์ประกอบคือน้อยกว่านาทีแอตทริบิวต์ของมัน |
| stepMismatch | ตั้งค่าเป็นจริงถ้าค่าองค์ประกอบไม่ถูกต้องต่อแอตทริบิวต์ขั้นตอนของมัน |
| tooLong | ตั้งค่าเป็นจริงถ้าค่าองค์ประกอบเกินแอตทริบิวต์ maxLength ของมัน |
| typeMismatch | ตั้งค่าเป็นจริงถ้าค่าองค์ประกอบไม่ถูกต้องต่อแอตทริบิวต์ประเภท |
| valueMissing | ตั้งค่าเป็นจริงถ้าเป็นองค์ประกอบ (ที่มีแอตทริบิวต์ที่จำเป็น) ไม่มีค่า |
| valid | ตั้งค่าเป็นจริงถ้าค่าขององค์ประกอบที่ถูกต้อง |
ตัวอย่าง
ถ้าจำนวนในช่องใส่มากกว่า 100 (ขาเข้าของแอตทริบิวต์สูงสุด), แสดงข้อความ:
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 (นาทีแอตทริบิวต์การป้อนข้อมูลของ) แสดงข้อความ:
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>
ลองตัวเอง»