API Validation JavaScript

  • ບ່ອນໜ້າໜ້າຫນ້າ API Storage
  • ບ່ອນໜ້າໜ້າຫນ້າ API Web

ມັນເປັນວິທີການ ແລະ ບັນດາທາງສັນຍາລະບົບທີ່ຢືນຢັນຂໍ້ມູນ DOM

ວິທີການ

ວິທີການ ການອະທິບາຍ
checkValidity() ຖ້າ element input ມີຂໍ້ມູນທີ່ມີຄວາມມີປະສິດທິໃນຢ່າງແນ່ນອນຈະປະຕິບັດມາກັບ true
setCustomValidity() ຕັ້ງຂໍ້ຄວາມ validationMessage ສຳລັບ element input

ຖານະພາສາ

ຖານະພາສາ ການອະທິບາຍ
validity ບັນນບັນທີທີ່ມີຫົວຂໍ້ວ່າບໍ່ມີຄວາມມີປະສິດທິຂອງ input element
validationMessage ບັນນບັນທີຂອງຂໍ້ຄວາມທີ່ວິທະຍຸຈະສະແດງຄືວ່າບໍ່ມີຄວາມມີປະສິດທິ
willValidate ສະແດງວ່າຈະມີການຢືນຢັນ input element ຫຼືບໍ່

ຕົວຢ່າງ - ວິທີການ 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>

ພະຍາຍາມຢ່າງເປັນຕົວຕົນ

ຖານະພາສາຄວາມມີທຳລາຍ

ປະກອບສິ່ງ inputຖານະພາສາຄວາມມີທຳລາຍບັນຈຸຫຼາຍຖານະພາສາທີ່ກ່ຽວກັບການມີທຳລາຍຂໍ້ມູນ:

ຖານະພາສາ ການອະທິບາຍ
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。

ຕົວຢ່າງ

ຖານະພາສາ rangeOverflow

ຖ້າຈຳນວນທີ່ມີໃນຂັ້ນຕອນ input ມີຈຳນວນຫຼາຍກວ່າ 100 (input max ຖານະພາສາ() ວ່າຈະສະແດງຂໍ້ຄວາມລາຍງານດີ:

<input id="id1" type="number" max="100">
<button onclick="myFunction()">ຢືນ</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Value OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  }
}
</script>

ພະຍາຍາມຢ່າງເປັນຕົວຕົນ

ຖານະພາສາ rangeUnderflow

ຖ້າຈຳນວນທີ່ມີໃນຂັ້ນຕອນ input ມີຈຳນວນຫຼາຍກວ່າ 100 (input max ຖານະພາສາ() ວ່າຈະສະແດງຂໍ້ຄວາມລາຍງານດີ:

<input id="id1" type="number" min="100">
<button onclick="myFunction()">ຢືນ</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = = "Value OK";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  }
}
</script>

ພະຍາຍາມຢ່າງເປັນຕົວຕົນ

  • ບ່ອນໜ້າໜ້າຫນ້າ API Storage
  • ບ່ອນໜ້າໜ້າຫນ້າ API Web