แบบฟอร์ม jQuery EasyUI - ตรวจสอบแบบฟอร์ม
กวดวิชานี้จะแสดงวิธีการตรวจสอบรูปแบบ กรอบ validatebox easyui ให้ plug-in ในการตรวจสอบรูปแบบ ในการกวดวิชานี้เราจะสร้างแบบฟอร์มการติดต่อและใช้ validatebox ปลั๊กอินในการตรวจสอบรูปแบบ จากนั้นคุณสามารถปรับเปลี่ยนได้ตามความต้องการของตัวเองในรูปแบบ
สร้างฟอร์ม (Form)
ลองสร้างแบบฟอร์มการติดต่อที่เรียบง่ายกับชื่ออีเมลเรื่องและข้อความสาขา:
<div style = "padding: 3px 2px; ขอบล่าง: # CCC 1px ของแข็ง"> ตรวจสอบแบบฟอร์ม </ div> <form id = "FF" method = "โพสต์"> <div> <label สำหรับ = "ชื่อ"> ชื่อ: </ label> <input class = "easyui-validatebox" type = "text" name = "ชื่อ" ที่จำเป็น = "true"> </ input> </ div> <div> <label สำหรับ = "อีเมล"> อีเมล์: </ label> <input class = "easyui-validatebox" type = "text" name = "อีเมล" ต้อง = "true" validType = "อีเมล"> </ input> </ div> <div> <label สำหรับ = "เรื่อง"> เรื่อง </ label> <input class = "easyui-validatebox" type = "text" name = "เรื่อง" ที่จำเป็น = "true"> </ input> </ div> <div> <label สำหรับ = "ข้อความ"> ข้อความ </ label> & lt; textarea name = "ข้อความ" style = "height: 60px;" & gt; & lt; / textarea & gt; </ div> <div> <ประเภทขาเข้า = "ส่ง" value = "ส่ง"> </ div> </ form>
เราได้เพิ่มรูปแบบที่เรียกว่า easyui-validatebox จะแท็กใส่ดังนั้นเครื่องหมายการตรวจสอบการป้อนข้อมูลที่จะนำไปใช้ตาม validType คุณสมบัติ
ป้องกันไม่ให้การส่งแบบฟอร์มเมื่อฟอร์มไม่ถูกต้อง
เมื่อผู้ใช้คลิกปุ่มส่งแบบฟอร์มถ้ารูปแบบไม่ถูกต้องเราควรจะหยุดการส่งแบบฟอร์ม
$ ( '# Ff'). แบบฟอร์ม ({ URL: 'form3_proc.php' onSubmit: ฟังก์ชั่น () { กลับ $ (นี้) .form ( 'ตรวจสอบ'); } ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) { $ .messager.alert ( 'ข้อมูล' ข้อมูล 'ข้อมูล'); } });
หากรูปแบบไม่ถูกต้องข้อความจะปรากฏ