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

สารบัญ

    แสดงสารบัญ

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

การตรวจสอบความถูกต้องของรูปแบบ HTML สามารถทำได้โดย JavaScript

หากฟิลด์แบบฟอร์ม (fname) ว่างเปล่า ฟังก์ชันนี้จะแจ้งเตือนข้อความและส่งกลับ เท็จ เพื่อป้องกันไม่ให้ส่งแบบฟอร์ม:

ตัวอย่างจาวาสคริปต์

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
   
if (x == "") {
      alert("Name must be filled out");
      return false;
    }
}

สามารถเรียกใช้ฟังก์ชันได้เมื่อส่งแบบฟอร์ม:

ตัวอย่างแบบฟอร์ม HTML

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" 
method="post">
 Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

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

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>
</head>
<body>

<h2>JavaScript Validation</h2>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

</body>
</html>

JavaScript สามารถตรวจสอบการป้อนตัวเลขได้

JavaScript มักใช้เพื่อตรวจสอบความถูกต้องของการป้อนข้อมูลตัวเลข:

กรุณากรอกตัวเลขระหว่าง 1 ถึง 10

<script> function myFunction() { var x; var text = "Input OK"; //Get the value of input field with id="numb" x = document.getElementById("numb").value; // If x is Not a Number, or x is less than one, or x is grather than 10 then if (isNaN(x) || x < 1 || x > 10) { text = "Not valid"; } document.getElementById("demo").innerHTML = text; }

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Please input a number between 1 and 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

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

<script>
function myFunction() {
  // Get the value of the input field with id="numb"
  let x = document.getElementById("numb").value;
  // If x is Not a Number or less than one or greater than 10
  let text;
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

การตรวจสอบความถูกต้องของแบบฟอร์ม HTML อัตโนมัติ

การตรวจสอบรูปแบบ HTML สามารถทำได้โดยอัตโนมัติโดยเบราว์เซอร์:

หากฟิลด์แบบฟอร์ม (fname) ว่างเปล่า แอตทริบิวต์ required จะป้องกันไม่ให้แบบฟอร์มนี้ถูก ส่ง:

ตัวอย่างแบบฟอร์ม HTML

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
	<input type="submit" value="Submit">
</form>

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>

</body>
</html>

การตรวจสอบความถูกต้องของรูปแบบ HTML อัตโนมัติไม่ทำงานใน Internet Explorer 9 หรือรุ่นก่อนหน้า

การตรวจสอบข้อมูล

การตรวจสอบความถูกต้องของข้อมูลเป็นกระบวนการเพื่อให้แน่ใจว่าอินพุตของผู้ใช้นั้นสะอาด ถูกต้องและเป็นประโยชน์

งานตรวจสอบโดยทั่วไปคือ:

  • ผู้ใช้ได้กรอกข้อมูลในช่องที่จำเป็นทั้งหมดแล้วหรือยัง?

  • ผู้ใช้ได้ป้อนวันที่ที่ถูกต้องหรือไม่?

  • ผู้ใช้ป้อนข้อความในช่องตัวเลขหรือไม่?

บ่อยครั้ง วัตถุประสงค์ของการตรวจสอบข้อมูลคือเพื่อให้แน่ใจว่าผู้ใช้ป้อนข้อมูลถูกต้อง

การตรวจสอบความถูกต้องสามารถกำหนดได้หลายวิธี และนำไปใช้ได้หลายวิธี วิธีทางที่แตกต่าง.

การตรวจสอบฝั่งเซิร์ฟเวอร์ ดำเนินการโดยเว็บเซิร์ฟเวอร์ หลังจากที่ป้อนข้อมูลถูกส่งไปยัง เซิร์ฟเวอร์

การตรวจสอบฝั่งไคลเอ็นต์ ดำเนินการโดยเว็บเบราว์เซอร์ ก่อนที่อินพุตจะถูกส่งไปยังเว็บเซิร์ฟเวอร์

การตรวจสอบข้อจำกัด HTML

HTML5 แนะนำแนวคิดการตรวจสอบ HTML ใหม่ที่เรียกว่า ข้อจำกัด การตรวจสอบ

การตรวจสอบข้อจำกัด HTML ขึ้นอยู่กับ:

  • การตรวจสอบข้อจำกัด HTML แอตทริบิวต์อินพุต

  • การตรวจสอบข้อจำกัด ตัวเลือกหลอก CSS

  • การตรวจสอบข้อจำกัด คุณสมบัติและวิธีการ DOM

คุณสมบัติอินพุต HTML การตรวจสอบข้อจำกัด

disabled

ระบุว่าองค์ประกอบอินพุตควรจะปิดการใช้งาน

max

ระบุค่าสูงสุดขององค์ประกอบอินพุต

min

ระบุค่าต่ำสุดขององค์ประกอบอินพุต

pattern

ระบุรูปแบบค่าขององค์ประกอบอินพุต

required

ระบุว่าช่องป้อนข้อมูลต้องมีองค์ประกอบ

type 

ระบุประเภทขององค์ประกอบอินพุต

หากต้องการดูรายการทั้งหมด ให้ไปที่ HTML คุณสมบัติอินพุต

ตัวเลือกหลอก CSS การตรวจสอบข้อจำกัด

:disabled

เลือกองค์ประกอบอินพุตที่มีแอตทริบิวต์ "disabled" ที่ระบุ

:invalid

เลือกองค์ประกอบอินพุตที่มีค่าไม่ถูกต้อง

:optional

เลือกองค์ประกอบอินพุตที่ไม่มีการระบุแอตทริบิวต์ "required"

:required

เลือกองค์ประกอบอินพุตที่มีแอตทริบิวต์ "required" ที่ระบุ

:valid

เลือกองค์ประกอบอินพุตที่มีค่าที่ถูกต้อง

หากต้องการดูรายการทั้งหมด โปรดไปที่ CSS คลาสหลอก