ก่อนการอภิปรายอย่างลึกซึ้งเกี่ยวกับการตรวจสอบแบบฟอร์มลองคิดเกี่ยวกับความหมายที่แท้จริงของการตรวจสอบแบบฟอร์มของแบบฟอร์ม เท่าที่แกนกลางมีความกังวลการตรวจสอบแบบฟอร์มเป็นระบบที่ตรวจจับข้อมูลการควบคุมที่ไม่ถูกต้องสำหรับผู้ใช้ปลายทางและทำเครื่องหมายข้อผิดพลาดเหล่านี้ กล่าวอีกนัยหนึ่งการตรวจสอบแบบฟอร์มคือการดำเนินการตรวจสอบหลายชุดก่อนที่จะส่งเซิร์ฟเวอร์และแจ้งให้ผู้ใช้แก้ไขข้อผิดพลาด
แต่การตรวจสอบรูปแบบที่แท้จริงคืออะไร?
เป็นการเพิ่มประสิทธิภาพ
เหตุผลที่การตรวจสอบแบบฟอร์มเป็นการเพิ่มประสิทธิภาพเป็นเพราะไม่เพียงพอที่จะตรวจสอบให้แน่ใจว่าข้อมูลฟอร์มที่ส่งไปยังเซิร์ฟเวอร์ผ่านกลไกการตรวจสอบแบบฟอร์มนั้นถูกต้องและมีประสิทธิภาพ ในทางกลับกันการตรวจสอบแบบฟอร์มการออกแบบคือการทำให้เว็บแอปพลิเคชันโยนข้อผิดพลาดได้เร็วขึ้น กล่าวอีกนัยหนึ่งเป็นการดีที่สุดที่จะใช้กลไกการประมวลผลในตัวของเบราว์เซอร์เพื่อแจ้งหน้าเว็บของผู้ใช้ที่มีค่าการควบคุมแบบฟอร์มที่ไม่ถูกต้อง ในอดีตข้อมูลหันไปทางอินเทอร์เน็ตเพื่อให้เซิร์ฟเวอร์แจ้งให้ผู้ใช้ทราบว่าเขาป้อนข้อมูลที่ไม่ถูกต้อง หากเบราว์เซอร์สามารถถูกจับได้อย่างสมบูรณ์ก่อนออกจากลูกค้าเราควรใช้ข้อได้เปรียบนี้
อย่างไรก็ตามการตรวจสอบแบบฟอร์มเบราว์เซอร์นั้นไม่เพียงพอที่จะจัดการกับข้อผิดพลาดทั้งหมด
ต้องบอกว่า HTML5 ยังคงแนะนำวิธีการแปดวิธีในการตรวจสอบความถูกต้องของข้อมูลของการควบคุมแบบฟอร์ม ลองมาดูกันตามลำดับ แต่เรามาแนะนำวัตถุที่มีค่าสำหรับข้อเสนอแนะเพื่อตรวจสอบสถานะ
ในเบราว์เซอร์ที่รองรับการตรวจสอบแบบฟอร์ม HTML5 คุณสามารถเข้าถึงวัตถุที่มีความถูกต้องผ่านการควบคุมแบบฟอร์ม:
var value = document.myform.myInput.validity;
บรรทัดของรหัสนี้ได้รับวัตถุที่ถูกต้อง state ที่เรียกว่า myInput วัตถุมีการอ้างอิงถึงสถานะการตรวจสอบทั้งแปดและผลการตรวจสอบขั้นสุดท้าย
วิธีการโทรมีดังนี้:
valcheck.valid
หลังจากการดำเนินการเราจะได้รับค่าบูลีนที่ระบุว่าการควบคุมแบบฟอร์มได้ผ่านข้อ จำกัด การตรวจสอบทั้งหมดหรือไม่ คุณสามารถปฏิบัติต่อลักษณะมูลค่าเป็นผลการตรวจสอบขั้นสุดท้าย: หากมีการผ่านข้อ จำกัด ทั้งแปดตัวคุณลักษณะค่าจะเป็นจริงมิฉะนั้นตราบใดที่มีข้อ จำกัด ที่ล้มเหลวโลโก้ค่าคือ S. ทั้งหมด S.
ดังที่ได้กล่าวไว้ก่อนหน้านี้มีแปดข้อ จำกัด การตรวจสอบที่เป็นไปได้ในองค์ประกอบรูปแบบใด ๆ แต่ละเงื่อนไขมีชื่อคุณสมบัติที่สอดคล้องกันในวัตถุความถูกต้องของรัฐซึ่งสามารถเข้าถึงได้ในวิธีที่เหมาะสม ลองวิเคราะห์ทีละคนเพื่อดูว่าพวกเขาเกี่ยวข้องกับการควบคุมแบบฟอร์มอย่างไรและวิธีการตรวจสอบพวกเขาตามวัตถุความถูกต้องของรัฐ:
1. การประเมินค่าวัตถุประสงค์: ตรวจสอบให้แน่ใจว่าค่าในการควบคุมแบบฟอร์มได้รับการกรอกข้อมูล
การใช้งาน: ในการควบคุมแบบฟอร์มตั้งค่าคุณสมบัติที่ต้องการเป็นจริง
ตัวอย่าง:
<ประเภทอินพุต = ชื่อข้อความ = myText ที่ต้องการ>
คำแนะนำโดยละเอียด: หากการควบคุมแบบฟอร์มตั้งค่าคุณสมบัติที่ต้องการการควบคุมจะไม่ถูกต้องเสมอก่อนที่ผู้ใช้จะกรอกหรือเติมค่าโดยการเรียกรหัส ตัวอย่างเช่นกล่องป้อนข้อความที่ว่างเปล่าไม่สามารถผ่านการตรวจสอบที่ต้องการได้เว้นแต่จะป้อนข้อความใด ๆ ในนั้น เมื่อค่าอินพุตว่างเปล่า ValueMissing จะส่งกลับจริง
2. Typemismatchวัตถุประสงค์: เพื่อให้แน่ใจว่าการจับคู่ค่าควบคุมและประเภทที่คาดหวัง (เช่น numbe, อีเมล, URL ฯลฯ )
การใช้งาน: ระบุประเภทลักษณะเฉพาะของการควบคุมแบบฟอร์ม
ตัวอย่าง:
<ประเภทอินพุต = ชื่ออีเมล = myEmail>
คำแนะนำโดยละเอียด: ประเภทการควบคุมแบบฟอร์มพิเศษไม่ได้ใช้เพื่อปรับแต่งแป้นพิมพ์โทรศัพท์มือถือ สัญลักษณ์ในที่อยู่อีเมลหรือค่าอินพุตของการควบคุมจำนวน -Type ไม่ใช่ตัวเลขที่มีประสิทธิภาพจากนั้นเบราว์เซอร์จะทำเครื่องหมายการควบคุมนี้เพื่อระบุว่าประเภทไม่ตรงกัน ไม่ว่าข้อผิดพลาดอะไร Typemismatch จะกลับมาเป็นจริง
3. รูปแบบ mismatchวัตถุประสงค์: ตรวจสอบว่าอินพุตนั้นถูกต้องตามกฎรูปแบบที่ตั้งไว้บนตัวควบคุมแบบฟอร์มหรือไม่
การใช้งาน: ตั้งค่าคุณสมบัติรูปแบบบนตัวควบคุมแบบฟอร์มและให้กฎการจับคู่ที่เหมาะสม
ตัวอย่าง:
<ประเภทอินพุต = ชื่อข้อความ = รูปแบบ CreditCardNumber = [0-9] {16} target = '_lank'> กลไกการตรวจสอบนิพจน์ทั่วไป เมื่อคุณสมบัติรูปแบบถูกตั้งค่าเป็นตัวควบคุมตราบใดที่ค่าของการควบคุมอินพุตไม่ตรงตามกฎของโหมด Patternmismatch จะส่งคืนค่าที่แท้จริง จากสองด้านของการชี้นำผู้ใช้และการอ้างอิงทางเทคนิคคุณควรตั้งค่าคุณสมบัติชื่อในการควบคุมแบบฟอร์มที่มีลักษณะรูปแบบเพื่ออธิบายกฎ 4. เครื่องมือ วัตถุประสงค์: หลีกเลี่ยงค่าอินพุตที่มีอักขระมากเกินไป
การใช้งาน: ตั้งค่าคุณสมบัติความยาวสูงสุดในการควบคุมแบบฟอร์ม
ตัวอย่าง:
<ประเภทอินพุต = ชื่อข้อความ = LimitedDText MaxLength = 140>
คำอธิบายโดยละเอียด: หากความยาวของค่าอินพุตเกินความยาวสูงสุดคุณลักษณะเครื่องมือจะกลับมาเป็นจริง แม้ว่าการควบคุมแบบฟอร์มมักจะ จำกัด อยู่ที่ความยาวสูงสุดเมื่อผู้ใช้เป็นอินพุตในบางกรณีเช่นการตั้งค่าโปรแกรม แต่ก็ยังคงเกินค่าสูงสุด
5. rangeunderflow วัตถุประสงค์: จำกัด ค่าต่ำสุดของการควบคุมตัวเลข
การใช้งาน: ตั้งค่าคุณสมบัติ MIN สำหรับการควบคุมแบบฟอร์มและให้ค่าต่ำสุดที่อนุญาต
ตัวอย่าง:
<อินพุตประเภท = ช่วงชื่อ = ageCheck min = 18>
คำแนะนำโดยละเอียด: ในการควบคุมแบบฟอร์มที่ต้องตรวจสอบค่ามีแนวโน้มที่จะต่ำกว่าขีด จำกัด ล่างของการตั้งค่าชั่วคราว ในเวลานี้คุณลักษณะ Rangeunderflow ของความถูกต้องจะกลับสู่ TRUE
6. rangeOverflow วัตถุประสงค์: จำกัด ค่าสูงสุดของการควบคุมตัวเลข
การใช้งาน: ตั้งค่าคุณสมบัติสูงสุดสำหรับการควบคุมแบบฟอร์มและให้ค่าสูงสุด
ตัวอย่าง:
<ประเภทอินพุต = ช่วงชื่อ = KidageCheck max = 12>
คำอธิบายโดยละเอียด: คล้ายกับ rangeunderflow หากค่าของการควบคุมแบบฟอร์มมีขนาดใหญ่กว่าสูงสุดคุณลักษณะจะกลับมาเป็นจริง
7. stepmismatch วัตถุประสงค์: ตรวจสอบให้แน่ใจว่าค่าอินพุตเป็นไปตามขั้นต่ำสูงสุดและขั้นตอน
การใช้งาน: ตั้งค่าคุณสมบัติขั้นตอนสำหรับการควบคุมแบบฟอร์มระบุการเพิ่มขึ้นของค่า
ตัวอย่าง:
<อินพุตประเภท = ช่วงชื่อ = confidenCelevel min = 0 สูงสุด = 100 ขั้นตอน = 5>
คำอธิบายโดยละเอียด: ข้อ จำกัด นี้ใช้เพื่อให้แน่ใจว่ามูลค่าเป็นไปตามข้อกำหนดของขั้นต่ำ, สูงสุดและขั้นตอน กล่าวอีกนัยหนึ่งค่าปัจจุบันจะต้องเป็นผลรวมของคูณของค่าต่ำสุดและค่าของคุณลักษณะขั้นตอน ตัวอย่างเช่นตั้งแต่ 0 ถึง 100 ค่าคุณลักษณะขั้นตอนคือ 5 ในเวลานี้จะไม่มี 17 มิฉะนั้น stepmismatch จะส่งคืนค่าที่แท้จริง
8. CustomError วัตถุประสงค์: การส่งรหัสแอปพลิเคชันตั้งค่าและคำนวณข้อผิดพลาดอย่างชัดเจน
การใช้งาน: การโทร SetCustomValidity (ข้อความ) เพื่อวางชิ้นส่วนควบคุมแบบฟอร์มในสถานะ CustomError
ตัวอย่าง:
PasswordConfirmativeField.SetCustomValidity (ค่ารหัสผ่านไม่ตรงกัน);
คำแนะนำโดยละเอียด: เมื่อกลไกการตรวจสอบของเบราว์เซอร์ไม่สามารถใช้งานได้ข้อมูลข้อผิดพลาดการตรวจสอบที่กำหนดเองจะต้องแสดง เมื่อค่าอินพุตไม่ตรงตามกฎความหมายรหัสแอปพลิเคชันควรตั้งค่าข้อความการตรวจสอบที่กำหนดเองเหล่านี้
กรณีทั่วไปของข้อความการตรวจสอบที่กำหนดเองคือการตรวจสอบว่าค่าในการควบคุมมีความสอดคล้องกันหรือไม่ ตัวอย่างเช่นรหัสผ่านและรหัสผ่านยืนยันว่าค่าของผู้แพ้ทั้งสองไม่ตรงกัน ตราบใดที่ข้อความการตรวจสอบถูกปรับแต่งการควบคุมจะอยู่ในสถานะที่ไม่ถูกต้องและ CustomError จะกลับมาเป็นจริง หากต้องการลบข้อผิดพลาดเพียงเรียกใช้ setCustomValidity () บนตัวควบคุม
ข้างต้นเป็น 8 วิธีพื้นฐานที่ตรวจสอบโดยตารางเพียงอย่างเดียวใน HTML5 ฉันหวังว่ามันจะเป็นประโยชน์สำหรับผู้เริ่มต้น ฉันหวังว่าทุกคนจะสนับสนุน vevb wulin.com