การตรวจสอบแบบฟอร์ม JavaScript

สารบัญ

วิธีการตรวจสอบข้อจำกัด DOM

checkValidity(): คืนค่าเป็นจริงหากองค์ประกอบอินพุตมีข้อมูลที่ถูกต้อง
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>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
  } 
} 
</script>

</body>
</html>

คุณสมบัติ 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() {
  let text = "Value OK";
    if (document.getElementById("id1").validity.rangeOverflow) {
      text = "Value too large";
    }
}
</script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p>If the number is greater than 100 (the input's max attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

หากตัวเลขในช่องป้อนข้อมูลน้อยกว่า 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>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>