HTML5 มีรูปแบบการเพิ่มประสิทธิภาพที่ยอดเยี่ยมไม่ว่าจะเป็นความหมายส่วนประกอบขนาดเล็กหรือการตรวจสอบรูปแบบข้อมูล ฉันเดาว่าคุณจะใช้ความเข้ากันได้ของเบราว์เซอร์เป็นข้ออ้างในการใช้คุณสมบัติใหม่เหล่านี้ แต่นี่ไม่ควรเป็นสาเหตุที่ทำให้คุณนิ่งเงียบ ดำเนินการ เมื่อคุณพยายามใช้คุณสมบัติใหม่ของแบบฟอร์มเหล่านี้จริงๆฉันสัญญาว่าคุณจะตกหลุมรักมัน หากข้อบกพร่องเพียงอย่างเดียวคือรูปแบบของกล่องพรอมต์เป็นค่าเริ่มต้นโดยเบราว์เซอร์คุณจะไม่สามารถเปลี่ยนได้โอเคถ้าคุณเชื่อว่าระดับความงามของนักออกแบบของผู้ผลิตเบราว์เซอร์ (ฉันเชื่อว่าระดับการออกแบบของพวกเขาสูงกว่าส่วนใหญ่ คนธรรมดามากกว่าคนธรรมดาส่วนใหญ่ดีถ้าคุณไม่พิจารณาความเข้ากันได้ของสไตล์) เพียงแค่รีบไปโรงเรียน!
การตรวจสอบพื้นเมือง ประเภทอินพุตHTML5 ให้การสนับสนุนแบบดั้งเดิมสำหรับการตรวจสอบรูปแบบข้อมูลมากมายเช่น ::
<อินพุต type = 'อีเมล'/>
เมื่อคลิกปุ่มส่งหากรูปแบบที่คุณป้อนไม่ตรงอีเมลจะทำให้ไม่สามารถส่งได้และเบราว์เซอร์จะแจ้งให้คุณทราบข้อความแสดงข้อผิดพลาด
ตัวอย่างเช่นภายใต้ Chrome:
สังเกต:1. เฉพาะเมื่อคุณส่งมันคุณจะเรียกการตรวจสอบของเบราว์เซอร์
2. ข้อมูลพรอมต์เบราว์เซอร์ที่แตกต่างกันแตกต่างกัน
3. เมื่ออินพุตหลายรายการไม่เป็นไปตามข้อกำหนดจะมีข้อผิดพลาดเพียงข้อเดียวเท่านั้น
อย่าคิดว่าเมื่อประเภทของอินพุตเท่ากับโทรศัพท์ถ้าคุณป้อนรูปแบบหมายเลขโทรศัพท์คุณจะถูกบล็อกโดยเบราว์เซอร์และแจ้งข้อความแสดงข้อผิดพลาดเมื่อส่ง คีย์บอร์ดดิจิตอลและไม่มีบทบาทในการตรวจสอบข้อมูล
ลวดลายคุณสามารถใช้แอตทริบิวต์รูปแบบเพื่อตั้งค่าการตรวจสอบรูปแบบที่กำหนดเองสำหรับเบราว์เซอร์โดยไม่ต้องให้รูปแบบข้อมูลการตรวจสอบดั้งเดิม ค่าของแอตทริบิวต์รูปแบบคือนิพจน์ทั่วไป (สตริง):
<อินพุต type = 'tel' pattern = '[0-9] {11}' ถ้า (this.value.length> 3) {// เงื่อนไขการตัดสินได้รับการปรับแต่งอย่างสมบูรณ์ input.setCustomValidity ('รูปแบบที่ไม่ถูกต้อง');} อื่น { input.setCustomValidity ('')}});แต่ละอินพุตแป้นพิมพ์รหัสจะกำหนดว่ารูปแบบถูกต้องหรือไม่จากนั้นเรียกใช้ setCustomValidity เพื่อตั้งค่าของการประเมินค่า อย่าคิดว่าเบราว์เซอร์คีย์ทุกตัวจะแจ้งผลลัพธ์ของคุณว่าผลลัพธ์นั้นถูกต้องหรือไม่
หากคุณไม่ได้คิดเกี่ยวกับเรื่องนี้คุณจะถามอย่างแน่นอนตั้งแต่นั้นมาทำไมคุณต้องผูกกิจกรรมคีย์บอร์ดสำหรับอินพุตและคุณต้องตัดสินสำหรับแต่ละอินพุต ส่งเหตุการณ์โดยตรงสำหรับแบบฟอร์ม
ด้วยรูปแบบและรูปแบบการตัดสินอินพุตในฐานะผู้ใช้แน่นอนหลังจากเรียนรู้ว่าฉันได้ป้อนรูปแบบที่ไม่ถูกต้องกล่องข้อความจะกลายเป็นสีแดง (หรือมีเคล็ดลับอื่น ๆ ) และทุกครั้งที่ฉันป้อนตัวละครถ้ามันถูกต้องกล่องข้อความจะกลับสู่ปกติ เราสามารถใช้คลาส Pseudo CSS เพื่อใช้ฟังก์ชั่นนี้:
อินพุต: จำเป็น {พื้นหลังสี: #ffe14d;} /* คลาส pseudo นี้ถูกตัดสินผ่านคุณสมบัติการประเมินค่า* / อินพุต: ไม่ถูกต้อง {เส้นขอบ: 2px red red;}หมวดหมู่หลอกที่ต้องการด้านบนให้สีพื้นหลังสีเหลืองสำหรับอินพุตที่ต้อง -มี แต่ว่างเปล่าในขณะที่คลาส pseudo ที่ไม่ถูกต้องด้านล่างจะเพิ่มด้านสีแดง 2px ให้กับอินพุตที่ไม่ได้รับการปรับปรุงทั้งหมด เราสามารถเพิ่มคลาสอินพุตลงในกล่องอินพุตของเราได้ทันที
เงื่อนไขการตัดสินของหมวดหมู่หลอกเหล่านี้กำลังตัดสินว่าคุณสามารถส่งแบบฟอร์มของแบบฟอร์มได้หรือไม่ -สไตล์สไตล์
ประสบการณ์การใช้งานที่ดีขึ้นข้อเสียอีกประการหนึ่งคือเมื่อมีการตั้งค่าอินพุตเป็นที่ต้องการเมื่อเริ่มต้นเพราะมันว่างเปล่าหมวดหมู่หลอกที่ไม่ถูกต้องจะทำงานบนมัน
เราสามารถเพิ่มอุปกรณ์การเลือกพาเรนต์. invalid ก่อนหมวดหมู่หลอกเหล่านี้ คุณสามารถตั้งค่าเหตุการณ์การส่ง
form.addeventListener ('ไม่ถูกต้อง', function () {this.className = 'ไม่ถูกต้อง'}, จริง) เนื่องจาก Invaild เป็นเหตุการณ์ที่เกิดขึ้นไม่ใช่เหตุการณ์ของ Form ดังนั้นเราจึงตั้งค่าพารามิเตอร์ที่สามเพื่อใช้การจับเหตุการณ์ ด้วยวิธีนี้มันก็เสร็จแล้ว
ตัวอย่างสุดท้ายถึงเวลาสรุปความรู้ที่เราได้เรียนรู้และสร้างแนวปฏิบัติที่ดีที่สุด:
<! {Border: 2px Solid Red;} </style> </head> <body> <form id = form> <label> อีเมล: <อินพุต type = อีเมลที่ต้องการ id = อีเมล> </label> <label> idcard: < ID ที่ต้องการ ID = IDCARD> </label> <input type = subment id = submit> </form> <script> var email = document.getElementById ('อีเมล'); ; } else {this.setCustomValidity ('')}});ภาพหน้าจอหลังจากการทำงานมีดังนี้:
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้