บทความนี้จะแนะนำคุณเกี่ยวกับวิธีการตัดสินรหัสตัวอย่างของการตรวจสอบแบบฟอร์ม ก่อนที่จะแนะนำข้อความหลักฉันจะแนะนำให้คุณรู้จักกับปลั๊กอิน
การแนะนำปลั๊กอิน
มาถ่ายรูปกันเถอะ:
ดาวน์โหลดที่อยู่: https://github.com/nghuuphuoc/bootstrapvalidator
เคล็ดลับการใช้งาน
วัฒนธรรมจีน:
หลังจากดาวน์โหลดปลั๊กอินแนะนำ /js/bootstrapvalidator/language/zh_cn.js ลงในไฟล์นั่นคือใช้วัฒนธรรมจีน
แบบฟอร์มการตรวจสอบก่อนส่ง:
ตัวอย่างการตรวจสอบรูปแบบที่สมบูรณ์ยิ่งขึ้น: http://www.jq22.com/yanshi522 อัปโหลดรหัสโดยตรง:
<! doctype html> <html> <head> <title> demo bootstrapvalidator </title> <link rel = "stylesheet" href = "ผู้ขาย/bootstrap/css/bootstrap.css"/> <link rel = "stylesheet" href = Fontawesome CSS หากคุณต้องการใช้ไอคอนข้อเสนอแนะที่จัดทำโดย fontawesome-> <!-<link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/font-aweses/../css/font-awesome src = "ผู้ขาย/jQuery/jQuery -... min.js"> </script> <script type = "text/javascript" src = "ผู้ขาย/bootstrap/js/bootstrap.min.js"> </script> <script type = "ข้อความ/javascript" src = "dist/js/bootstrapvalidator.js"> </script> </head> <body> <div> <div> <!-แบบฟอร์ม:-> <section> <section> <div> <div> <h> ลงทะเบียน </h> </div> <form id = "defaultform" name = "firstName" placeHolder = "ชื่อแรก"/> </div> <div> <อินพุตประเภท = "text" name = "LastName" placeholder = "นามสกุล"/> </div> </div> <div> <darble> ชื่อผู้ใช้ </label> <div> name = "email"/> </div> </div> <div> <dable> รหัสผ่าน </label> <div> <อินพุตประเภท = "รหัสผ่าน" ชื่อ = "รหัสผ่าน"/> </div> </div> <darmel name = "gender" value = "male"/> male </label> </div> <div> <dable> <input type = "Radio" name = "Gender" value = "Female"/> หญิง </label> </div> <div> <lable> <อินพุตประเภท = "Radio" Name = "Gender" value = "อื่น ๆ "/> name = "วันเกิด"/> (yyy/mm/dd) </div> </div> <div> <dabled> ภาษา </label> <divel ฝรั่งเศส </label> </div> <div> <label> <อินพุต type = "ช่องทำเครื่องหมาย" name = "ภาษา []" value = "เยอรมัน"/> เยอรมัน </label> </div> <divel> <label> <อินพุต type = "copbox" name = "languages []" value = "Russian"/> russian </label> </div อื่น ๆ </label> </div> </div> <div> <dable> ภาษาการเขียนโปรแกรม </label> <div> <divel java </label> </div> <div> <dable> <อินพุต type = "ช่องทำเครื่องหมาย" name = "โปรแกรม []" value = "c"/> c/c ++ </label> </div> <darble> <label> <อินพุต type = "checkbox" name = "programes []" value = "php"/> php </label /> perl </label> </div> <div> <dable> <อินพุต type = "ช่องทำเครื่องหมาย" name = "โปรแกรม []" value = "ruby"/> ruby </label> </div> <dable> <label> <อินพุต type = "checkbox" name = "programes []" programe = "python"/>> value = "python"/> python </label> </div> <div> <lable> <อินพุตประเภท = "ช่องทำเครื่องหมาย" ชื่อ = "โปรแกรม []" value = "javascript"/> javascript </label> </div> </div> <div> <label id = "captchaoperation" /> </div> </div> <div> <div> <button type = "subment" name = "signup" value = "ลงชื่อสมัครใช้"> ลงชื่อสมัครใช้ </button> <button type = "subment" name = "signup2" value = "ลงทะเบียน 2"> ลงทะเบียน 2 </button> แบบฟอร์ม </button> </div> </dorm> </div> </section> <!-::> </div> </div> <script type = "text/javascript"> $ (เอกสาร). พร้อม (ฟังก์ชัน () {// สร้าง captchafunction แบบง่าย ๆ min);}; $ ('#captchaoperation'). html ([randomnumber (1, 100), '+', randomnumber (1, 200), '=']. เข้าร่วม ('')); $ ('#defaultform'). bootstrapvalidator glyphicon-ok ', ไม่ถูกต้อง:' glyphicon glyphicon-remove ', การตรวจสอบ:' glyphicon glyphicon-refresh '}, ฟิลด์: {firstName: {ตัวตรวจสอบ: {notempty: {ข้อความ: 'นามสกุลเป็นสิ่งจำเป็นและไม่สามารถว่างเปล่า'}}}}, ชื่อผู้ใช้: {ข้อความ: 'ชื่อผู้ใช้ไม่ถูกต้อง', ตัวตรวจสอบ: {notempty: {ข้อความ: 'ชื่อผู้ใช้และไม่สามารถว่างเปล่า'}, stringLength: {min: 6, max: 30, ข้อความ: /^ [outa-za-z0-9_/.like+$/,Message: 'ชื่อผู้ใช้สามารถประกอบด้วยตัวอักษรจำนวนจุดและขีดล่าง'}, รีโมท: {url: 'remote.php', ข้อความ: 'ชื่อผู้ใช้ไม่สามารถใช้งานได้ {ตัวตรวจสอบความถูกต้อง: {emailaddress: {ข้อความ: 'อินพุตไม่ใช่ที่อยู่อีเมลที่ถูกต้อง'}}}}, รหัสผ่าน: {ตัวตรวจสอบ: {notempty: {ข้อความ: 'รหัสผ่านจำเป็นและไม่สามารถว่างเปล่า'}, {ฟิลด์: 'คำยืนยัน', ข้อความ: เป็นชื่อผู้ใช้ '}}}}, ยืนยัน Password: {ผู้ตรวจสอบ: {notempty: {ข้อความ:' จำเป็นต้องใช้รหัสผ่านยืนยันและไม่สามารถว่างเปล่า '}, เหมือนกัน: {ฟิลด์:' รหัสผ่าน ', ข้อความ:' รหัสผ่านและการยืนยันไม่เหมือนกัน {วันที่: {รูปแบบ: 'yyyy/mm/dd', ข้อความ: 'วันเกิดไม่ถูกต้อง'}}}, เพศ: {ผู้ตรวจสอบ: {notempty: {ข้อความ: พูด '}}},' โปรแกรม [] ': {ตัวตรวจสอบ: {ตัวเลือก: {min: 2, สูงสุด: 4, ข้อความ:' โปรดเลือก 2 - 4 ภาษาการเขียนโปรแกรมที่คุณทำได้ดีที่ '}}}, captcha: {ตัวตรวจสอบ: {callback: $ ('#captchaoperation'). html (). split ('), sum = parseint (รายการ []) + parseint (รายการ []); ค่าคืน == sum;}}}}}}); {$ ('#defaultform'). bootstrapvalidator ('ตรวจสอบ');}); $ ('#resetBtn') คลิก (ฟังก์ชัน () {$ ('#defaultForm'). ข้อมูล ('bootstrapvalidator'). resetForm (จริง);});ดูที่ 331 บรรทัดคลิกส่งใช้
$ ('#defaultform'). bootstrapvalidator ('ตรวจสอบ');การตรวจสอบแบบฟอร์มทริกเกอร์
นี่คือข้อผิดพลาดที่ฉันพบ:
ตรรกะเริ่มต้นของ bootstrapvalidator คือการหมุนปุ่มสีเทาออกเมื่อการตรวจสอบแบบฟอร์มล้มเหลว
อย่างไรก็ตามในโครงการปุ่มไม่ได้อยู่ในแบบฟอร์มและถูกส่งโดย AJAX ผ่านการเชื่อมโยงเหตุการณ์ แล้วคำถามคือ:
โครงการจำเป็นต้องไม่ดำเนินการเหตุการณ์ที่ตามมาเมื่อการตรวจสอบแบบฟอร์มล้มเหลว Baidu ไม่พบข้อมูลที่เกี่ยวข้องเป็นเวลานานและในที่สุดก็ขึ้นอยู่กับ Google:
$ ("#yourform") ส่ง (ฟังก์ชั่น (ev) {ev.preventdefault ();}); $ ("#ส่ง") on ("คลิก", function () {var bootstrapvalidator = $ ("#yourform"). data ('bootstrapvalidator'); bootstrapvalidator.validate (); ถ้า (bootstrapvalidator.isvalid ()) $ ("#yourform") ส่ง ();ข้างต้นเป็นความรู้ที่เกี่ยวข้องของการตรวจสอบแบบฟอร์มปลั๊กอิน bootstrapvalidator ใน bootstrap แนะนำให้คุณรู้จักโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!