เมื่อเร็ว ๆ นี้มีการใช้งานจำนวนมาก bootstrap การเรียกดูเอกสาร bootstrap ฉันพบว่าปลั๊กอิน popover เหมาะอย่างยิ่งสำหรับการแจ้งเตือนสำหรับข้อผิดพลาดการตรวจสอบแบบฟอร์ม
เนื่องจากมันทำบ่อยมากมันเพิ่งถูกปิดผนึกและกลายเป็นปลั๊กอิน jQuery ผ่านปลั๊กอินนี้เพียงกำหนด data-vaild = "การตรวจสอบกฎ" data-errmsg = "ข้อความแสดงข้อผิดพลาด" ในแท็ก HTML ทำไมเราต้องเขียนกฎการตรวจสอบลงในแท็ก HTML? เนื่องจากฉันยังใช้มันเพื่อตรวจสอบพื้นหลัง (พื้นหลังไม่ได้ใช้โหนดฉันใช้ ASP ตอนนี้และฉันจะโพสต์บทความพิเศษเพื่อเขียนหลักการหลังจากทำงานให้เสร็จ)
<อินพุต ID = "U_EXAM_IDNUMBER" ชื่อ = "U_EXAM_IDNUMBER" ตำแหน่งผู้ถือครอง = "โปรดป้อนหมายเลขตั๋วเข้าชมสำหรับการสอบเข้าโรงเรียนมัธยมต้น" data-vaild = "^/d {5,20} $" data-errmsg = "หมายเลขตั๋วการรับสมัครไม่ถูกต้องเอฟเฟกต์สุดท้ายมีดังนี้:
รหัสปลั๊กอินมีดังนี้:
"ใช้อย่างเข้มงวด";/*jQuery+แบบฟอร์มการตรวจสอบ bootstrap โดย miaoqiyuan.cn หลักการ: http://www.miaoqiyuan.cn/p/jquery-bootstrap-vaildation: http://ww.miaoqiyuan.cn http://www.miaoqiyuan.cn/products/vaild/jquery.vaild.js*/(function(jQuery) {$.extend( {vaild: function (_this) {ถ้า (!! $ (_ this) .data ("vaild") regexp ($ (_ this) .data ("vaild")); ถ้า (pattern.test ($ (_ this) .val ()) ) {$ (_ this) .parent (). RemoveClass ("Has-error"). addclass ("ประสบความสำเร็จ"); $ (_ this) .popover ("ทำลาย") ;} else {$ (_ this) .parent (). addclass ("Has-error"). RemoveClass ("ประสบความสำเร็จ"); $ (_ this) .data ("toogle", "top"). ข้อมูล ("ตำแหน่ง", "top"). ข้อมูล ("คอนเทนเนอร์", "body"). ข้อมูล ("เนื้อหา", $ (_ this) .data ("errmsg")). popover ({"ทริกเกอร์": "manual"}) true;}}); $. fn.extend ({vaild: function () {$ (this) .each (ฟังก์ชั่น (ดัชนี, _this) {$ (_ this) .submit (ฟังก์ชั่น () {var checkresult = true; สำหรับ (var i = 0; i <_this.length; checkResult;} ส่งคืน checkResult;}); สำหรับ (var i = 0; i <_this.length; i ++) {$ (_ this [i]). blur (ฟังก์ชั่น () {$. vaild (this);});}});}});}) (jquery);มันง่ายมากที่จะโทรเพียงแค่ใช้รหัสต่อไปนี้:
<script> $ ("ฟอร์ม"). vaild (); </script>เมื่อแบบฟอร์มสูญเสียการโฟกัสหากไม่ถูกกฎหมายข้อผิดพลาดจะได้รับแจ้งโดยตรง เมื่อคลิกส่งหากมีรายการแบบฟอร์มที่ผิดกฎหมายแบบฟอร์มจะถูกป้องกันไม่ให้ส่งต่อไป
พื้นหลังเริ่มต้นของป๊อปโอเวอร์เป็นสีขาวและไม่สามารถใช้เป็นคำเตือนได้ ยิ่งไปกว่านั้นการตั้งค่าช่องว่างภายในมีขนาดใหญ่เกินไปและใช้พื้นที่มากเกินไป ในที่สุดปรับ CSS เพื่อให้ได้ผลของภาพหน้าจอ
/*refactor popover*/. popover {พื้นหลัง:#c00; color: #fff;}. popover. popover-content {padding: 1px 5px;}. popover.top> .arrow: หลังจาก {border-top-color:#c00; เลือก {background-color:#f2dede;}. อินพุตที่ประสบความสำเร็จด้านบนเป็นปลั๊กอิน bootstrap popover ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!