บทความนี้แบ่งปันวิธีการทั่วไปของ JavaScript สำหรับการประมวลผลเหตุการณ์แบบฟอร์มสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. วิธีการทั่วไปในการเข้าถึงวัตถุแบบฟอร์ม:
①: ตามแอตทริบิวต์ ID ขององค์ประกอบ <form>;
var myform = document.getElementById ("myFormId"); // myFormid เป็น id ขององค์ประกอบ <ฟอร์ม>;
②: ตามแอตทริบิวต์ชื่อขององค์ประกอบ <form>;
var myform = document.forms ["myFormName"]; // myFormName เป็นชื่อขององค์ประกอบ <form>;
③: ใช้ชื่อฟอร์มโดยตรงเพื่อเข้าถึงแบบฟอร์ม:
var myform = document.myformName; // myFormName เป็นชื่อขององค์ประกอบ <form>;
2. เหตุการณ์ทั่วไปสำหรับแบบฟอร์ม:
①เหตุการณ์ onsubmit: เหตุการณ์นี้จะถูกเรียกใช้เมื่อคลิกปุ่ม "ส่ง" และอาจป้องกันการส่งแบบฟอร์ม ตัวอย่าง: การตรวจสอบของแบบฟอร์ม;
②เหตุการณ์ที่เกิดขึ้น: เหตุการณ์นี้จะถูกทริกเกอร์เมื่อผู้ใช้เปลี่ยนเนื้อหาและกล่องข้อความจะสูญเสียโฟกัส
ตัวอย่าง: การส่งแบบฟอร์ม
ส่วนต่อประสานแผนกต้อนรับ:
รหัสอินเทอร์เฟซเบื้องหน้า:
<form name = "myform" action = "JavaScript: Alert ('ลงทะเบียนสำเร็จ!');" method = "post" onsubmit = "return yanzheng ();"> <table> <tbody> <tr> <td> ชื่อผู้ใช้: </td> <td> <ชื่ออินพุต = "ชื่อผู้ใช้" id = "ชื่อผู้ใช้" type = "text"/> </td> <td allign = "ซ้าย" </td> </tr> <tr> <td> รหัสผ่าน: </td> <td> <อินพุต id = "รหัสผ่าน" onchange = "passwordleave ()" type = "รหัสผ่าน"/> </td> <td align = "left"> <p style = "สี: #ff0000">* id = "button2" type = "button" value = "medium" style = "พื้นหลังสี: #ff0000"/> <อินพุต id = "button3" type = "button" value = "strong" style = "พื้นหลังสี: #ff0000"/> <label id = "lavel"> </label> </p> </td> type = "text"/> </td> <td> <อินพุต id = "อายุ" type = "text"/> </td> <td> <p style = "สี: #ff0000">*</p> </td> </tr> <tr> <td> name = "sex" type = "Radio" value = "Female"/> ผู้หญิง </td> <td> align = "left"> <p style = "สี: #ff0000">*</p> </td> </tr> <tr> <td> เนื้อหา: </td> <td> value = "ความบันเทิง"/> ความบันเทิง <อินพุต type = "ช่องทำเครื่องหมาย" ชื่อ = "เนื้อหา" value = "การศึกษา"/> ความบันเทิง </td> <td align = "ซ้าย"> <p style = "สี: #ff0000">*</p> </td> </tr> <td> <td> <ตัวเลือกค่า = "2"> โรงเรียนอาวุโส </ตัวเลือก> <ตัวเลือกค่า = "3"> มหาวิทยาลัย </petion> <ตัวเลือกค่า = "4"> มหาวิทยาลัย </ตัวเลือก> </select> </td> <td Align = "left"> <p style = "color: #ff0000">*</p> size = "6" multiple = "หลาย"> <ตัวเลือกค่า = "1"> บาสเก็ตบอล </opovie> <ตัวเลือกค่า = "2"> ฟุตบอล </optup> <ตัวเลือกค่า = "3"> วอลเลย์บอล </opption> <ตัวเลือกค่า = "4"> style = "color: #ff0000">*</p> </td> </tr> <tr> <td> <อินพุต id = "button4" type = "ปุ่ม" onclick = "checkinfo ()" value = "ข้อมูลดู"/> </td> <td> name = "tijiao" value = "register"/> </td> <td> <input type = "reset" name = "Reset" value = "Reset"/> </td> </tr> </tbody> </table> </form>JS Script:
<script type = "text/javascript"> function yanzheng () {var b; var a = document.getElementById ("ชื่อผู้ใช้"); // รับชื่อผู้ใช้ชื่อ var p = document.getElementById ("รหัสผ่าน"); // รับค่ารหัสผ่านค่า var อายุ = myform.age.value; // รับค่าอายุถ้า (a.value.length <5 || a.value.length> 10) {alert ("ชื่อผู้ใช้ที่คุณป้อนเป็นรูปแบบที่ไม่ถูกต้อง!"); กลับเท็จ; } อื่นถ้า (p.value.length <5) {แจ้งเตือน ("ความยาวรหัสผ่านน้อยกว่า 5!"); กลับเท็จ; } อื่นถ้า (! ตรวจสอบ (อายุ)) {return false; } else {return true; }} การตรวจสอบฟังก์ชั่น (a) {// ตรวจสอบอายุ var ch, อายุ; สำหรับ (var i = 0; i <a.length; i ++) {ch = a.charat (i); ถ้า (ch <"0" || ch> "9") {แจ้งเตือน ("โปรดป้อนหมายเลขในตัวเลือกอายุ!"); กลับเท็จ; }} อายุ = parseInt (a); ถ้า (อายุ <10 || อายุ> 100) {แจ้งเตือน ("อายุไม่เป็นความจริง!"); กลับเท็จ; } return true; } ฟังก์ชั่น checkinfo () {// แสดงข้อมูลทั้งหมด var username = myform.username.value; // รับชื่อผู้ใช้ VAR รหัสผ่าน = myForm.Password.Value; // รับรหัสผ่าน var อายุ = myform.age.value; // รับ Age var sex = myform.sex; // รับเพศ var osex = ""; // ตั้งค่าตัวเลือกเพื่อรับเนื้อหา var เพศ = myform.content; // รับเนื้อหา var ocontent = ""; // ตั้งค่าตัวเลือกเพื่อรับเนื้อหา var eduleave = myform.edu_level; // รับการศึกษา var oedu = ""; // ตั้งค่าตัวเลือกเพื่อรับการศึกษา var intersent = myForm.like; // รับแบบฟอร์มงานอดิเรก var like = ""; // ตั้งค่าตัวแปรเพื่อรับตัวเลือกงานอดิเรกสำหรับ (var i = 0; i <sex.length; i ++) {// เพศถ้า (เพศ [i]. ตรวจสอบ) {osex = sex [i] .value; }} สำหรับ (var i = 0; i <content.length; i ++) {// เนื้อหาถ้า (เนื้อหา [i]. ตรวจสอบ) {ocontent += เนื้อหา [i] .value +""; }} สำหรับ (var i = 0; i <eduleave.length; i ++) {// การศึกษาถ้า (eduleave.selectedIndex> = 0) {oedu = eduleave.options [eduleave.selectedIndex] .Text; }} สำหรับ (var i = 0; i <intersent.length; i ++) {// งานอดิเรกถ้า (intersent.options [i]. selected) {olike += intersent.options [i] .Text +""; }} การแจ้งเตือน ("ชื่อผู้ใช้ของคุณคือ:" + ชื่อผู้ใช้ + "/n รหัสผ่านคือ:" + รหัสผ่าน + "/n อายุคือ:" + อายุ + "/n เพศคือ:" + ocontent + "/n การศึกษาคือ:" oedu + "/n งานอดิเรกคือ:" + olike); } function passwordleave () {var passwordleavel = myform.password.value; if (passwordleavel.length == "") {document.getElementById ("button1"). style.display = "ไม่มี"; document.getElementById ("button2"). style.display = "ไม่มี"; document.getElementById ("button3"). style.display = "ไม่มี"; } else {if (passwordleavel.length <= "5") {document.getElementById ("button1"). style.display = ""; document.getElementById ("button2"). style.display = "ไม่มี"; document.getElementById ("button3"). style.display = "ไม่มี"; } อื่นถ้า (passwordleavel.length <= "10") {document.getElementById ("button1"). style.display = ""; document.getElementById ("button2"). style.display = ""; document.getElementById ("button3"). style.display = "ไม่มี"; } else {document.getElementById ("button1"). style.display = ""; document.getElementById ("button2"). style.display = ""; document.getElementById ("button3"). style.display = ""; }}} ฟังก์ชั่น startBody () {document.getElementById ("button1"). style.display = "ไม่มี"; document.getElementById ("button2"). style.display = "ไม่มี"; document.getElementById ("button3"). style.display = "ไม่มี"; } </script>กรณีนี้เป็นเพียงแนวทางปฏิบัติทั่วไปเพียงไม่กี่อย่างและไม่เกี่ยวข้องกับเทคโนโลยีใด ๆ แต่เป็นเพียงเพื่อความสะดวกในการใช้ในครั้งต่อไป
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript