JavaScript ตรวจสอบแบบฟอร์ม
ตรวจสอบรูปแบบ HTML สามารถทำได้โดยใช้ JavaScript
ถ้าเขตข้อมูลฟอร์ม (fname) เป็นที่ว่างเปล่า, ฟังก์ชั่นนี้จะแจ้งเตือนข้อความและกลับเท็จเพื่อป้องกันไม่ให้รูปแบบจากการถูกส่ง:
ตัวอย่าง JavaScript
function validateForm() {
var
x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}ฟังก์ชั่นสามารถเรียกได้ว่าเมื่อส่งแบบฟอร์ม:
HTML ตัวอย่างแบบฟอร์ม
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form> ลองตัวเอง» HTML ตรวจสอบแบบฟอร์ม
ตรวจสอบรูปแบบ HTML ที่สามารถดำเนินการได้โดยอัตโนมัติโดยเบราเซอร์:
ถ้าเขตข้อมูลฟอร์ม (fname) เป็นที่ว่างเปล่าที่ required แอตทริบิวต์แบบฟอร์มนี้จะช่วยป้องกันจากการถูกส่ง:
HTML ตัวอย่างแบบฟอร์ม
<form action="demo_form.asp" method="post">
<input type="text" name="fname" required >
<input type="submit" value="Submit">
</form> ลองตัวเอง» ตรวจสอบรูปแบบ HTML โดยอัตโนมัติไม่ทำงานใน Internet Explorer 9 หรือก่อนหน้านั้น
การตรวจสอบข้อมูล
การตรวจสอบข้อมูลเป็นกระบวนการของการสร้างความมั่นใจในการป้อนข้อมูลคอมพิวเตอร์ที่มีความสะอาดถูกต้องและมีประโยชน์
งานการตรวจสอบโดยทั่วไปคือ:
- มีผู้ใช้กรอกฟิลด์ที่จำเป็นทั้งหมดหรือไม่
- มีผู้ใช้ป้อนวันที่ถูกต้อง?
- มีผู้ใช้ป้อนข้อความในเขตข้อมูลตัวเลข?
ส่วนใหญ่มักจะมีวัตถุประสงค์ของการตรวจสอบข้อมูลที่มีเพื่อให้แน่ใจว่าการป้อนข้อมูลที่ถูกต้องเพื่อการประยุกต์ใช้คอมพิวเตอร์
การตรวจสอบสามารถกำหนดได้โดยวิธีการที่แตกต่างกันจำนวนมากและนำไปใช้ในรูปแบบที่แตกต่างกันมาก
ตรวจสอบด้านเซิร์ฟเวอร์ที่มีการดำเนินการโดยเว็บเซิร์ฟเวอร์หลังจากการป้อนข้อมูลได้รับการส่งไปยังเซิร์ฟเวอร์
การตรวจสอบด้านลูกค้าจะดำเนินการโดยเว็บเบราเซอร์ก่อนที่จะป้อนข้อมูลจะถูกส่งไปยังเว็บเซิร์ฟเวอร์
HTML จำกัด การตรวจสอบ
HTML5 แนะนำแนวคิดการตรวจสอบ HTML ใหม่ที่เรียกว่าการตรวจสอบข้อ จำกัด
การตรวจสอบข้อ จำกัด HTML คือบนตาม:
- การตรวจสอบข้อ จำกัด แอตทริบิวต์การป้อนข้อมูล HTML
- ข้อ จำกัด การตรวจสอบ CSS Selectors Pseudo
- ข้อ จำกัด การตรวจสอบคุณสมบัติและวิธีการ DOM
ข้อ จำกัด การตรวจสอบ HTML แอตทริบิวต์การป้อนข้อมูล
| คุณลักษณะ | ลักษณะ |
|---|---|
| disabled | ระบุว่าองค์ประกอบเข้าควรจะปิดการใช้งาน |
| max | ระบุค่าสูงสุดขององค์ประกอบเข้า |
| min | ระบุค่าต่ำสุดขององค์ประกอบเข้า |
| pattern | ระบุรูปแบบค่าขององค์ประกอบเข้า |
| required | ระบุว่าช่องใส่ต้องมีองค์ประกอบ |
| type | ระบุชนิดขององค์ประกอบเข้า |
สำหรับรายชื่อเต็มไป HTML แอตทริบิวต์การป้อนข้อมูล
ข้อ จำกัด การตรวจสอบ CSS Selectors Pseudo
| ผู้เลือก | ลักษณะ |
|---|---|
| :disabled | เลือกองค์ประกอบการป้อนข้อมูลด้วยแอตทริบิวต์ "คนพิการ" ที่ระบุ |
| :invalid | เลือกองค์ประกอบการป้อนข้อมูลที่มีค่าที่ไม่ถูกต้อง |
| :optional | เลือกองค์ประกอบการป้อนข้อมูลที่ไม่มีแอตทริบิวต์ "จำเป็น" ที่ระบุ |
| :required | เลือกองค์ประกอบการป้อนข้อมูลด้วยแอตทริบิวต์ "จำเป็น" ที่ระบุ |
| :valid | เลือกองค์ประกอบการป้อนข้อมูลที่มีค่าที่ถูกต้อง |
สำหรับรายการเต็มรูปแบบมีการ CSS Pseudo เรียน