ستعرضك هذه المقالة على كيفية الحكم على مدونة التحقق من النموذج. قبل تقديم النص الرئيسي ، سأقدم لك إلى المكون الإضافي.
مقدمة البرنامج المساعد
لنلتقط صورة أولاً:
تنزيل العنوان: https://github.com/nghuuphuoc/bootstrapvalidator
نصائح الاستخدام
الثقافة الصينية:
بعد تنزيل المكون الإضافي ، قدم/js/bootstrapvalidator/language/zh_cn.js في الملف ، أي تنفيذ الثقافة الصينية
نموذج التحقق قبل التقديم:
مثال أكثر ثراءً للتحقق من النموذج: http://www.jq22.com/yanshi522 ، قم بتحميل الكود مباشرة:
<! doctype html> <html> <head> <title> bootstrapvalidator demo </itlem> <link rel = "stylesheet Fontawesome CSS إذا كنت ترغب في استخدام أيقونات التغذية المرتدة التي توفرها FontaWesome-> <!-<link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/font-awesome/../css/font-awesome.cs"/>-> src = "Pendor/jQuery/jQuery -... min.js"> </script> <script type = "text/javaScript" src = "pondor/bootstrap/js/bootstrap.min.js src = "dist/js/bootstrapvalidator.js"> </script> </head> <body> <viv> <div> <!-النموذج:-> <siv> <viv> <v> <h> التسجيل </h> </h> </hed </div> name = "firstName" placeholder = "first name"/> </viv> <viv> <input type = "text" name = "lastName" placeholder = "last name"/> </viv> </viv> <viv> <blabel> username </babel> <div> name = "email"/> </viv> </viv> <viv> <label> كلمة المرور </label> <div> <inputy type = "password" name = "password"/> </viv> </div> <viv> <billy> retype password </bable> <div> <div type = "password" name = "inciptppassword"/>/div> <div> name = "gender" value = "male"/> male </billy> </viv> <viv> <blable> <input type = "radio" name = "gender" value = "female"/> female </sivel> </viv> <viv> <label> <inputy type = "radio" radio "name = name = "birthday"/> (yyy/mm/dd) </div> </viv> <viv> <billy> اللغات </label> <div> <blable> <input type = "checkbox" name = "languages [] French </billy> </viv> <viv> <blabel> <input type = "checkbox" name = "languages []" value = "german"/> german </billy> </viv> <viv> <label> <inport type = "checkbox" name = "languages []" value = "russian"/> Russian </siled> <iv> <ived> الآخر </billy> </viv> </viv> <viv> <blabe> لغات البرمجة </label> <viv> <viv> <blabe> <input type = "checkbox" name = "programs []" value = "net"/> .NET </babl> </siva> <div> <div> <div> <inpult type = "inpult joop =" programs = " type = "checkbox" name = "programs []" value = "c"/> c/c ++ </billy> </fire> <viv> <blabel> <input type = "checkbox" name = "programs [] perl </billy> </viv> <viv> <label> <input type = "checkbox" name = "programs []" value = "ruby"/> ruby </billy> </viv> <viv> <billy> <input type = "checkbox" = "type =" type = "programs [] value = "python"/> python </billy> </viv> <viv> <blabe> <input type = "checkbox" name = "programs []" value = "javaScript"/> javaScript </bably> </viv> <div> <label id = "captchaoperation"> /> </viv> </viv> <viv> <div> <button type = "provice" name = "signup" value = "sign up"> اشترك </button> <button type = "pridt" النموذج <//button> </div> </purm> </viv> </section> <!-: form-> </div> </viv> <script type = "text/javaScript min) ؛} ؛ $ ('#captchaoperation'). Glyphicon-Ok '، غير صالح:' glyphicon glyphicon-remove '، التحقق من صحة:' glyphicon glyphicon-reserfresh '} ، الحقول: {firstName: {notempators: {notempty: {message: "الاسم الأول مطلوب ولا يمكن أن يكون فارغًا}}} مطلوب ولا يمكن أن يكون فارغًا '}}}} ، اسم المستخدم: {message:' اسم المستخدم غير صالح '، المدققون: {notempty: {message:' اسم المستخدم مطلوب ولا يمكن أن يكون فارغًا '} ، stringlength: {min: 6 ، max: 30 ، message: "يجب أن يكون اسم المستخدم أكثر من 6 وأقل من 30 حرفًا. /^Budapa-za-z0-9_/./2010/emessage: "يمكن أن يتكون اسم المستخدم فقط من الأبجدية ، الرقم ، النقطة والفكين '} ، عن بعد: {url:' remote.php '، message:" اسم المستخدم غير متوفر'} ، {حقل: {Valitorators: {ilailAdDress: {message: "الإدخال ليس عنوان بريد إلكتروني صالح '}}}} ، كلمة المرور: {devalators: {notempty: {message:" كلمة المرور مطلوبة ولا يمكن أن تكون فارغة'} ، متطابقة: {الحقل: 'informpassword' اسم المستخدم '}}}} ، تأكيد passpassword: {devandors: {notempty: {message:' 'تأكيد كلمة المرور مطلوبة ولا يمكن أن تكون فارغة'} ، متطابقة: {الحقل: 'كلمة المرور' ، الرسالة: {التنسيق: 'yyyy/mm/dd' ، الرسالة: "عيد ميلاد غير صالح '}}} ، الجنس: {ادقة: {notempty: {message:" الجنس مطلوب'}}}}} ، '} {الاختيار: {min: 2 ، max: 4 ، message: 'الرجاء اختيار 2 - 4 لغات برمجة أنت جيد في'}}} ، captcha: {addrators: {callback: {message: 'ress refl' ، callback: function (value ، devandator) parseint (العناصر []) ؛ قيمة الإرجاع == sum ؛}}}}}}) ؛ // التحقق من صحة النموذج يدويًا $ ('#validentbtn'). انقر فوق (function () {$ ('#defaultform'). bootstrapvalidator ('validate') ؛}) ؛ $ ('#resetbtn') {$ ('#defaultform'). Data ('bootstrapvalidator'). reportform (true) ؛}) ؛}) ؛ </script> </body> </html>انظر إلى 331 سطرًا ، انقر فوق إرسال ، استخدم
$ ('#defaultform'). bootstrapvalidator ('Vality') ؛تحفيز التحقق من النموذج
هنا مأزق واجهته:
المنطق الافتراضي لـ BootstrapValidator هو تشغيل الزر الرمادي عند فشل التحقق من النموذج.
ومع ذلك ، في المشروع ، لا يكون الزر داخل النموذج ، ويتم تقديمه بواسطة Ajax من خلال ربط الحدث. ثم السؤال هو:
يحتاج المشروع إلى عدم تنفيذ الأحداث اللاحقة المقيدة عند فشل التحقق من النموذج. لم يستطع Baidu العثور على المعلومات ذات الصلة لفترة طويلة ، وأخيراً يعتمد على Google:
$ ("#yourform"). إرسال (دالة (ev) {ev.preventDefault () ؛}) ؛ $ ( $ ("#yourform"). البيانات ('bootstrapvalidator') ؛ bootstrapvalidator.validate () ؛ if (bootstrapvalidator.isvalid ()) $ (ما ورد أعلاه هو المعرفة ذات الصلة بمؤسسة التحقق من Formation BootstrapValidator في Bootstrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!