JavaScript ฟอร์ม

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

การตรวจสอบฟอร์ม HTML สามารถทำด้วย JavaScript:

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

ตัวอย่าง JavaScript

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>

ลองด้วยตัวเอง

JavaScript สามารถตรวจสอบการเข้าถึงตัวเลข:

JavaScript มักจะถูกใช้สำหรับการตรวจสอบการเข้าถึงตัวเลข:

กรุณาใส่ตัวเลขจาก 1 ถึง 10:

ลองด้วยตัวเอง

การตรวจสอบฟอร์ม HTML อัตโนมัติ

การตรวจสอบฟอร์ม HTML สามารถดำเนินการโดยเว็บเบราว์เซอร์อัตโนมัติ:

หากฟิลด์ฟอร์ม (fname) ว่าง กำหนดรูปแบบของค่าอนุธรรณ์ input คุณสมบัติจะหยุดการส่งฟอร์มนี้:

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

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

ลองด้วยตัวเอง

คำแนะนำ:การตรวจสอบฟอร์ม HTML อัตโนมัติไม่ทำงานใน Internet Explorer 9 หรือตัวรุ่นเก่ากว่า。

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

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

งานตรวจสอบปกติคือ:

  • ผู้ใช้ได้กรอกข้อมูลในฟิลด์ที่จำเป็นหรือไม่?
  • ผู้ใช้มีการใส่วันที่ที่ถูกต้องหรือไม่?
  • ผู้ใช้มีการใส่ข้อความบนฟิลด์เลขหรือไม่?

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

การตรวจสอบสามารถถูกนิยามด้วยวิธีต่าง ๆ และแจกแจงด้วยวิธีต่าง ๆ。

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

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

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

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

HTML 约束验证基于：

  • HTML อนุธรรณ์เชิงหน้า
  • กำหนดรูปแบบของอนุธรรณ์ input
  • DOM แคร์ดและเทคนิค

HTML อนุธรรณ์เชิงหน้า

HTML อนุธรรณ์เชิงหน้า เลือกตัวแทน
แคร์ด disabled
กำหนดการให้ออนุธรรณ์ input ไม่สามารถใช้งาน max
กำหนดค่าสูงสุดของอนุธรรณ์ input min
กำหนดค่าต่ำสุดของอนุธรรณ์ input pattern
กำหนดรูปแบบของค่าอนุธรรณ์ input required
กำหนดกระบวนการต้องการกรอกข้อมูลในอนุธรรณ์ input type

เลือกอนุธรรณ์ input ที่มีค่าที่ถูกต้อง รายละเอียด HTML Inputถ้าต้องการรายการเต็ม โปรดเข้าเว็บไซต์

กำหนดรูปแบบของอนุธรรณ์ input

CSS ประกายเชิงหน้า เลือกตัวแทน
รายละเอียด :disabled
เลือกอนุธรรณ์ input ที่มีคุณสมบัติ "disabled" :invalid
เลือกอนุธรรณ์ input ที่มีค่าที่ผิด :optional
เลือกอนุธรรณ์ input ที่ไม่มีคุณสมบัติ "required" :required
เลือกอนุธรรณ์ input ที่มีคุณสมบัติ "required" :valid

เลือกอนุธรรณ์ input ที่มีค่าที่ถูกต้อง CSS ประกายถ้าต้องการรายการเต็ม โปรดเข้าเว็บไซต์