คำถาม: วิธีการตรวจสอบแบบฟอร์มทันทีหลังจากอินพุตแทนที่จะตรวจสอบหลังจากส่งมันไม่สะดวกมาก (การค้นหาออนไลน์นั้นไม่ชัดเจนหรือไม่สมบูรณ์ ... )
วิธีการ: ในมุมมองของสิ่งนี้ Xiaoke, Shuishanqi กรอกรหัสและเพิ่มความเข้าใจส่วนตัวของ Xiaoke (สัญลักษณ์) มันเป็นเพียงสำหรับที่ Latecomers เพื่อหลีกเลี่ยงการออกนอกเส้นทาง โปรดวิพากษ์วิจารณ์และแก้ไขฮีโร่ทุกชนิด ... (โปรดทราบผู้แต่ง Xiexie) - - รุ่นตารางตารางและจะมีเวอร์ชัน jQuery ในอนาคต ...
หากช่วยคุณได้โปรดลอง (o) 〃ao ~
ภาพหน้าจอ:
รหัส:
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> การลงทะเบียนผู้ใช้ </title> <! type = "text/javascript"> // การตรวจสอบฟังก์ชั่นชื่อผู้ใช้ในเวลาที่เหมาะสม checkuse () {// การกำหนดตัวแปรตรวจสอบในแต่ละฟังก์ชั่นจะสามารถตรวจสอบได้ว่าแต่ละฟังก์ชั่นผ่านไปทีละรายการหลังจากส่งแบบฟอร์มซึ่งดีมาก (เช่นเดียวกับต่อไปนี้) การตรวจสอบ var; ชื่อผู้ใช้ var = document.getElementById ("ชื่อผู้ใช้") ค่า; if (username.length> 18 || username.length <6) {alert ("อินพุตชื่อผู้ใช้ผิดกฎหมายโปรดกลับเข้ามาอีกครั้ง!"); // นี่วิเศษมาก เมื่อคุณเข้าไปในสถานที่ที่ไม่ถูกต้องที่นี่จากนั้นในทางทฤษฎีแน่นอนว่าคุณต้องเข้าที่นี่ต่อไป (ดำเนินการต่อเพื่อโฟกัสที่นี่!) document.getElementById ("ชื่อผู้ใช้") โฟกัส (); ตรวจสอบ = เท็จ; } else {document.getElementById ("checktext1"). innerhtml = "* ชื่อผู้ใช้ประกอบด้วยอักขระ 6-18 บิต√"; ตรวจสอบ = จริง; } ส่งคืนเช็ค; } // ใช้นิพจน์ทั่วไปเพื่อตรวจสอบว่ารหัสผ่านตรงกับฟังก์ชั่น checkpwd () {var check; var reg = /[^a-za-z0-9 _]+ /; var regs = /^[a-za-z0-9_ /u4e00- /u9fa5] + $ /; var password = document.getElementById ("รหัสผ่าน") ค่า; if (password.length <6 || password.length> 18 || regs.test (รหัสผ่าน)) {แจ้งเตือน ("การป้อนรหัสผ่านผิดกฎหมายโปรดกลับเข้ามาอีกครั้ง!"); document.getElementById ("รหัสผ่าน"). focus (); ตรวจสอบ = เท็จ; } else {document.getElementById ("checktext2"). innerhtml = "* รหัสผ่านประกอบด้วย 6-18 อักขระและต้องมีตัวอักษรตัวเลขและเครื่องหมายวรรคตอน√"; ตรวจสอบ = จริง; } ส่งคืนเช็ค; } // ตรวจสอบว่ารหัสผ่านไม่สอดคล้องกันหรือไม่! ฟังก์ชั่น checkpwdc () {var check; var password = document.getElementById ("รหัสผ่าน") ค่า; var pwdc = document.getElementById ("PWDC") ค่า; ถ้า (รหัสผ่าน! = PWDC) {แจ้งเตือน ("รหัสผ่านไม่สอดคล้องกันเมื่อป้อนรหัสผ่านโปรดกลับเข้ามาอีกครั้ง!"); document.getElementById ("PWDC"). focus (); ตรวจสอบ = เท็จ; } else {document.getElementById ("checktext3"). innerhtml = "* โปรดป้อนรหัสผ่านของคุณอีกครั้ง√"; ตรวจสอบ = จริง; } ส่งคืนเช็ค; } // ตรวจสอบหมวดหมู่ผู้ใช้เมื่อส่งฟังก์ชั่น checkut () {ตรวจสอบ var; if (document.getElementById ("seluser"). selectedIndex == 0) {แจ้งเตือน ("โปรดเลือกประเภทผู้ใช้!"); document.getElementById ("Seluser"). focus (); ตรวจสอบ = เท็จ; } else {document.getElementById ("checktext4"). innerhtml = "* โปรดเลือกประเภทผู้ใช้√"; ตรวจสอบ = จริง; } ส่งคืนเช็ค; } // ยืนยันเพศของผู้ใช้เมื่อส่งฟังก์ชั่นตรวจสอบ () {ตรวจสอบ var; var gender = ""; // รับแท็กทั้งหมดด้วยชื่อ Sex var sex = document.getElementsByName ("เพศ"); // โอนแท็กเหล่านี้ด้วยชื่อเพศสำหรับ (var i = 0; i <sex.length; ++ i) {// ถ้าเลือกเพศ, บันทึกถ้า (เพศ [i]. ตรวจสอบ) เพศ = เพศ [i] .value; } ถ้า (เพศ == "") {แจ้งเตือน ("โปรดเลือกเพศ!"); ตรวจสอบ = เท็จ; } else {document.getElementById ("checkText5"). innerHtml = "* โปรดเลือกgender√ของคุณ"; ตรวจสอบ = จริง; } ส่งคืนเช็ค; } // ตรวจสอบวันเกิดที่กำหนดเวลาตรวจสอบ () {var check; if (document.getElementById ("txtdate"). ค่า == "") {แจ้งเตือน ("โปรดกรอกในวันเดือนปีเกิด!"); document.getElementById ("txtdate"). focus (); ตรวจสอบ = เท็จ; } else {document.getElementById ("checktext6"). innerhtml = "* โปรดเลือกวันเกิดของคุณ"; ตรวจสอบ = จริง; } ส่งคืนเช็ค; } // ตรวจสอบความสนใจและฟังก์ชั่นงานอดิเรกในเวลาที่เหมาะสม checkhobby () {var check; Var Hobby = 0; // objnum เป็นแท็กอินพุตทั้งหมดที่มีชื่อ Hobby var objnum = document.getElementsByName ("Hobby"); // โอนแท็กงานอดิเรกทั้งหมดสำหรับ (var i = 0; i <objnum.length; ++ i) {// ตัดสินว่ามีการเลือกแท็กงานอดิเรกหรือไม่ถ้า (objnum [i] .Checked == True) Hobby ++; } // หากมีแท็กงานอดิเรกที่เลือกถ้า (Hobby> = 1) {document.getElementById ("checkText7"). innerhtml = "* โปรดเลือกงานอดิเรกของคุณ√"; ตรวจสอบ = จริง; } else {Alert ("โปรดเติมในงานอดิเรก!"); ตรวจสอบ = เท็จ; } ส่งคืนเช็ค; } // อีเมลการตรวจสอบนิพจน์ทั่วไป (เวลา) ฟังก์ชั่น checkmail () {var check; // นิพจน์ปกติของอีเมล var e1 = document.getElementById ("อีเมล"). value.indexof ("@", 0); var e2 = document.getElementById ("อีเมล"). value.indexof (".", 0); if (email == "" || (e1 ==-1 || e2 ==-1) || e2 <e1) {แจ้งเตือน ("ข้อผิดพลาดอินพุต e_mail!"); document.getElementById ("อีเมล"). focus (); ตรวจสอบ = เท็จ; } else {document.getElementById ("checktext8"). innerhtml = "* โปรดกรอกอีเมลที่ใช้กันทั่วไปซึ่งจะใช้เพื่อดึงรหัสผ่าน√"; ตรวจสอบ = จริง; } ส่งคืนเช็ค; } // การตรวจสอบฟังก์ชั่นการแนะนำตัวเองในเวลาที่เหมาะสม checkIntro () {var check; var intro = document.getElementById ("บทนำ") ค่า; if (intro.length> 100) {แจ้งเตือน ("จำนวนคำเกินขีด จำกัด !"); ตรวจสอบ = เท็จ; } else {document.getElementById ("checktext9"). innerhtml = "* จำกัด ถึง 100 คำ"; document.getElementById ("checktext9"). focus (); ตรวจสอบ = จริง; } ส่งคืนเช็ค; } // การตรวจสอบทั้งหมดจะดำเนินการเมื่อส่งแบบฟอร์ม (หากการตรวจสอบใด ๆ ล้มเหลวมันจะถูกส่งกลับไปยังเท็จเพื่อป้องกันการส่งแบบฟอร์ม) ตรวจสอบ () {var check = checkuse () && checkpwd () && checkpwdc () && checkut () && check เช็คคืน; } </script> </head> <body> <!-<form action = "jump page" method = "get" | "post" name = "Form Name" target = "เปิดด้วย" Enctype = "Multipart/Form-Data">-> <! -> <form action = "#" method = "get" onsubmit = "return check ()"> <defielset> <legend> ตัวอย่างเล็ก ๆ ของการตรวจสอบแบบฟอร์มในเวลาที่เหมาะสม </Legend> <table allign = "left" style = "Image: url ('img/4.jpg');" > <tr> <td> ชื่อผู้ใช้: </td> <td> <อินพุต type = "text" name = "ชื่อผู้ใช้" id = "ชื่อผู้ใช้" onchange = "checkuse ()"/> </td> <td id = "checktext1"> ตัวจัดการเหตุการณ์ onchange: ทริกเกอร์เมื่อองค์ประกอบฟอร์มได้รับโฟกัสและการเปลี่ยนแปลงเนื้อหา-> <!-ต่อไปนี้เหมือนกัน-> <tr> <td> รหัสผ่าน: </td> <td> <อินพุตประเภท = "รหัสผ่าน" ชื่อ = "รหัสผ่าน" id = "รหัสผ่าน" เครื่องหมาย </td> </tr> <tr> <td> ยืนยันรหัสผ่าน: </td> <td> <อินพุตประเภท = "รหัสผ่าน" ชื่อ = "pwdc" id = "pwdc" onchange = "checkpwdc ()"/> </td> <td id = "checktext3">* <select id = "seluser" onblur = "checkut ()"> <ตัวเลือกชื่อ = "seluser" value = "0"> โปรดเลือก </ตัวเลือก> <ตัวเลือกชื่อ = "seluser" value = "1"> ผู้ดูแล <tr> <td> เพศ: </td> <td> <อินพุตประเภท = "วิทยุ" value = "1" name = "sex" onChange = "checkGender ()"/> male <อินพุตประเภท = "วิทยุ" value = "2" name = "sex" onChange = "td ของคุณ <td> วันเดือนปีเกิด: </td> <td> <อินพุต type = "วันที่" ชื่อ = "วันที่" id = "txtdate" onblur = "checkdate ()"/> </td> <td id = "checktext6">* โปรดเลือกวันเกิด </td> </td> <td> <td> value = "การอ่าน" onChange = "checkHobby ()"> การอ่าน <อินพุต type = "ช่องทำเครื่องหมาย" name = "Hobby" value = "Music" onChange = "CheckHobby ()"> เพลง <อินพุตประเภท = "ช่องทำเครื่องหมาย" name = "Hobby" value = "Sports" <ttr> <td> อีเมล: </td> <td> <อินพุต type = "text" name = "อีเมล" id = "อีเมล" onchange = "checkemail ()"/> </td> <td id = "checkText8">* โปรดเติมด้วยอีเมลที่ใช้บ่อย cols = "30" rows = "3" name = "บทนำ" id = "บทนำ" onchange = "checkintro ()"> นี่คือการแนะนำตัวเอง ... </textarea> </td> <td id = "checktext9"> value = "subment"/> <input type = "Reset" name = "Reset" value = "Reset"/> </td> </tr> </table> </tableset> </form> </body> </html>สไตล์ CSS:
อินพุต: โฟกัส, textarea: โฟกัส {เส้นขอบ: 1px solid #f00; ความเป็นมา: #FCC; } textarea {width: 230px; ความสูง: 50px; } ร่างกาย {ตัวอักษรขนาด: 15px; /* รูปแบบตัวอักษร*/ font-family: Microsoft Yahei; } เลือกตัวเลือก {ตัวอักษรขนาด: 10px; Font-Family: Microsoft Yahei; -ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น