นี่ไม่ใช่การตรวจสอบพื้นหลังที่ซับซ้อนมากและการแสดงออกปกติของ JavaScript ฉันเพิ่งแนะนำเทคโนโลยีนี้สั้น ๆ การรับพื้นหลังและกระโดดง่ายๆและเข้าใจวิธีการตรวจสอบ ฉันจะเขียนบล็อกต่อไปสำหรับเทคนิคเฉพาะในภายหลัง ฉันยังคงเรียนอยู่
การตรวจสอบแบบฟอร์มการตรวจสอบ 1-simple
สำหรับการตรวจสอบอย่างง่ายชื่อผู้ใช้จะต้องเป็น ABCD และความยาวรหัสผ่านจะต้องสูงกว่าหรือเท่ากับ 6
จากนั้นขึ้นอยู่กับข้อมูลที่ป้อนโดยผู้ใช้จะได้รับพรอมต์ในภายหลัง
การสาธิตรหัส:
<html> <head> <title> การสาธิตเทคโนโลยี DHTML --- การตรวจสอบรูปแบบ </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script> ฟังก์ชั่นการตรวจสอบฟังก์ชั่น () document.getElementsByName ("ชื่อผู้ใช้") [0]; ชื่อ var = ousernamenode.Value; // ค่าของประเภทนี้ = "ข้อความ" ค่าคือตัวละครในกล่อง // ในอนาคตเมื่อมีพื้นหลังข้อมูล "ABCD" ควรจะเต็มไปด้วยเทคโนโลยี abcdif (ชื่อ == "abcd") {document.getElementById ("ผู้ใช้"). innerhtml = "ชื่อผู้ใช้ที่ถูกต้อง" checkpwd () {var ouserpwdnode = document.getElementById ("pwd") [0]; var pwd = ouserpwdnode.value; ถ้า (pwd.length> = 6) {document.getElementById ("userpwdspan") ข้อกำหนด ".FontColor (" Green ");} else {document.getElementById (" userpwdspan "). innerhtml =" ความยาวรหัสผ่านต้องมากกว่าหรือเท่ากับ 6 ".fontcolor (" สีแดง "); }} </script> </head> <body> <body> <form> <!-ไฟ onblur เมื่อวัตถุสูญเสียโฟกัสอินพุต -> ชื่อผู้ใช้: <อินพุต type = "text" name = "username" onblur = "checkUserName ()"/> <span id = "ผู้ใช้"> </span> <br/> <br/> <! อันที่จริงรหัสผ่านของ Type = "รหัสผ่าน" ควรใช้ -> รหัสผ่าน: <อินพุต type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> </form> </body> </html>360 เบราว์เซอร์ 8.1 ผลการสาธิต:
ชื่อผู้ใช้ไม่ปฏิบัติตามกฎ:
รหัสผ่านไม่สอดคล้องกับกฎ:
การตรวจสอบแบบฟอร์มการลงทะเบียน 2 - นิพจน์ทั่วไป
การสาธิตรหัส:
<Html> <head> <title> การสาธิตเทคโนโลยี DHTML --- การตรวจสอบแบบฟอร์มการลงทะเบียน-การใช้นิพจน์ทั่วไปใน JS </title> <meta http-equiv = "เนื้อหาประเภท" เนื้อหา = "ข้อความ/html; charset = utf-8"> document.getElementsByName ("ชื่อผู้ใช้") [0]; var username = ousernamenode.value; // ใช้การทดสอบปกติ var reg = new regexp ("[AZ] {4}", "i"); regexp ("^ [az] {4} $", "i"); // มันมีเพียง 4 ตัวอักษรติดต่อกันโปรดทราบว่าคำพูดสองครั้งใน "i" ไม่สามารถละเว้นได้ //^ หมายถึง $ เริ่มต้นหมายถึง var ousernamespan = document.getElementById ("usernamespan"); if (reg.test (ชื่อผู้ใช้)) {ousernamespan.innerhtml = "ชื่อผู้ใช้ถูกจัดรูปแบบอย่างถูกต้อง" .fontcolor ("สีเขียว");} else {ousernamespan.innerhtml = "ข้อผิดพลาดรูปแบบของผู้ใช้" js-> <script type = "text/javascript"> // var reg =/^[0-9] {6} $/; // วิธีหนึ่ง var reg = new regexp ("^[0-9] {6} $"); // วิธีการสอง var str = "123456"; var bres = reg.test (str); // 111 ใช้วิธีการในวัตถุนิพจน์ทั่วไปสำหรับการตรวจสอบ ฟังก์ชั่นคล้ายกับวิธีการจับคู่ () ในคลาสสตริงใน Java // Alert (BRES); // true // 222 ใช้วิธีการในวัตถุสตริงสำหรับการทดสอบปกติ ---- ฟังก์ชั่นมีประสิทธิภาพมากขึ้นคล้ายกับเครื่องมือจับคู่ใน Java var res = str.match (reg); // ผลการจับคู่ หากไม่ตรงกับการจับคู่ RES จะเป็นโมฆะ // Alert (res); // 123456 // อาร์เรย์ที่ส่งคืนโดยวิธีการจับคู่มีสามคุณสมบัติ: อินพุตดัชนีและ LastIndex // ★รายละเอียดเล็ก ๆ น้อย ๆ --- เมื่อใช้เมธอด regexp () ใหม่อักขระพิเศษจะต้องหลบหนี // var reg2 =/^/d {6} $/; // "/" ไม่จำเป็นต้องหลบหนี var reg2 = ใหม่ regexp ("^/d {6} $"); // ※※โปรดทราบว่า "/" เพื่อหลบหนี // ▲▲▲▲ประโยคข้างต้นผิดและต้องเขียนเป็น: ใหม่ regexp ("^// d {6} $") // วัตถุสูญเสียการโฟกัสอินพุต -> ชื่อผู้ใช้: <อินพุต type = "text" name = "username" onblur = "checkuserName ()"/> <span id = "usernamespan"> </span> </form> </body> </html>360 เบราว์เซอร์ 8.1 ผลการสาธิต:
เพียงแค่รวม 4 จดหมายติดต่อกัน
การตรวจสอบแบบฟอร์มการลงทะเบียนและควบคุมการตรวจสอบส่วนหน้าของการส่ง:
ตำแหน่งการสร้างไฟล์รหัส:
การสาธิตรหัส:
3form3.html
<Html> <head> <title> การสาธิตเทคโนโลยี DHTML --- การตรวจสอบและควบคุมการส่งการตรวจสอบการลงทะเบียนแบบฟอร์มด้านหน้า-จบด้านหน้า </title> <meta http-equiv = "เนื้อหาประเภท" เนื้อหา = "ข้อความ/html; charset = utf-8"> <script = "type = javascript document.getElementsByName ("ชื่อผู้ใช้") [0]; var username = ouserNamenode.value; // ใช้การตรวจสอบปกติ var reg = ใหม่ regexp ("[AZ] {4}", "i"); regexp ("^ [az] {4} $", "i"); // มีเพียง 4 ตัวอักษรติดต่อกันโปรดทราบว่าคำพูดสองครั้งใน "i" ไม่สามารถละเว้นได้ //^ หมายถึง $ เริ่มต้นหมายถึง var ousernamespan = document.getElementById ("usernamespan"); if (reg.test (ชื่อผู้ใช้)) {ousernamespan.innerhtml = "รูปแบบชื่อผู้ใช้ถูกต้อง" .FontColor ("สีเขียว"); return true;} else {ousernamespan.innerhtml = "รูปแบบข้อผิดพลาดชื่อผู้ใช้" .fontcolor ("สีแดง"); return false; }} ฟังก์ชั่น checkpwd () {var ouserpwdnode = document.getElementsByName ("pwd") [0]; var pwd = ouserpwdnode.value; var reg2 = ใหม่ regexp ("^[// w // d] {6,9} $"); ถ้า (reg2.test (pwd)) {document.getElementById ("userpwdspan"). innerhtml = "รูปแบบรหัสผ่านตรงตามข้อกำหนด". true;} else {document.getElementById ("userpwdspan"). innerhtml = "ความยาวรหัสผ่านต้องเป็น 6-9 หลักหรือขีดล่าง" .fontcolor ("สีแดง"); return false;}} ฟังก์ชั่น checkuser () ที่นี่. return true;} else {return false;}} </script> </head> <body> <!-ควบคุมการส่งแบบฟอร์มโดยการลงทะเบียนการตอบสนองเหตุการณ์ onsubmit หากส่งคืนเท็จจะไม่ถูกส่งและส่งคืนจริงจะถูกส่ง หากเหตุการณ์ onsubmit ไม่ได้ลงทะเบียนมันจะส่งคืน trueonsubmit ทริกเกอร์เมื่อมีการส่งแบบฟอร์ม <form action = "/mydhtmlproj/servlet/regservlet" onsubmit = "return true;">-> <form action = "/mydhtmlproj/servlet/regservlet" onsubmit = "return checkuser () id = "UserNamespan"> </span> <!-เพื่อความชัดเจนรหัสผ่านยังใช้ที่นี่ ในความเป็นจริงรหัสผ่านของ Type = "รหัสผ่าน" ควรใช้-> รหัสผ่าน: <อินพุตประเภท = "ข้อความ" ชื่อ = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> <br/> ปุ่ม-> <form id = "userInfo" action = "/dhtmlproj/servlet/regServlet"> ชื่อผู้ใช้: <อินพุต type = "text" name = "username" onblur = "checkUserName2 ()"/> <span id = "usernamespan2"> onblur = "checkpwd2 ()"/> <span id = "userpwdspan2"> </span> <br/> </form> <อินพุตประเภท = "ปุ่ม" value = "ลงทะเบียน" onClick = "mySubMit ()"/> <script type = "text/javascript" document.getElementById ("userInfo"); if (checkUserName2 () && checkpwd2 ()) {OformNode.submit (); // ส่งแบบฟอร์ม }} ฟังก์ชั่น checkuserName2 () {var ousernamenode = document.getElementSbyName ("ชื่อผู้ใช้") [1]; var username = ousernamenode.value; // ใช้การทดสอบปกติ var reg = regexp ใหม่ ("[az] {4}" // i --- หมายถึงการเพิกเฉยต่อตัวพิมพ์ใหญ่บนและล่าง // var regg = ใหม่ regexp ("^ [az] {4} $", "i"); // มันมีเพียง 4 ตัวอักษรติดต่อกันโปรดทราบว่าคำพูดสองครั้งใน "i" ไม่สามารถละเว้นได้ //^ document.getElementById ("USERNAMESPAN2"); ถ้า (reg.test (ชื่อผู้ใช้)) {ousernamespan.innerhtml = "รูปแบบชื่อผู้ใช้ถูกต้อง" .FontColor ("สีเขียว"); }} ฟังก์ชั่น checkpwd2 () {var ouserpwdnode = document.getElementByName ("pwd") [1]; var pwd = ouserpwdnode.value; var reg2 = ใหม่ regexp ("^[// w // d] {6,9} $"); ถ้า (reg2.test (pwd)) {document.getElementById ("userpwdspan2"). innerhtml = "รูปแบบรหัสผ่านตรงตามข้อกำหนด". true;} else {document.getElementById ("userpwdspan2"). innerhtml = "ความยาวรหัสผ่านต้องเป็น 6-9 หลักหรือ Underscores" .FontColor ("สีแดง"); return;}} </script>show.jsp:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" คำนำหน้า = "c"%> transitional // en "> <html> <head> <mheal> นี่คือหน้าหลังจากการลงทะเบียน </title> </head> <body> <%out.println (request.getAttribute (" Uname ")); out.println (request.getAttribute (" pwd "); %> <div> ยินดีต้อนรับ </div> < %// สิ่งนี้สามารถเขียนรหัส HTML ด้านบน} %> </body> </html>regservlet.java
นี่คือ servlet ใหม่
เราจะจับคู่ web.xml โดยอัตโนมัติ
แพ็คเกจ cn.hncu.user; นำเข้า java.io.ioException; นำเข้า java.io.printwriter; นำเข้า Javax.servlet.servletexception; นำเข้า javax.servlet.http.httpservlet; นำเข้า Javax.servlet.http.https javax.servlet.http.httpservletResponse; ระดับสาธารณะ regservlet ขยาย httpservlet {โมฆะสาธารณะ doget (httpservletrequest คำขอ, httpservletresponse ตอบกลับ httpservletResponse response) พ่น servletexception, ioexception {request.setcharacterencoding ("UTF-8"); // ตั้งค่าสตริงที่เข้ารหัส = request.getParameter ("ชื่อผู้ใช้"); // ชื่อผู้ใช้เป็นแอตทริบิวต์ชื่อของอินพุต request.getParameter ("pwd"); // system.out.println (ชื่อ); request.setAttribute ("uname", "hncu ---"+name); request.setAttribute ("pwd", "pwd ---"+pwd); request.getRequestDispatcher ("/dhtml/6formsubmit/jsps/show.jsp"). forward (คำขอ, ตอบกลับ); // เอาต์พุต, คู่มือไปยังหน้าอื่นเพื่อแสดง}}}}}}}web.xml
<? xml version = "1.0" การเข้ารหัส = "utf-8"?> <web-app version = "2.5" xmlns = "http://java.sun.com/xml/ns/javaee" xmlns: xsi = "http://ww.w3.org/200 XSI: schemalocation = "http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><display-name></display-name> Component </display-Name> <servlet-name> regServlet </servlet-name> <servlet-lass> cn.hncu.user.regservlet </servlet-class> </servlet> <servlet-mapping> <welcome-file-list> <welcome-file> index.jsp </welcome-file> </selcome-file-list> </eb-app>
360 เบราว์เซอร์ 8.1 ภาพสาธิต:
เมื่อรูปแบบถูกกรอกอย่างถูกต้องให้คลิกปุ่มลงทะเบียนและข้ามไปยังหน้าอื่นโดยอัตโนมัติ
เมื่อมีข้อผิดพลาดรูปแบบการคลิกปุ่มลงทะเบียนจะไม่ตอบสนอง
การตรวจสอบแบบฟอร์มการลงทะเบียนและควบคุมเวอร์ชันสุดท้ายของการตรวจสอบส่วนหน้า:
การสาธิตรหัส:
<Html> <head> <title> การสาธิตเทคโนโลยี DHTML --- การตรวจสอบและควบคุมการส่งการตรวจสอบการลงทะเบียนแบบฟอร์ม-หน้า-รุ่นสุดท้าย </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> ตรวจสอบ (ชื่อ, reg, spanid, okinfo, errinfo) {var value = document.getElementByName (ชื่อ) [0] .Value; // ใช้การตรวจสอบปกติ var ospannode = document.getElementById (spanid); if (reg.test (ค่า)) true;} else {ospannode.innerhtml = errinfo.fontcolor ("red"); return false;}} ฟังก์ชั่น checkusername () {var reg = new regexp ("[az] {4}", "i"); ตรวจสอบ ("ชื่อผู้ใช้", reg, "ผู้ใช้", "ผู้ใช้", "รูปแบบชื่อผู้ใช้ถูกต้อง", "รูปแบบชื่อผู้ใช้ผิด");} ฟังก์ชั่น checkpwd () {var reg = ใหม่ regexp ("^[// w // d] {6,9} $" ต้องเป็น 6-9 หลักหรือ Underscore ");} ฟังก์ชั่น checkpwd2 () {var flag; var pwd = document.getElementSbyName (" pwd ") [0] .Value; var pwd2 = document.getElementByName (" PWD2 ") [0] document.getElementById ("userpwd2span"); ถ้า (pwd == pwd2) {ospannode.innerhtml = "รหัสผ่านสองรหัสมีความสอดคล้อง" .fontcolor ("สีเขียว"); ธง = true; Flag;} function checkmail () {var reg = /^/w+@/w+(/./w+)+$/i; ตรวจสอบ ("อีเมล", reg, "usermailspan", "ทำให้รูปแบบกล่องจดหมายถูกต้อง", "รูปแบบกล่องจดหมายที่ไม่ถูกต้อง"); CheckMail ()) {return true;} else {return false;}} </script> </head> <body> <form action = "/mydhtmlproj/servlet/regservlet" onsubmit = "return checkuser (); id = "userNamespan"> </span> <br/> ป้อนรหัสผ่าน: <อินพุต type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> <br/> ยืนยันรหัสผ่าน: id = "userpwd2span"> </span> <br/> ที่อยู่อีเมล: <อินพุต type = "text" name = "mail" onblur = "checkmail ()"/> <span id = "usermailspan"> </span> <br/>360 เบราว์เซอร์ 8.1 ผลการสาธิต:
หลังจากกรอกในทุกรูปแบบอย่างถูกต้องคุณจะตอบกลับได้หากคุณคลิกปุ่มลงทะเบียน
หลังจากกรอกแบบฟอร์มทั้งหมดอย่างถูกต้องให้คลิกหน้าหลังจากคลิกปุ่มลงทะเบียนแล้วมันจะข้ามไปที่หน้า show.jsp (คุณสามารถค้นหาได้ทุกที่ที่คุณต้องการ)
ข้างต้นเป็นความรู้ที่เกี่ยวข้องของฟอร์มเทคโนโลยีสรุป (แนะนำ) ใน JavaScript แนะนำให้คุณรู้จักโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน บรรณาธิการจะตอบกลับคุณทันเวลา!