البرنامج المساعد العملي والجمال bootstrapvalidator

توصي هذه المقالة بوجود bootstrapvalidator.js المصنوع من Twitter. تم تصنيع Bootstrap من Twitter ، لذا فإن استخدام المدقق الأصلي أكثر جدارة بالثقة. سيكون هناك العديد من النماذج للبحث عن bootstrapvalidator على Baidu ، لكنني أوصي بهذا فقط:

1. ألق نظرة

للحصول على مقدمة بسيطة ، إليك فحص فارغ فقط.

bootstrapvalidator عنوان التنزيل الرسمي

2. مرجع الموارد

بعد تنزيل حزمة الموارد ، يمكنك رؤية الدليل التالي.

ثم قدم الملفات الثلاثة التالية إلى مشروعك.

 <link type = "text/css" rel = "stylesheet" href = "$ {ctx}/components/validate/css/boostrapvalidator.css"/> <script type = "text/javaScript" src = "$ {ctx}/components/validate/js/bootstrapvalidator.js"> </script> <script type = "text/javaScript" src = "$ {ctx}/components/validate/js/language/zh_cn.js

3. اسم العضو ليس تكوين المشروع الفارغ

 <form action = "$ {ctx}/login" method = "post" onsubmit = "return facalateCallBack (this)"> <viv> <vile> <blabe> حساب </label> <input type = "text" autofocus name = "/div> </div>

Data-BV-Notempty يعني أنه يجب استخدام رقم العضو كتحقق فارغ.

مطلوب div من مجموعة النماذج ، وإلا سيتم الإبلاغ عن خطأ "الكثير من العودية".

عند إرسال النموذج ، سيتم تنفيذ طريقة ValyAteCallback. يتم تقديم هذه الطريقة على وجه التحديد في الخطوة 5.

4. تمكين التحقق من Bootstrap بعد تحميل الصفحة

 $ (function () {// التحقق من صحة النموذج $ ("form.required-viadidate"). كل (function () {var $ form = $ (this) ؛ $ form.bootstrapvalidator () ؛ // fix bootstrap addrative submitured exmentive exmentive exmented ؛ }) ؛

أضف سمة "class =" مطلوبة التحقق "في نموذج النموذج ، ثم الحصول على نموذج النموذج المقابل من خلال jQuery ، وقم بتنفيذ تحميل bootstrapvalidator الافتراضي عليه.

تأكد من الانتباه إلى بعض الكود الذي تم تعليقه في الرمز أعلاه. للحصول على التفاصيل ، يرجى الرجوع إلى ما يلي لإصلاح الأخطاء المقدمة من BootstrapValidator مرارًا وتكرارًا. المحتوى المحدد كما يلي

Bootstrapvalidator جميل جدًا ، ولكن غالبًا ما تكون هناك نوايا قاتلة مخبأة تحت وجهك الجميل. هذا هو السبب في وجود أخطاء التقديم المتكررة .

حل:

 // التحقق من صحة النموذج $ ("form.required-viated" ، $ p) .each (function () {var $ form = $ (this) ؛ $ form.bootstrapvalidator (). on ('success.form.bv' ، function (e) {// منع الحدث الافتراضي من الالتزام e.preventdefault () ؛}) ؛}) ؛

قم بتعيين طريقة On لـ bootstrapvalidator ، الذي يكون مفتاحه هو النجاح.

التحقيق في الأخطاء:

نتائج المسح:

1. عندما لا تستخدم bootstrapvalidator ، لن تكون هناك مشكلة كما هو موضح في الشكل.

2. فقط عند النقر على المرة الأولى ، سيتم تكرار التقديم مرتين. بعد ذلك ، بعد إعادة إدخال اسم المستخدم ، ستقوم بإرساله في وقت واحد.

الأخطاء يحدث البيئة:

انسخ الرمز كما يلي: <form action = "$ {ctx}/mem/login؟ callbackType = forward" method = "post" onsubmit = "return validateCallback (this ، tabajaxdone)" type = "login">

...

<button type = "submit"> إرسال </button>

</form>

يصف:

هذا نموذج نموذج عادي ، مع عنوان الطلب في الإجراء ، وهناك طريقة OnSubmit في النموذج ، والتي تتمثل بشكل أساسي في التحقق من النموذج ، ثم إرسال الطلب ، وأخيراً اتصل على طريقة TabajaxDone.

تحليل الأخطاء:

1. بالتأكيد لا توجد مشكلة في النموذج. إذا لم يكن هناك التحقق من صحة bootstrap ، فلا توجد مشكلة على الإطلاق.

2. لم تكن هناك مشكلة عند استخدام التحقق من صحة jQuery من قبل.

3. ثم يمكن أن تحدث المشكلة فقط على التحقق من صحة Bootstrap.

4. لا توجد مشكلة في الاستخدام الافتراضي لمثابة Bootstrap ، لأنه سيتم تكراره فقط عند إرسال النقر الأول.

5. ثم قد يكون هذا هو أن Bootstrap التحقق من صحة لديه طلب التقديم الافتراضي.

إذا نظرت إلى كائن التحقق من صحة مرة أخرى ، يمكنك أن ترى أن هناك العديد من الأحداث افتراضيًا ، من بينها الأشكال الأكثر مشبوهة ، مما يعني أنه قد يؤدي إلى طلب التقديم مرة أخرى.

أخطاء الأخطاء:

 // التحقق من صحة النموذج $ ("form.required-viadidate" ، $ p) .each (function () {var $ form = $ (this) ؛ $ form.bootstrapvalidator () ؛ // .on ('success.form.bv' ، function () {// // منع تقديم الحدث الافتراضي //

1. عندما يتم تحميل الصفحة لأول مرة ، يجب تحميل bootstrapvalidator في الطريقة أعلاه قبل إجراء التحقق من البيانات الأمامية.

2. لقد رأيت الرمز الملبس ، ربما يمكنك تخمينه ، وهذا هو الحل. هذا صحيح ، أضف معالجة الحدث هذه لتشكيل واستخدام E.PreventDefault () ؛ لمنع تقديم الحدث الافتراضي.

5. تحقق من العنصر عند إرسال النموذج

 دالة ValiteCallback (النموذج ، رد الاتصال ، تأكيد) {yunm.debug ("أدخل التحقق من صحة النموذج وتقديم النموذج") ؛ var $ form = $ (form) ؛ var data = $ form.data ('bootstrapvalidator') ؛ إذا (البيانات) {// المكونات التي إصلاح الذاكرة لا تتحقق من data.validate () ؛ if (! data.isvalid ()) {return false ؛ }} $ .ajax ({type: form.method || 'post' ، url: $ form.attr ("Action") ، data: $ form.SerializeArray () ، datatype: "json" ، cache: false ، success: callback || العودة خطأ ؛}

بعد الحصول على النموذج في ValidateCallback ، يمكن إرجاع النموذج من خلال طريقة Isvalid للتحقق مما إذا كان يمر.

بعد تمرير التحقق من النموذج ، أرسل النموذج إلى الخادم من خلال AJAX.

إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:

Bootstrap التعلم البرنامج التعليمي

Bootstrap البرنامج التعليمي العملي

تعليمي استخدام المكونات الإضافية Bootstrap

ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.