บทความนี้แนะนำ bootstrapvalidator.js ที่ทำจาก Twitter Bootstrap ทำจาก Twitter ดังนั้นการใช้ตัวตรวจสอบความถูกต้องดั้งเดิมนั้นน่าเชื่อถือมากขึ้น จะมีหลายรุ่นสำหรับการค้นหา bootstrapvalidator บน Baidu แต่ฉันแนะนำเพียงรุ่นนี้:
1. ลองดู
สำหรับการแนะนำง่าย ๆ นี่เป็นเพียงการตรวจสอบที่ว่างเปล่า
ที่อยู่ดาวน์โหลดอย่างเป็นทางการของ Bootstrapvalidator
2. การอ้างอิงทรัพยากร
หลังจากดาวน์โหลดแพ็คเกจทรัพยากรคุณสามารถดูไดเรกทอรีต่อไปนี้
จากนั้นแนะนำสามไฟล์ต่อไปนี้ในโครงการของคุณ
<link type = "text/css" rel = "stylesheet" href = "$ {ctx}/Components/validate/css/bootstrapvalidator.css"/> <script type = "text/javascript" src = "$ {ctx} type = "text/javascript" src = "$ {ctx}/Components/validate/js/language/zh_cn.js"> </script>3. ชื่อสมาชิกไม่ใช่การกำหนดค่าโครงการที่ว่างเปล่า
<form action = "$ {ctx}/login" method = "post" onsubmit = "return validateCallback (นี่)"> <div> <darm> <dable> บัญชี </label> <อินพุตประเภท = "ข้อความ" ชื่อ AutoFocus = "ผู้ใช้"data-bv-notempty หมายความว่าควรใช้หมายเลขสมาชิกเป็นการตรวจสอบที่ว่างเปล่า
จำเป็นต้องมีการจัดกลุ่มของกลุ่มแบบฟอร์มมิฉะนั้นจะมีการรายงานข้อผิดพลาด "การเรียกซ้ำมากเกินไป"
เมื่อส่งแบบฟอร์มแบบฟอร์มวิธีการ ValidateCallback จะถูกดำเนินการ วิธีนี้มีการแนะนำโดยเฉพาะในขั้นตอนที่ 5
4. เปิดใช้งาน Bootstrap Validator หลังจากโหลดหน้าเว็บ
$ (function () {// ตรวจสอบรูปแบบ $ ("form.urequired-validate"). แต่ละ (ฟังก์ชั่น () {var $ form = $ (นี่); $ form.bootstrapvalidator (); // แก้ไขการตรวจสอบ bootstrap ซ้ำ ๆ -เพิ่มแอตทริบิวต์ 'class = "ที่ต้องการ-ตรวจสอบ"' ในแบบฟอร์มจากนั้นรับแบบฟอร์มแบบฟอร์มที่สอดคล้องกันผ่าน jQuery และดำเนินการโหลด bootstrapvalidator เริ่มต้น
ให้แน่ใจว่าได้ให้ความสนใจกับรหัสบางส่วนที่แสดงความคิดเห็นในรหัสข้างต้น สำหรับรายละเอียดโปรดดูต่อไปนี้เพื่อแก้ไขข้อบกพร่องที่ส่งโดย bootstrapvalidator ซ้ำ ๆ เนื้อหาเฉพาะมีดังนี้
Bootstrapvalidator สวยงามมาก แต่มักจะมีเจตนาร้ายที่ซ่อนอยู่ใต้ใบหน้าที่สวยงามของคุณ นี่คือเหตุผลที่มี ข้อบกพร่องในการส่งซ้ำ
สารละลาย:
// ตรวจสอบรูปแบบ $ ("Form.Required-validate", $ p) .each (ฟังก์ชั่น () {var $ form = $ (นี่); $ form.bootstrapvalidator (). on ('success.form.bv', ฟังก์ชั่น (e) {// ป้องกันเหตุการณ์เริ่มต้นตั้งค่าวิธี ON สำหรับ bootstrapvalidator ซึ่งคีย์คือ success.form.bv และค่าคือ e.preventdefault ();
การตรวจสอบข้อผิดพลาด:
ผลการสำรวจ:
1. เมื่อคุณไม่ใช้ bootstrapvalidator จะไม่มีปัญหาดังที่แสดงในรูป
2. เฉพาะเมื่อคุณคลิกที่ครั้งแรกการส่งจะทำซ้ำสองครั้ง จากนั้นหลังจากเข้าสู่ชื่อผู้ใช้อีกครั้งคุณจะส่งมันในครั้งเดียว
ข้อผิดพลาดเกิดขึ้นสภาพแวดล้อม:
คัดลอกรหัสดังนี้: <form action = "$ {ctx}/mem/login? callbackType = forward" method = "post" onsubmit = "return validateCallback (tabajaxdone)" type = "เข้าสู่ระบบ">
-
<button type = "ส่ง"> ส่ง </button>
</form>
อธิบาย:
นี่เป็นแบบฟอร์มแบบฟอร์มทั่วไปโดยมีที่อยู่คำขอในการดำเนินการและมีวิธีการ onsubmit ในแบบฟอร์มซึ่งส่วนใหญ่จะตรวจสอบแบบฟอร์มจากนั้นส่งคำขอและในที่สุดก็โทรกลับวิธี Tabajaxdone
การวิเคราะห์ข้อผิดพลาด:
1. ไม่มีปัญหากับแบบฟอร์มแน่นอน หากไม่มีการตรวจสอบ bootstrap จะไม่มีปัญหาเลย
2. ไม่มีปัญหาเมื่อใช้ jQuery ตรวจสอบก่อนหน้านี้
3. จากนั้นปัญหาสามารถเกิดขึ้นได้ในการตรวจสอบความถูกต้องของ bootstrap เท่านั้น
4. ไม่มีปัญหากับการใช้งานเริ่มต้นของการตรวจสอบ Bootstrap เนื่องจากจะทำซ้ำเมื่อการคลิกครั้งแรกส่ง
5. จากนั้นอาจเป็นไปได้ว่าการตรวจสอบ bootstrap มีคำขอส่งเริ่มต้น
หากคุณดูวัตถุที่ตรวจสอบอีกครั้งคุณจะเห็นว่ามีเหตุการณ์มากมายตามค่าเริ่มต้นซึ่งเป็นรูปแบบที่น่าสงสัยที่สุดซึ่งหมายความว่าอาจทำให้คำขอส่งอีกครั้ง
ข้อบกพร่องการดีบัก:
// ตรวจสอบความถูกต้องของแบบฟอร์ม $ ("Form.Required-Validate", $ p) .Each (ฟังก์ชั่น () {var $ form = $ (this); $ form.bootstrapvalidator (); // .on ('success.form.bv', ฟังก์ชั่น (e) {// //1. เมื่อโหลดหน้าเว็บเป็นครั้งแรก Bootstrapvalidator จะต้องโหลดในวิธีข้างต้นก่อนที่จะสามารถตรวจสอบข้อมูลส่วนหน้าได้
2. คุณได้เห็นรหัสความคิดเห็นบางทีคุณอาจเดาได้และนั่นคือวิธีแก้ปัญหา ถูกต้องเพิ่มการประมวลผลเหตุการณ์นี้ในรูปแบบและใช้ e.preventDefault (); เพื่อป้องกันการส่งเหตุการณ์เริ่มต้น
5. ยืนยันรายการเมื่อส่งแบบฟอร์ม
ฟังก์ชั่น validateCallback (แบบฟอร์ม, การโทรกลับ, Confirmmsg) {yunm.debug ("ป้อนลงในแบบฟอร์มการตรวจสอบความถูกต้องและการส่ง"); var $ form = $ (แบบฟอร์ม); var data = $ form.data ('bootstrapvalidator'); if (data) {// ส่วนประกอบที่ซ่อมแซมหน่วยความจำไม่ได้ตรวจสอบ data.validate (); if (! data.isvalid ()) {return false; }} $ .ajax ({type: form.method || 'post', url: $ form.attr ("การกระทำ"), ข้อมูล: $ form.serializearray (), ข้อมูล: "JSON", แคช: เท็จ, ความสำเร็จ: การโทรกลับ ส่งคืน false;}หลังจากได้รับแบบฟอร์มใน ValidateCallback แบบฟอร์มสามารถส่งคืนผ่านวิธี isvalid เพื่อตรวจสอบว่าผ่านหรือไม่
หลังจากผ่านการตรวจสอบแบบฟอร์มแล้วให้ส่งแบบฟอร์มไปยังเซิร์ฟเวอร์ผ่าน AJAX
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน