Dies ist keine sehr komplizierte Hintergrundüberprüfung und reguläre JavaScript -Ausdrücke. Ich stelle gerade kurz diese Technologie, einen einfachen Hintergrundempfang und diese Sprung ein und verstehe einfach, wie man sie überprüft. Ich werde später weiterhin Blogs für bestimmte Techniken schreiben. Ich studiere immer noch.
Formüberprüfung 1-Simple-Überprüfung
Zur einfachen Überprüfung muss der Benutzername ABCD sein und die Kennwortlänge muss größer als oder gleich 6 sein
Basierend auf den vom Benutzer eingegebenen Daten wird später eine Eingabeaufforderung angegeben.
Code Demo:
<html> <Head> <titels> DHTML-Technologiedemonstration --- Form-Verifizierung </title> <meta http-äquiv = "content-type" content = "text/html; charSet = utf-8"/> <Script> Funktionsprüfungen () {// Alert ("aa" // testen Sie, ob dieses Verlust der Fokus-Überwachungs-Überwachungsverlust ("aa"). document.getElementsByName ("Benutzername") [0]; var name = ouSernamenode.Value; // Der Wert dieses Typs = "Text" ist das Zeichen im Feld in der Zukunft. Wenn es einen Hintergrund gibt, sollte der Daten "ABCD" über den Hintergrund über AJAX -Technologie angefordert werden. ABCDIF (name == "ABCD") {document.getElementById ("userernameSpan"). InnerHtml = "Benutzername korrekt" .FontColor ("grün");} else {document.getElementById ("usernamespan") checkpwd () {var ouserpwdnode = document.getElementById ("pwd") [0]; var pwd = ouSerpwdnode.Value; if (pwd.length> = 6) {document.getElementById ("userpwdspan"). Anforderungen ".FontColor (" Green ");} else {document.getElementById (" userPWDSpan "). InnerHtml =" Kennwortlänge muss größer als oder gleich 6 ".FontColor (" rot "); }} </script> </head> <body> <form> <!-Onblur feuert, wenn das Objekt den Eingabefokus verliert. -> Benutzername: <input type = "text" name = "userername" onblur = "CheckUSERNAME ()"/> <span id = "userernameSpan"> </span> <br/> <br/> <!-Um klar zu machen, wird das Kennwort auch als Typ = "Text" verwendet. Tatsächlich sollte das Kennwort von type = "Passwort" verwendet werden -> Kennwort: <Eingabe type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> </body> </body> </html>360 Browser 8.1 Demonstrationsergebnisse:
Der Benutzername entspricht nicht den Regeln:
Das Passwort entspricht nicht den Regeln:
Überprüfung des Registrierungsformulars 2 - reguläre Ausdrücke
Code Demo:
<html> <kopf> <titels> DHTML-Technologiedemonstration --- Überprüfung des Registrierungsformulars-Verwenden regelmäßiger Ausdrücke in js </title> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"> <script = "tection document.getElementsByname ("Benutzername") [0]; var userername = ouSernamenode Regexp ("^ [az] {4} $", "i"); // Es enthält nur 4 aufeinanderfolgende Buchstaben, beachten Sie, dass die Doppelzitate in "i" nicht weggelassen werden können //^ bedeutet, dass der Start $ den EndvarousernameSpan = Dokument.GetElementById ("usernameSpan") bedeutet. if (reg.test (userername)) {ouSerernameSpan.innerhtml = "Der Benutzername ist richtig formatiert" .FontColor ("grün");} else {ouSernameSpan.innnerhtml = "Benutzername-Format". in js-> <script type = "text/javaScript"> // var reg =/^[0-9] {6} $/; // Methode eins var reg = neuer regexp ("^[0-9] {6} $"); // Methode zwei var str = "123456"; var bres = reg.test (str); // 111 Verwendet Methoden in regulären Ausdrucksobjekten zur Überprüfung-nur, um zu beurteilen, ob eine Übereinstimmung angepasst wird. Die Funktion ähnelt der Methode () in der String-Klasse in Java // Alert (BRES); // true // 222 verwendet Methoden im String-Objekt zum regulären Test ----- Die Funktion ist leistungsfähiger, ähnlich wie das Matching-Tool in Java var res = Str.Match (Reg); // Das Matching-Ergebnis wird in RES (ARAY ARAY) gespeichert. Wenn kein Übereinstimmung erreicht ist, ist Res null. // alert (res); // 123456 // Das nach der Match -Methode zurückgegebene Array hat drei Eigenschaften: Eingabe, Index und LastIndex. // ★ Ein wenig Details --- Bei Verwendung der neuen Regexp () -Methode müssen Sonderzeichen entkommen // var reg2 =/^/d {6} $/; // "/" NICHT ZU ESCLICT VAR Reg2 = New Regexp ("^/d {6} $"); // ※※ Beachten Sie, dass "/" entkommen // ▲eller Der obige Satz ist falsch und muss als: new Regexp ("^// d {6} $") // ALERT (Reg2.Test ("123456"); verliert den Eingangsfokus. -> Benutzername: <Eingabe type = "text" name = "userername" onblur = "CheckUSERNAME ()"/> <span id = "ustameSpan"> </span> </form> </body> </html>360 Browser 8.1 Demonstrationsergebnisse:
Fügen Sie einfach 4 aufeinanderfolgende Briefe ein.
Überprüfung des Registrierungsformulars und steuern Sie die Front-End-Überprüfung der Einreichung:
Codedateierstellungsposition:
Code Demo:
3form3.html
<html> <Head> <titels> DHTML-Technologiedemonstration --- Überprüfung und Steuerung der Registrierungsformform-Front-End-Überprüfung </title> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"> <script type = "text/javascript"> functionername () {varsernaNode = " document.GetElementsByname ("Benutzername") [0]; var userername = ouSernamenode.Value; // Verwenden Sie reguläre Verifizierung var reg = neuer Regexp ("[Az] {4}", "i"); // Es ist in Ordnung, 4 aufeinanderfolgende Buchstaben zu berücksichtigen, dass das Doppel-Zitat von "Id" -An "I." -Var. "Id"-I "-I"-I. "IN nicht ausgelöst/i-i-i-i-i-i-i-i-i-i-i-i-i-I. ilg. Regexp ("^ [az] {4} $", "i"); // Es enthält nur 4 aufeinanderfolgende Buchstaben. Bitte beachten Sie, dass die Doppelzitate in "i" nicht weggelassen werden können //^ bedeutet, dass der Start $ den Endvar -OuSernameSpan = -GetElementById ("ustLernameSpan") bedeutet. if (reg.test (userername)) {ouSerernameSpan.innerhtml = "Benutzername -Format ist korrekt" .FontColor ("grün"); return true;} else {ouSerernameSpan.innerhtml = "Benutzername -Fehlerformat" .FontColor ("rot"); return false; }} Funktion checkpwd () {var ouSerpwdnode = document.getElementsByName ("pwd") [0]; var pwd = ouSerpwdnode.Value; var reg2 = neu Regexp ("^[// w // d] {6,9} $"); if (reg2.Test (pwd)) {document.getElementById ("userpwdSpan"). InnerHtml = "Passwortformat erfüllt die Anforderungen" .FontColor ("green"); true;} else {document.getElementById ("userpWdSpan"). InnerHtml = "Kennwortlänge muss 6-9 Ziffern oder Unterstriche" .FontColor ("rot") sein; Hier. Return true;} else {return false;}} </script> </head> <body> <!-Steuern Sie die Einreichung des Formulars, indem Sie die Ereignisantwort von ONSUBMIT registrieren. Wenn die Rückgabe falsch ist, wird es nicht eingereicht und die Rückgabe True wird eingereicht. Wenn das ONSUBMIT -Ereignis nicht registriert ist, wird es ausgelöst, dass das Formular eingereicht wird. <form action = "/mydhtmlProj/servlet/regservlet" onSubmit = "return true;">-> <form action = "/mydhtmlProj/servlet/regservlet" Onsubmit return Checkuser (); id = "userernameSpan"> </span> <!-Aus Gründen der Klarheit wird das Passwort auch hier verwendet. Tatsächlich sollte das Kennwort von Typ = "Passwort" verwendet werden-> Kennwort: <Eingabe type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdSpan"> </span> </span> <Br/> <Eingabe-Typ = "Submit" Value ". id = "userInfo" action = "/dhtmlproj/servlet/regservlet"> username: <Eingabe type = "text" name = "userername" onblur = "checkusername2 ()"/> <span id = "usernameSpan2"> </span> <BR/> passet type: <input type = "name" name "name" text id = "userPWDSpan2"> </span> <br/> </form> <Eingabe type = "button" value = "register" onclick = "mysubmit ()"/> <script type = "text/javaScript"> Funktion mySubmit () {var ormaNode = document.getElementById ("userInfo"); if (CheckUSERNAME2 () && checkpwd2 ()) {OfOrnode.submit (); // Senden Sie das Formular ein. }} function Checkusername2 () {var ouSernamenode = document.getElementsByName ("Benutzername") [1]; var username = ouSernamenode.Value; // Verwenden Sie reguläre Test var reg = new Regexp ("[Az] {4}", "I.). // i --- bedeutet, den oberen und unteren Fall zu ignorieren // var Regg = new Regexp ("^ [Az] {4} $", "i"); // Es enthält nur 4 aufeinanderfolgende Buchstaben, bitte beachten document.getElementById ("userernameSpan2"); if (reg.test (userername)) {ouSernameSpan.innerhtml = "Benutzername ist korrekt" .Fontcolor ("grün"); zurücktret True;} else {ouSernameSpan.innerHtml = "Username -Forschungsnamen". }} Funktion checkpwd2 () {var ouSerpwdnode = document.getElementsByname ("pwd") [1]; var pwd = ouSerpwdnode.Value; var reg2 = neu Regexp ("^[// w // d] {6,9} $"); if (reg2.Test (pwd)) {document.getElementById ("userPWDSpan2"). InnerHtml = "Passwortformat erfüllt die Anforderungen" .FontColor ("green"); true;} else {document.getElementById ("userPWDSpan2"). InnerHtml = "Kennwortlänge muss 6-9 Ziffern oder Unterstriche" .FontColor ("rot") sein;show.jsp:
<%@ page Language = "java" import = "java.util. Übergangs // en "> <html> <kopf> <titels> Dies ist die Seite nach der Registrierung </title> </head> <body> <%out.println (Request.GetAttribute (" Uname "); %> <div> Willkommen </div> < %// Dies kann den HTML -Code über} %> </body> </html> schreibenRegservlet.java
Dies ist ein neuer Servlet.
Wir werden automatisch mit web.xml übereinstimmen
Paket cn.hncu.user; import Java.io.ioxception; import Java.io.printwriter; importieren javax.servlet.servletException; import Javax.servlet.http.httpervlet; importieren javax.servlet.http.httpletrequest; javax.servlet.http.httpServletResponse; öffentlicher Klasse Regservlet erweitert HttpServlet {public void dodget (httpServletRequest Request, httpServletRespesponus), löst ServletException, IOException {DopeTResponse,} öffentliche voiddopost (htttpletRect,} public voiddopost) aus. Antwort) löst ServletException aus, ioException {request.setcharactercoding ("utf-8"); // Setzen Sie die Codierungsstring-Namensname = Anrequenz.GetParameter ("Benutzername"); // Benutzername ist das Namensattribut eines Eingangs in der eingereichten Form-String pwd = request.getParameter ("pwd"); // system.out.println (name); request.setAttribute ("uname", "hncu-"+name); request.setattribute ("pwd", "PWD ---"+PWD); Request.GetRequestDispatcher ("/DHTML/6FormSubmit/JSPS/show.jsp"). Vorwärts (Anfrage, Antwort); // Ausgabe, Anleitung zu einer anderen Seite zur Anzeige}}}}}}}}}}}}}}}}}}}}}}}}.web.xml
<? 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><Servlet><Description> Die Beschreibung meines J2ee-Komponenten </Beschreibung> <Anzeige-Name> Das ist der Anzeige Name von My J2ee. Komponente </display-name> <Servlet-name> RegServlet </Servlet-name> <Servlet-Class> cn.hncu.user.regservlet </Servlet-Class> </Servlet> <Servlet-Mapping> <Servlet-name> RegServlet </servlet-name> <Url-patter>/servlet/RegServlet </URL-PATTER> <Url-Patter> <Welcome-File-List> <Welcome-File> Index.jsp </Welcome-File> </Welcome-File-List> </web-App>
360 Browser 8.1 Demo Bild:
Wenn die Formate korrekt ausgefüllt sind, klicken Sie auf die Registrierungsschaltfläche und springen Sie automatisch zu einer anderen Seite.
Wenn ein Formatfehler vorliegt, antwortet das Klicken auf die Registrierungsschaltfläche nicht.
Überprüfung des Registrierungsformulars und steuern Sie die endgültige Version der Front-End-Überprüfung:
Code Demo:
<html> <Head> <titels> DHTML-Technologiedemonstration --- Überprüfung und Steuerung der Registrierungsformform-Front-End-Verifizierung-Finale Version </title> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <script type = "text/javascript"> function Check (Name, Reg, Spanid, Okinfo, Errinfo) {var value = document.getElementsByname (Name) [0] .Value; // Verwenden Sie reguläre Überprüfung var ospannode = document.getElementById (spanid); if (reg.Test (value)) {asspannode.innerhtml = Okinfo.FonfoTcolorororoNe "). true;} else {ospannode.innerhtml = errinfo.fontcolor ("rot"); return false;}} function Checkusername () {var reg = new Regexp ("[Az] {4}", "i"); // enthält 4 ansprechende Buchstaben, beachten check ("Benutzername", reg, "userernameSpan", "userernameSpan", "Benutzername ist korrekt", "Benutzername ist falsch"); Anforderungen "," Kennwortlänge muss 6-9 Ziffern oder Unterstriche "); document.getElementById ("userpwd2span"); if (pwd == pwd2) {ospannode.innernhtml = "Zwei Passwörter sind konsistent" .FontColor ("grün"); Flag = true;} else {ospannode.innernhtml = rot. "Zwei Passwörter sind inkonsistent". Flag;} Funktion checkmail () {var reg = /^/w+@/w+(/./w+)+$/i;return check ("mail", reg, "usermailspan", "Mailbox -Format korrekt machen", "Mailbox -Format falsch"); checkmail ()) {return true;} else {return false;}} </script> </head> <body> <form action = "/mydhtmlProj/servlet/regservlet" OnSubMit = "return checkuser (); id="userNameSpan"></span><br/>Enter password: <input type="text" name="pwd" onblur="checkPwd()" /><span id="userPwdSpan"></span><br/>Confirm password: <input type="text" name="pwd2" onBlur="checkPwd2()" /><span id = "userpwd2span"> </span> <br/> E -Mail -Adresse: <Eingabe type = "text" name = "mail" onblur = "checkmail ()"/> <span id = "usermailspan"> </span> <br/> <Eingabe type = "value =" Registrierung "> </Form> </body> </html> </html> </html> </html> </html> </html>360 Browser 8.1 Demonstrationsergebnisse:
Erst nach dem korrekten Ausfüllen aller Formate antworten Sie, wenn Sie auf die Schaltfläche Registrierung klicken.
Nachdem Sie alle Formate korrekt ausgefüllt haben, klicken Sie auf die Seite, nachdem Sie auf die Schaltfläche Registrierung geklickt haben, und springt tatsächlich zur Seite show.jsp. (Sie können finden, wo immer Sie wollen)
Das obige ist das relevante Kenntnis der Formular -Form -Technologiezusammenfassung (empfohlen) in JavaScript, die Ihnen vom Editor vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten!