หน้าใด ๆ ที่เกี่ยวข้องกับข้อมูลการแก้ไขของผู้ใช้และการบันทึกเกี่ยวข้องกับการตรวจสอบว่าข้อมูลตรงตามข้อกำหนดและต้องการการตรวจสอบจากไคลเอนต์และฝั่งเซิร์ฟเวอร์หรือไม่
การตรวจสอบด้านการบริการลูกค้าเป็นหลักเพื่อปรับปรุงประสบการณ์ผู้ใช้ในขณะที่การตรวจสอบทางฝั่งเซิร์ฟเวอร์คือเพื่อให้แน่ใจว่าการปฏิบัติตามข้อมูล
ปลั๊กอินนี้ยังรองรับการยืนยันแบบฟอร์มสำหรับคุณ เพิ่มความต้องการ: จริงกับการกำหนดค่าของคอลัมน์ที่ต้องตรวจสอบ เมื่อสร้างฉลากใหม่ที่ด้านหน้าขององค์ประกอบฟอร์ม A * จะถูกสร้างขึ้นโดยอัตโนมัติที่ด้านหน้าของฉลากซึ่งใช้เพื่อแจ้งว่าข้อมูลจะถูกตรวจสอบอีกครั้ง
ใช้การตรวจสอบ สำหรับการใช้งานเฉพาะโปรดดู API ของการตรวจสอบ jQuery
รหัสมีดังนี้ (ที่อยู่หน้า: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form5-validation.html):
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> การตรวจสอบแบบฟอร์ม </title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "Stylesheet" rel = "stylesheet" href = "../ css/site.css"> <script src = "../ lib/jQuery.js"> </script> <script src = "../ lib/jQuery.validate.js"> </script> <script src = " src = "../ scripts/global.js"> </script> <!-ปลั๊กอิน-> <script src = "../ scripts/plugin.js"> </script> </head> <body> <div> <dark> <label> Smart Form ด้วยการตรวจสอบ id = "formContainer"> </dorm> </div> <div> <div> <dable> บทนำ </label> </div> <div> <dable> การตรวจสอบรูปแบบ </h3> <plockquote> <p> ใช้การตรวจสอบความถูกต้องของ jQuery เพื่อการตรวจสอบความถูกต้อง สำหรับวิธีการตรวจสอบอื่น ๆ โปรดดูการตรวจสอบความถูกต้องของ jQuery วิธีการตรวจสอบที่กำหนดเอง global.fn.setDefaultValidator () ในไฟล์ global.js ไฟล์จะถูกเปลี่ยนเป็นไฟล์เครื่องมือซึ่งกำหนดวิธีการเครื่องมือมากมายรวมถึงรูปแบบการทำให้เป็นอนุกรมการจัดรูปแบบวันที่การตัดสินอาร์เรย์การตรวจสอบเริ่มต้น eles = [[{label: {text: 'custom ชื่อผู้ใช้: '}, ele: {type:' text ', ชื่อ:' ชื่อผู้ใช้ ', ชื่อ:' ชื่อผู้ใช้: ', ต้องการ: true}}, {ele: {type:' Radio ', nam E: 'Sex', title: 'เพศ:', รายการ: [{text: 'male', value: 1}, {text: 'female', value: 2}]}}, {ele: {type: 'ช่องทำเครื่องหมาย', ชื่อ: 'plant', ชื่อ: 'การใช้แพลตฟอร์ม:', รายการ: [{text: 'แอพ', ค่า: 'แอป'}, {text: 'เว็บ', ค่า: 'เว็บ'}]}} ], [{ele: {type: 'select', ชื่อ: 'Province', ชื่อ: 'จังหวัด:', withnull: จริง, รายการ: [{text: 'guangdong', ค่า: 'gd'}, {text: 'hunan', ค่า: 'hn'} type = "Radio"> '}, type:' text ', ชื่อ:' displayName ', ชื่อเรื่อง:' แสดงชื่อ: '}}, {ele: {type:' search ', title:' product ', id:' productname ', true}}] ระยะเวลา: '}}, {ele: {type:' datetime ', ชื่อ:' todate ', ชื่อ:' ~ '},]]; // องค์ประกอบรูปแบบที่ซ่อนอยู่ส่วนใหญ่ใช้สำหรับการแก้ไข '1,3'}). render ('formContainer', ฟังก์ชัน (bf) {var model = {primarykey: 1, ชื่อผู้ใช้: 'xxg', เพศ: 1, พืช: ['แอพ', 'เว็บ'], จังหวัด: 'gd', displayName: 'test', productName: 'noteb ook ', fromedate:' 2015-06-10 ', todate:' 2015-08-08 '}; bf.initformdata (รุ่น);}); $ ("#btnsubmit"). () {if (! $ ("#formContainer"). ถูกต้อง ()) {แจ้งเตือน ("การตรวจสอบล้มเหลว!");} อื่น {var postdata = bsform.getFormData (); แจ้งเตือน ("ข้อมูลการแสดงออกที่ได้รับคือ:" json.stringify global.fn.setDefaultValidator (); // กำหนดกฎการตรวจสอบ $ ("#formContainer"). ตรวจสอบ ({กฎ: {ชื่อผู้ใช้: {จำเป็น: จริง, minlength: 3, maxlength: 10}, productName: {จำเป็น: จริง}}});คอลัมน์ชื่อผู้ใช้ได้รับการกำหนดค่าด้วยการตรวจสอบการเติมและความยาวที่จำเป็น อินเทอร์เฟซที่กำลังรันลบค่าชื่อผู้ใช้ คุณสามารถดูเอฟเฟกต์เมื่อส่งแบบฟอร์ม:
การเรนเดอร์มีดังนี้: