Ce n'est pas une vérification des arrière-plans très compliquée et des expressions régulières JavaScript. J'introduis brièvement cette technologie, une réception de fond simple et un saut, et je comprends simplement comment la vérifier. Je continuerai à écrire des blogs pour des techniques spécifiques plus tard. J'étudie toujours.
Vérification du formulaire 1 vérification simple
Pour une vérification simple, le nom d'utilisateur doit être ABCD et la longueur du mot de passe doit être supérieure ou égale à 6
Ensuite, en fonction des données saisies par l'utilisateur, une invite est donnée plus tard.
Démo de code:
<html> <éad- head> <ititle> Démonstration de la technologie DHTML --- Form Verification </ title> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <script> function checkUsername () {// alertAnode = document.getElementsByName ("nom d'utilisateur") [0]; var name = ousnamenode.value; // La valeur de cette valeur type = "text" est le caractère dans la boîte // dans le futur, lorsqu'il y a un arrière-plan, les données "ABCD" devraient être demandées dans l'arrière ABCDIF (name == "ABCD") {document.getElementById ("usernameSpan"). innerHtml = "username correct" .fontcolor ("green");} else {document.getElementByid ("userNameSpan"). innerhtml = "username error". checkPwd () {var ouserpwdnode = document.getElementById ("pwd") [0]; var pwd = ouserpwdnode.value; if (pwd.length> = 6) {document.getElementyd ("userpwdspan"). exigences ".fontcolor (" green ");} else {document.getElementById (" userpwdspan "). innerhtml =" la longueur de mot de passe doit être supérieure ou égale à 6 ".fontcolor (" rouge "); }} </ script> </ head> <body> <form> <! - OnBlur se déclenche lorsque l'objet perd la mise au point d'entrée. -> nom d'utilisateur: <input type = "text" name = "username" onblur = "checkUsername ()" /> <span id = "usernameSpan"> </span> <br/> <br/> <! - Pour clarifier, le mot de passe est également utilisé comme type = "text" ici. En fait, le mot de passe de type = "mot de passe" doit être utilisé -> Mot de passe: <input type = "text" name = "pwd" onblur = "checkPwd ()" /> <span id = "userpwdspan"> </span> </ form> </ body> </html>360 Résultats de démonstration du navigateur 8.1:
Le nom d'utilisateur ne respecte pas les règles:
Le mot de passe ne respecte pas les règles:
Vérification du formulaire d'enregistrement 2 - Expressions régulières
Démo de code:
<Html> <A-Head> <Title> Démonstration de la technologie DHTML --- Vérification du formulaire d'enregistrement - Utilisation d'expressions régulières dans JS </ Title> <META CHARTP-Equiv = "Content-Type" Content = "Text / Html; Charset = UTF-8"> <Script Type = "Text / Javascrip Document.getElementsByName ("Username") [0]; var username = ousnamenode.value; // Utiliser un test régulier var reg = new regexp ("[az] {4}", "i"); // il est ok pour inclure 4 lettres consécutives, note que les cotations doubles de "i" ne peuvent pas être omises // i --- signifie ignorer le haut et le bas Regexp ("^ [az] {4} $", "i"); // il ne contient que 4 lettres consécutives, notez que les doubles devis dans "i" ne peuvent pas être omis // ^ signifie le start $ signifie la fin var ouseramespan = document.getElementByid ("useramespan"); // alert (reg.Test (username)); if (reg.test (nom d'utilisateur)) {ouseramespan.innerhtml = "Le nom d'utilisateur est correctement formaté" .fontcolor ("vert");} else {OUSERNAMESPAN.InnerHtml = "Username Format Error" .fontcolor ("Red");}} </press> </coly Dans js -> <script type = "text / javascript"> // var reg = / ^ [0-9] {6} $ /; // Méthode un var reg = new regexp ("^ [0-9] {6} $"); // Méthode deux var str = "123456"; var bres = reg.test (str); // 111 utilise des méthodes dans des objets d'expression régulière pour la vérification --- ne peut être utilisé que pour juger si une correspondance est appariée. La fonction est similaire à la méthode Matches () dans la classe de chaînes dans Java // alert (BRES); // true // 222 utilise des méthodes dans un objet de chaîne pour les tests réguliers ---- La fonction est plus puissante, similaire à l'outil de correspondance dans java var res = str.match (reg); // Le résultat correspondant est enregistré dans RES (est un tableau). Si aucune correspondance n'est atteinte, Res est nul. // alert (res); // 123456 // Le tableau renvoyé par la méthode de correspondance a trois propriétés: entrée, index et LastIndex. // ★ Un peu de détails --- Lorsque vous utilisez la nouvelle méthode regexp (), les caractères spéciaux doivent être échappés // var reg2 = / ^ / d {6} $ /; // "/" pas besoin d'échapper à var reg2 = new regexp ("^ / d {6} $"); // ※※ notez que "/" s'échapper // ▲ ▲ s'ag sortant la phrase ci-dessus est erronée et doit être écrite comme: Nouveau regexp ("^ // d {6} $") //;! perd la mise au point d'entrée. -> nom d'utilisateur: <input type = "text" name = "username" onblur = "checkUsername ()" /> <span id = "userNameSpan"> </span> </ form> </ body> </html>360 Résultats de démonstration du navigateur 8.1:
Incluez simplement 4 lettres consécutives.
Vérification du formulaire d'enregistrement et contrôler la vérification frontale de la soumission:
Emplacement de la création de fichiers de code:
Démo de code:
3form3.html
<Html> <A-Head> <Title> Démonstration de la technologie DHTML --- Vérification et contrôle de contrôle de la vérification de formulaire d'enregistrement Form-Front-End </ Title> <Meta Http-Equiv = "Content-Type" Content = "Text / Html; Charset = UTF-8"> <Script Type = "Text / Javascrip Document.getElementsByName ("nom d'utilisateur") [0]; var username = ousnamenode.value; // Utiliser une vérification régulière var reg = new regexp ("[az] {4}", "i"); // il est ok pour inclure 4 lettres consécutives, veuillez noter que le double cotoure de "i" ne peut pas être omis // i --- signifie ignorer un casse /////vg = VAR " Regexp ("^ [az] {4} $", "i"); // il ne contient que 4 lettres consécutives, veuillez noter que les doubles devis dans "i" ne peuvent pas être omis // ^ signifie le démarrage $ signifie la fin var ouseramespan = document.getElementById ("useramespan"); if (reg.test (nom d'utilisateur)) {ouseramespan.innerhtml = "Le format de nom d'utilisateur est correct" .fontColor ("vert"); return true;} else {ousnamespan.innerhtml = "format d'erreur de nom d'utilisateur" .fontColor ("red"); return false; }} fonction checkpwd () {var ouserpwdnode = document.getElementsByName ("pwd") [0]; var pwd = ouserpwdnode.value; var reg2 = new Regexp ("^ [// w // d] {6,9} $"); if (reg2.test (pwd)) {document.getElementById ("userpwdspan"). Innerhtml = "Le format de mot de passe répond aux exigences" .fontcolor ("vert"); true;} else {document.getElementById ("userpwdspan"). innerhtml = "Longueur de mot de passe doit être 6-9 chiffres ou soulignements" .fontColor ("Red"); return false;}} fonction chéquier () {if (checkUsername () && checkPwd ()) {// Si il y a d'autres éléments qui doivent être vertifiés. Return true;} else {return false;}} </script> </-head> <body> <! - Contrôlez la soumission du formulaire en enregistrant la réponse de l'événement onSubmit. Si Retour False, il ne sera pas soumis et le retour True sera soumis. Si l'événement ONSUBMIT n'est pas enregistré, il est renvoyé TrueOnSubmit déclenché lorsque le formulaire est sur le point d'être soumis. <form action = "/ mydhtmlproj / servlet / RegServlet" onSubmit = "return true;"> -> <form action = "/ mydhtmlproj / servlet / regServlet" onSubmit = "return checkuser ();"> username: <entrée type = "text" name = "username" onblur = "checkUserAm id = "usernameSpan"> </span> <! - Pour plus de clarté, le mot de passe est également utilisé ici. En fait, le mot de passe de type = "mot de passe" doit être utilisé -> mot de passe: <input type = "text" name = "pwd" onblur = "checkPwd ()" /> <span id = "userpwdspan"> </span> <br/> <entrée type = "soumettre" value = "Enregistrement" // </ form> <hr /> <! id = "userInfo" action = "/ dhtmlproj / servlet / regServlet"> username: <input type = "text" name = "username" onblur = "checkUsername2 ()" /> <span id = "userNameSpan2"> </ span> <br/> mot de passe: <entrée = "text" name = "pwd" sur sur "sur" sur> <spanneuse " id = "userpwdspan2"> </span> <br/> </ form> <entrée type = "bouton" value = "registre" onClick = "mySubmit ()" /> <script type = "text / javascrip document.getElementById ("userInfo"); if (checkUserName2 () && checkPwd2 ()) {OFORMNODE.SUBMIT (); // Soumettez le formulaire. }} Fonction CheckUserName2 () {var ouseramenode = document.getElementsByName ("username") [1]; var username = OUSERNAMenode.value; // Utiliser le test régulier var reg = new regexp ("[az] {4}", "i"); // il est ok pour inclure 4 lettres de consécutives, veuillez noter que le double de "I" // i --- signifie ignorer la casse supérieure et inférieure // var regg = new regexp ("^ [az] {4} $", "i"); // il ne contient que 4 lettres consécutives, veuillez noter que les doubles devis dans "i" ne peuvent pas être omis // ^ signifie démarrer $ signifie fin var ouseramespan = document.getElementById ("usernameSpan2"); if (reg.test (nom d'utilisateur)) {ouseramespan.innerhtml = "format d'utilisateur est correct" .fontcolor ("vert"); return true;} else {OUSERNAMESPAN.InnerHtml = "Username Format is Wrong" .fontColol ("red"); }} fonction checkpwd2 () {var ouserpwdnode = document.getElementsByName ("pwd") [1]; var pwd = ouserpwdnode.value; var reg2 = new Regexp ("^ [// w // d] {6,9} $"); if (reg2.test (pwd)) {document.getElementById ("userpwdspan2"). Innerhtml = "Le format de mot de passe répond aux exigences" .fontcolor ("vert"); true;} else {document.getElementById ("userpwdspan2"). innerhtml = "Longueur de mot de passe doit être 6-9 chiffres ou soulignements" .fontColor ("Red"); return false;}} </cript> </ body> </ html>show.jsp:
<% @ Page Language = "Java" Import = "Java.util. *" Pageencoding = "utf-8"%> <% @ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> <! doctype html public "- // w3c // dtd htm.01 Transitional // en "> <html> <ead> <ititle> Ceci est la page après enregistrement </TITME> </ head> <pody> <% out.println (request.getAttribute (" uname ")); out.println (request.getAttribute (" pwd "));%> <% pour (int i = 0; i <3; i ++) {// this peut écrire HTML CODE (i <3; i ++) {// this peut écrire html Code Html. %> <div> bienvenue </div> <% // Cela peut écrire le code html ci-dessus}%> </ body> </html>RegServlet.java
Ceci est un nouveau servlet.
Nous allons faire correspondre automatiquement web.xml
Package cn.hncu.user; import java.io.ioexception; import java.io.printwriter; import javax.servlet.servletException; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletRequest; import; javax.servlet.http.httpservletResponse; public class RegServlet étend httpservlet {public void doget (httpservletRequest, httpservletResponse réponse) lance le servletException, ioException {dopost (request, hrtsserv. Response) lève Servlexception, ioException {request.SetcharAtteRencoding ("utf-8"); // set coding string name = request.getParameter ("username"); // username est l'attribut de nom d'une entrée dans la chaîne de formulaire soumise pwd = request.getParameter ("pwd"); // system.out.println (name); request.setAttribute ("uname", "hncu ---" + name); request.setAttribute ("pwd", "pwd ---" + pwd); réponse); // sortie, guide d'une autre page pour afficher}}web.xml
<? xml version = "1.0" encoding = "utf-8"?> <web-app version = "2.5" xmlns = "http://java.sun.com/xml/ns/javaee" xmlns: xsi = "http://www.w3.org/2001/xmlschema instance" 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> C'est la description de mon composant J2EE </ Description> <disposition-name> Ceci est le nom d'affichage de mon j2ee J2EE Component </ Display-Name> <Servlet-Name> RegServlet </ Servlet-Name> <Servlet-Class> CN.hncu.user.Regservlet </ Servlet-Class> </ Servlet> <Servlet-Mapping> <Servlet-Name> RegServlet </ Servlet-Name> <Url-Pattern> / Servlet / Regservlet </url-Pattern> <Deen wreend-file-list> <leen welcome-file> index.jsp </ bienvenue-file> </ welcome-file-list> </ web-app>
Image de démonstration 360 Browser 8.1:
Lorsque les formats sont remplis correctement, cliquez sur le bouton d'enregistrement et passez automatiquement à une autre page.
Lorsqu'il y a une erreur de format, cliquer sur le bouton d'enregistrement ne répondra pas.
Vérification du formulaire d'enregistrement et contrôle la version finale de la vérification frontale:
Démo de code:
<html> <éad- head> <ititle> Démonstration de la technologie DHTML --- Vérification et soumission de contrôle de la vérification du formulaire d'enregistrement-Front-End - Final Version </ Title> <Meta Http-Equiv = "Content-Type" Content = "Text / Html; Charset = utf-8" /> <script type = "Text / Javascript"> fonction check (name, reg, spasid, okinfo, errinfo) {var value = document.getElementsByName (name) [0] .Value; // Utiliser la vérification régulière var ospannode = document.getElementByid (spasid); if (reg.test (value)) {oSpannode.InnerHtml = okinfo.fontColor ("green"); true;} else {ospannode.innerhtml = errinfo.fontcolor ("red"); return false;}} function checkUsername () {var reg = new regexp ("[az] {4}", "i"); // contient 4 lettres consécutives, note que les doubles citations dans "i" ") Vérifier ("nom d'utilisateur", reg, "usernameSpan", "usernameSpan", "le format de nom d'utilisateur est correct", "le format de nom d'utilisateur est faux");} fonction checkpwd () {var reg = new regexp ("^ [// w // d] {6,9} Exigences "," La longueur du mot de passe doit être 6-9 chiffres ou souligner ");} fonction CheckPwd2 () {var Flag; var pwd = document.getElementsByName (" pwd ") [0] .value; var pwd2 = document.getElementsByName (" pwd2 ") [0] .Value; var opannode = Document.getElementById ("UserPwd2Span"); if (pwd == pwd2) {oSpanNode.innerHtml = "Deux mots de passe sont cohérents" .fontcolor ("verd"); deux mots de passe sont inconsistents ". Flag;} fonction CheckMail () {var reg = /^/w+//w+(/./w+)+$/i ;return Check ("Mail", Reg, "UserMailSpan", "Make MailBox Format correct", "Mailbox Format Incorrect");} Fonction CheckUser () {// Control Form Soumis checkmail ()) {return true;} else {return false;}} </cript> </ad> <body> <form action = "/ mydhtmlproj / servlet / regServlet" onSubmit = "return checkuser ();"> username: <intry type = "text" name = "username" onBlur = "checkUserAm ()" /> <panqueuse " id = "usernameSpan"> </ span> <br/> Entrez le mot de passe: <input type = "text" name = "pwd" onblur = "checkPwd ()" /> <span id = "userpwd2span"> </span> <br/> Adresse e-mail: <entrée type = "text" name = "mail" onblur = "checkmail ()" /> <spann id = "userMailSpan"> </span> <br/> <input type = "soumider" value = "Enregistrement"> </ form> </body> </html>360 Résultats de démonstration du navigateur 8.1:
Ce n'est qu'après avoir rempli tous les formats correctement que vous répondez si vous cliquez sur le bouton d'enregistrement.
Après avoir rempli correctement tous les formats, cliquez sur la page après avoir cliqué sur le bouton d'enregistrement, il passe en fait sur la page Show.jsp. (Vous pouvez localiser où vous voulez)
Ce qui précède est le résumé de la technologie de la forme de formulaire pertinente (recommandé) dans JavaScript qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message. L'éditeur vous répondra à temps!