في الآونة الأخيرة ، هناك العديد من الاستخدامات bootstrap. تصفح وثيقة bootstrap ، وجدت أن المكون الإضافي Popover مناسب بشكل خاص لمطالبات أخطاء التحقق من النماذج.
نظرًا لأنه تم تصنيعه بشكل متكرر ، فقد تم إغلاقه مؤخرًا وصُنعت في مكون مكون من قبل jQuery. من خلال هذا المكون الإضافي ، ما عليك سوى تحديد بيانات البيانات = "التحقق من القواعد" data -errmsg = "رسالة الخطأ" في علامة HTML. لماذا نحتاج إلى كتابة قواعد التحقق في علامة HTML؟ لأنني استخدمتها أيضًا للتحقق من الخلفية (الخلفية لا تستخدم العقدة ، فأنا أستخدم ASP الآن ، وسأنشر مقالًا خاصًا لكتابة المبادئ بعد الانتهاء من عملي).
<input id = "u_exam_idnumber" name = "u_exam_idnumber" placeholder = "الرجاء إدخال رقم تذكرة القبول لامتحان مدخل المدارس الثانوية" data-vaild = "^/d {5،20} $" data-errmsg = "رقم تذكرة القبول غير صحيح ، ويمكن أن يحتوي فقط على أرقام"التأثير النهائي هو على النحو التالي:
رمز البرنامج المساعد كما يلي:
"استخدام صارم" ؛/*jquery+نموذج التحقق من bootstrap بواسطة miaoqiyuan.cn المبدأ: http://www.miaoqiyuan.cn/products/vaild/jQuery.Vaild.js*/(function(jQuery){$.extend({Vaild : function(_this){if(!!$(_this).data("vaild") ){var pattern = new regexp ($ (_ this) .data ("vaild")) ؛ if (pattern.test ($ (_ this) .val ()) ) {$ (_ this) .parent (). removeclass ("has-error"). addClass ("has-success") ؛ $ (_ هذا) .popover ("تدمير") ؛} آخر {$ (_ this) .parent (). addClass ("has-error". "TOP"). البيانات ("التنسيب" ، "أعلى"). البيانات ("الحاوية" ، "الجسم"). البيانات ("المحتوى" ، $ (هذا) .Data ("errmsg")). popover ({"trigger": "manual"}). popover ("show") ؛ false ؛}} آخر {$ (_ هذا) .parent (). addClass ("has-success") ؛} return true ؛}}) ؛ $. _ This.length ؛ i ++) {checkResult = $. ) {$ (_ هذا [i])من السهل جدًا الاتصال ، فقط استخدم الكود التالي:
<script> $ ("form"). vaild () ؛ </script>عندما يفقد النموذج التركيز ، إذا لم يكن ذلك قانونيًا ، فسيتم مطالب الخطأ مباشرة. عند النقر فوق إرسال ، إذا كان هناك عنصر نموذج غير قانوني ، فسيتم منع النموذج من الاستمرار في الإرسال.
الخلفية الافتراضية لبوبوفر بيضاء ولا يمكن أن تكون بمثابة تحذير. علاوة على ذلك ، فإن إعداد الحشو كبير جدًا ويستغرق مساحة كبيرة. أخيرًا ، تعديل CSS لتحقيق تأثير لقطات الشاشة.
/*refactor popover*/. popover {background:#c00 ؛ color: #fff ؛}. popover .popover-content {padding: 1px 5px ؛}. popover.top> .arrow: بعد {porder-top-color:#c00 ؛ حدد {background-color:#f2dede ؛}.ما ورد أعلاه هو المكون الإضافي bootstrap popover الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!