HTML5 มาพร้อมกับการเพิ่มประสิทธิภาพการตรวจสอบแบบฟอร์มการตรวจสอบและฟังก์ชั่นการปรับเปลี่ยนฟองสบู่

เมื่อเพื่อนหลายคนทำการตรวจสอบรูปแบบพวกเขาใช้ jQuery หรือ JS ด้วยตนเองหรือใช้ปลั๊ก jQuery ในการตรวจสอบ เพราะทุกคนคิดว่า HTML5 มาพร้อมกับการรับรองความถูกต้องนั้นไม่ค่อยดีนัก! ในความเป็นจริงตอนนี้ HTML5 มาพร้อมกับการกำหนดรูปแบบการตรวจสอบซึ่งตอนนี้ค่อนข้างทรงพลัง ลองมาดูรูปแบบเพื่อตรวจสอบในรูปแบบที่เขียนโดย Pure HTML5! ประสบการณ์!

คุณคิดอย่างไรกับผลกระทบนี้?

สาระสำคัญของเอฟเฟกต์นี้คือสามภาพ!

 .MYFORM SELECT: จำเป็น, .MYFORM อินพุต: จำเป็น, .MYFORM TEXTAREA: จำเป็นต้องใช้ {พื้นหลัง: #FFF (http://sandbox.runjs.cn/rs/rs/216/0y 89gzo2/star.jpg) No-Repeat 99 99 Center;} /right.png) ไม่มีการทำซ้ำ 99% ศูนย์; : //sandbox.runjs.cn/uploads/rs/216/0y89gzo2/error.png) ไม่มีการทำซ้ำ 99% ศูนย์;

จากนั้นเหตุการณ์การตรวจสอบ:

 oninvalid = this.setCustomValidity ('โปรดป้อนหมายเลขที่ถูกต้อง');

เมื่อรหัสผ่านการตรวจสอบสอดคล้องกันให้ใช้ JS

 ฟังก์ชั่น checkpassword () {var pass1 = document.getElementById (รหัสผ่าน);

สิ่งนี้ทำให้เอฟเฟกต์เสร็จสมบูรณ์!

ถ้าคุณคิดว่าฟองสบู่ที่สร้างขึ้นนี้ก็น่าเกลียดเช่นกัน! ดังที่แสดงด้านล่าง: ฉันต้องการเปลี่ยน!

ก่อนเวอร์ชันของ Google 29 เราสามารถใช้ Pseudo -Elements เพื่อปรับเปลี่ยนฟอง!

 : -webkit-Validation-Bubble {Min-Width: 152px; / ด้านบน: 4px; ซ้าย: 0px;} :: -webkit-validation-bubble-corly-clipper {text-allign: center;} :: olor: #444;}: -webkit-validation-bubble-message 1px Solid #F7CE39;

แต่วิธีนี้ถูกทอดทิ้งในภายหลัง! คุณจะพบว่าไม่มีการตอบสนองต่อการปรับเปลี่ยนฟอง! ดังนั้นจะปรับเปลี่ยนสไตล์ฟองได้อย่างไร? ที่นี่เป็นปัญหาเล็กน้อย! ความคิดอาจเป็นไปได้ว่าเราจะหยุดฟองเริ่มต้นเป็นครั้งแรกจากนั้นสร้างฟองใหม่!

 <form> <อินพุตที่จำเป็น> <pution> ส่ง </pution> </form> <script> document.quryselector (อินพุต) .addeventListener (incret, function) {event.prev entdefault ();});

รหัสมีดังนี้:

 ฟังก์ชั่น replacevalidationui (แบบฟอร์ม) {// ป้องกันฟองสบู่จาก Bubbles }); type = subment]); ick, function (เหตุการณ์) {var invalidfields = form .quryselectolll (: ไม่ถูกต้อง), listhtml =, errormessages = form.queerySelection (.err-messages), ฉลาก; InvalidFields.length; /li>;} age.innerhtml = listhtml; });} // แทนที่รูปแบบการตรวจสอบทั้งหมด uivar = document.quryselectiverall (แบบฟอร์ม);

HTML5 มาพร้อมกับ HTML5 มาเพื่อตรวจสอบการเพิ่มประสิทธิภาพประสบการณ์และฟังก์ชั่นการปรับเปลี่ยนฟอง ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!