แบบฟอร์มจาวาสคริปต์
การตรวจสอบแบบฟอร์ม JavaScript
การตรวจสอบความถูกต้องของแบบฟอร์ม HTML สามารถทำได้โดย JavaScript
หากช่องแบบฟอร์ม (fname) ว่างเปล่า ฟังก์ชันนี้จะแจ้งเตือนข้อความและคืนค่าเท็จเพื่อป้องกันไม่ให้ส่งแบบฟอร์ม:
ตัวอย่าง 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) ว่างเปล่าrequiredแอตทริบิวต์จะป้องกันไม่ให้ส่งแบบฟอร์มนี้:
ตัวอย่างแบบฟอร์ม 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 Attributes
- การตรวจสอบข้อจำกัดCSS Pseudo Selectors
- คุณสมบัติและวิธีการ ตรวจสอบข้อจำกัดของDOM
แอตทริบิวต์การป้อนข้อมูล HTML การตรวจสอบข้อจำกัด
| Attribute | Description |
|---|---|
| disabled | Specifies that the input element should be disabled |
| max | Specifies the maximum value of an input element |
| min | Specifies the minimum value of an input element |
| pattern | Specifies the value pattern of an input element |
| required | Specifies that the input field requires an element |
| type | Specifies the type of an input element |
สำหรับรายการทั้งหมด ไปที่HTML Input Attributes
การตรวจสอบความถูกต้องข้อจำกัด CSS Pseudo Selectors
| Selector | Description |
|---|---|
| :disabled | Selects input elements with the "disabled" attribute specified |
| :invalid | Selects input elements with invalid values |
| :optional | Selects input elements with no "required" attribute specified |
| :required | Selects input elements with the "required" attribute specified |
| :valid | Selects input elements with valid values |
สำหรับรายการทั้งหมด ไปที่CSS Pseudo Classes