ຈີສີເຈັກສະຕິກ ວິທີການກວດສອບ

ການກວດກາຄວາມມູນຄ່າ

ປະສົມ ອະທິບາຍ
checkValidity() ຖ້າ input elements ມີຂໍ້ມູນທີ່ມີປະສິດທິພາບ ຈະກັບຄືນ true。
setCustomValidity() ການຕັ້ງ attribute validationMessage input elements

ຖ້າບົດສະຫຼຸບການເຂົ້າຂໍ້ມູນມີຂໍ້ມູນທີ່ບໍ່ມີປະສິດທິພາບ ຈະສະແດງຂໍ້ຄວາມ:

checkValidity() method

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

ການທົດລອງດ້ວຍຕົວເອງ

attribute DOM ທີ່ມີຄວາມມີປະສິດທິພາບ

ປະສົມ ອະທິບາຍ
validity ບັນທຶກ boolean attribute ທີ່ກ່ຽວຂ້ອງກັບ validity input elements
validationMessage ບັນທຶກຂໍ້ຄວາມທີ່ເຄື່ອງຫຼິ້ນຈະສະແດງຖ້າ validity false
willValidate ສະແດງວ່າຈະກວດກາ input elements ຫຼືບໍ່

attribute ທີ່ກ່ຽວຂ້ອງກັບຄວາມມີປະສິດທິພາບ

input elements ທີ່ມີ attribute ທີ່ກ່ຽວຂ້ອງກັບຄວາມມີປະສິດທິພາບຂອງຂໍ້ມູນຕົວເລກມີຫຼາຍ attribute ທີ່ກ່ຽວຂ້ອງກັບຄວາມມີປະສິດທິພາບຂອງຂໍ້ມູນ:

ປະສົມ ອະທິບາຍ
customError ຖ້າມີຂໍ້ຄວາມສະຫຼຸບພິມແບບທີ່ສະເພາະ ຂຽນເປັນ true。
patternMismatch ຖ້າຄຸນຂອງປະກອບຫຼັກບໍ່ຕົງກັບ pattern attribute ຂອງມັນ ຂຽນເປັນ true。
rangeOverflow ຖ້າຄຸນຂອງປະກອບຫຼັກຫຼາຍກວ່າ max attribute ຂອງມັນ ຂຽນເປັນ true。
rangeUnderflow ຖ້າຄຸນຂອງປະກອບຫຼັກຫຼຸຍກວ່າ min attribute ຂອງມັນ ຂຽນເປັນ true。
stepMismatch ຖ້າຄຸນຂອງປະກອບຫຼັກບໍ່ພຽງພໍຕໍ່ step attribute ຂອງມັນ ຂຽນເປັນ true。
tooLong ຖ້າຄຸນຂອງປະກອບຫຼັກຫຼາຍກວ່າ maxLength attribute ຂອງມັນ ຂຽນເປັນ true。
typeMismatch ຖ້າຄຸນຂອງປະກອບຫຼັກບໍ່ພຽງພໍຕໍ່ຄວາມປະເພດ type ຂອງມັນ ຂຽນເປັນ true。
valueMissing ຖ້າປະກອບຫຼັກ (ມີລະບົບ required) ບໍ່ມີຄຸນ ຂຽນເປັນ true。
valid ຖ້າຄຸນຂອງປະກອບຫຼັກຢູ່ໃນຄວາມຈິງ ຂຽນເປັນ true。

ບົດຕົວ

ຖ້າຈຳນວນຕົວເລກໃນບົດສະຫຼຸບການເຂົ້າຂໍ້ມູນຫຼາຍກວ່າ 100 (input elements ຄວາມສູງ ຖ້າມີປະສົມປະກອບ (text), ຈະສະແດງຂໍ້ຄວາມ:

ລະບົບຄືນນີ້

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

ການທົດລອງດ້ວຍຕົວເອງ

ຖ້າຈຳນວນທີ່ເຂົ້າຂອງບາງບັນປະສົມຢູ່ໃນບາງບັນປະສົມຂອງ input element ແມ່ນຕໍ່າກວ່າ 100 (input element) min ຖ້າມີປະສົມປະກອບ (text), ຈະສະແດງຂໍ້ຄວາມ:

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>

ການທົດລອງດ້ວຍຕົວເອງ