Esta não é uma verificação de fundo muito complicada e expressões regulares de JavaScript. Eu apenas apresento brevemente essa tecnologia, recepção simples de fundo e pulo e apenas entendo como verificá -la. Continuarei a escrever blogs para técnicas específicas mais tarde. Eu ainda estou estudando.
Verificação de formulário 1 verificação simples
Para verificação simples, o nome de usuário deve ser ABCD e o comprimento da senha deve ser maior ou igual a 6
Em seguida, com base nos dados inseridos pelo usuário, um prompt é fornecido posteriormente.
Demonstração de código:
<html> <head> <title> demonstração da tecnologia DHTML --- Verificação de formulário </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <cript> function check (//ining ("aaM-8) //> <SCRIPT> FUNSTEIROTE (// ALERT (AMERN); Document.getElementsByName ("Nome de usuário") [0]; var name = OURERNAMENODE.VALUE; // O valor desse tipo = "Text" Value é o caractere na caixa // No futuro, quando houver um plano de fundo, os dados "abcd" devem ser solicitados do fundo do AJAX // aqui estão apenas fazendo uma demonstração simples - o nome de um pouco de AJAX // aqui estamos apenas fazendo uma demonstração simples - o nome de AJAX // está apenas fazendo uma demonstração simples - o nome de Ajax, que está apenas fazendo, estamos apenas fazendo uma demonstração simples - o que está apenas fazendo uma demonstração simples - o que está apenas sendo uma demonstração simples - o que você está apenas com uma demonstração - o que você está apenas com a manifestação, a tecnologia de AJAX, que está apenas fazendo uma demonstração simples. abcdif (nome == "abcd") {document.getElementById ("userNamespan"). innerhtml = "nome de usuário correto" .fontcolor ("verde");} else {document.getElementById ("usernamespan") checkpwd () {var usterpwdnode = document.getElementById ("pwd") [0]; var pwd = userpwdnode.value; if (pwd.length> = 6) {document.getElementById ("userpwdspan). requisitos ".fontColor (" verde ");} else {document.getElementById (" userpwdspan "). innerhtml =" o comprimento da senha deve ser maior ou igual a 6 ".FontColor (" vermelho "); }} </sCript> </head> <body> <form> <!-Onblur dispara quando o objeto perde o foco de entrada. -> Nome de usuário: <input type = "text" name = "userName" onblur = "checkUserName ()"/> <span id = "userNamespan"> </span> <br/> <br/> <!-Para deixar claro, a senha também é usada como tipo = "texto" aqui. De fato, a senha de type = "senha" deve ser usada -> senha: <input type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> </form> </body> </html>360 Browser 8.1 Resultados da demonstração:
O nome de usuário não cumpre as regras:
A senha não está em conformidade com as regras:
Verificação do Formulário de Registro 2 - Expressões regulares
Demonstração de código:
<html> <head> <title> DHTML Technology Demonstration --- Verificação do formulário de registro-Usando expressões regulares em js </ititle> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <script type = "text/javascript"> checkern; functml; functml; document.getElementsByName ("Nome de usuário") [0]; var UserName = OURERNAMENODE.VALUE; // Use o teste regular var Reg = new REGEXP ("[AZ] {4}", "i"); // Não é bom incluir 4 letras consecutivas, observe que as citações duplas de "i" não podem ser omitidas // Regexp ("^ [az] {4} $", "i"); // contém apenas 4 cartas consecutivas, observe que as citações duplas em "i" não podem ser omitidas //^ significa o início $ significa o fim varevernamespan = document.getElementByby ("userNamespan); if (reg.test (nome de usuário)) {ousernamespan.innerhtml = "o nome de usuário é formatado corretamente" .fontcolor ("verde");} else {ousernamespan.innerhtml = "nome do nome do usuário" .Fontcolor ("Red"); Expressões em js-> <script type = "text/javascript"> // var reg =/^[0-9] {6} $/; // Método um var reg = new regexp ("^[0-9] {6} $"); // Método dois var str = "123456"; var Bres = reg.test (str); // 111 usa métodos em objetos de expressão regular para verificação --- pode ser usado apenas para julgar se uma correspondência é comparada. A função é semelhante ao método Matches () na classe String em java // alert (bres); // true // 222 usa métodos no objeto String para testes regulares ---- A função é mais poderosa, semelhante à ferramenta Matcher em Java var res = str.match (reg); // o resultado correspondente é salvo em (é uma matriz). Se nenhuma correspondência for alcançada, res é nulo. // alert (res); // 123456 // A matriz retornada pelo método de correspondência possui três propriedades: entrada, índice e LastIndex. // ★ Um pouco de detalhes --- Ao usar o novo método regexp (), caracteres especiais devem ser escapados // var reg2 =/^/d {6} $/; // "/" Não é necessário escapar var reg2 = new regexp ("^/d {6} $"); // ※※ Observe que "/" escapar // ▲plice a frase acima está errada e deve ser escrita como: new regexp ("^// d {6} $)) // alert (reg.stest (" 12 "12" 12 "12" 12 "12" 12 "12" 12 "12" 12 " incêndios quando o objeto perde o foco de entrada. -> Nome de usuário: <input type = "text" name = "userName" onblur = "checkUserName ()"/> <span id = "userrNamespan"> </span> </morm> </body> </html>360 Browser 8.1 Resultados da demonstração:
Basta incluir 4 cartas consecutivas.
Verificação do formulário de registro e controlar a verificação front-end da submissão:
Local de criação de arquivos de código:
Demonstração de código:
3form3.html
<html> <head> <title> DHTML Technology Demonstration --- Verificação e controle de submissão de registro Formulário de Formulário-Front-Definir </ititle> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <script type = "text/javascript"> " Document.getElementsByName ("Nome de usuário") [0]; var UserName = OURERNAMENODE.VALUE; // Use verificação regular var = new REGEXP ("[AZ] {4}", "i" // não é bom incluir 4 letters consecutivos, por favor-, por favor-, observe que as citações duplas de "i lateral não podem ser omitidas/omiti-se/i-e não-//, // não é bom ///, não é ok de 4 {4}", e não é bom ////1 // não é bom incluir 4 letters consecutivos, por favor-, por favor-, as citações duplas de "i lateral não podem ser omitidas ////0tg; Regexp ("^ [AZ] {4} $", "i"); // contém apenas 4 cartas consecutivas, observe que as cotações duplas em "i" não podem ser omitidas //^ significa o início $ significa o fim varevernamespan = document.getElementByid ("userNamespan"); if (reg.test (nome de usuário)) {ousernamespan.innerhtml = "formato de nome de usuário está correto" .fontcolor ("verde"); return true;} else {ousernamespan.innerhtml = "nome de erro de usuário formato de erro" .fontcolor ("vermelho"); retornar false; }} função checkpwd () {var ouserpwdnode = document.getElementsByName ("pwd") [0]; var pwd = userpwdnode.value; var reg2 = novo Regexp ("^[// w // d] {6,9} $"); if (reg2.test (pwd)) {document.getElementById ("userpwdspan"). Innerhtml = "formato de senha atende aos requisitos" .fontcolor ("verde"); retorno = true;} else {document.getElementById ("userpwdspan"). innerhtml = "O comprimento da senha deve ser de 6-9 dígitos ou sublinhados" .Fontcolor ("Red"); retornar False;}} função checkUser () {if (checkUserName () & & & & checkpd ()}}} {/1) {if (wechUserName () & & & & & checkpd ()}} { aqui. Return true;} else {return false;}} </sCript> </ad Head> <body> <!-Controle a submissão do formulário registrando a resposta do evento Onsubmit. Se retornar false, ele não será enviado e o retorno true será enviado. Se o evento onSubmit não estiver registrado, será o retorno TrueOnsubMit acionado quando o formulário estiver prestes a ser enviado. <form action = "/mydhtmlproj/servlet/regservlet" onSubMit = "return true;">-> <form action = "/mydhtmlproj/servlet/regservlet" onsubMit = "return checkUser (); id = "UserNamesPan"> </span> <!-Por uma questão de clareza, a senha também é usada aqui. De fato, a senha do tipo = "senha" deve ser usada-> Senha: <input type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> <br/> <input Type = "submit" value "/" registro "// </form> <br/> Button-> <formig id = "userInfo" action = "/dhtmlproj/servlet/regservlet"> nome de usuário: <input type = "text" name = "userName" onblur = "checkUserName2 ()"/> <span id = "usernamesPan2"> </span> <br/> onblur = "checkpwd2 ()"/> <span id = "userpwdspan2"> </span> <br/> </morm> <input type = "button" value = "register" onclick = "mysubmit ()"/> <script type = "text/javascript"> função document.getElementById ("userInfo"); if (checkUserName2 () && checkpwd2 ()) {oformnode.subMit (); // enviando o formulário. }} função checkUserName2 () {var iperernameNode = document.getElementsByName ("nome de usuário") [1]; var username = uperernamenode.value; // usa teste regular var = novo regexp ("[Az] {4}," i "); // é o bem 4s para incluir 4 -REGEXP (" [Az] {4}, "i"); // é o que é o que é o que está oks. // i --- significa ignorar a parte superior e inferior // var regg = new regexp ("^ [az] {4} $", "i"); // ele contém apenas 4 cartas consecutivas, observe que as citações duplas em "i" não podem ser omitidas ///^ significa start $ significa end var iouSerNames = = Document.getElementById ("UserNamesPan2"); if (reg.test (nome de usuário)) {ousernamespan.innerhtml = "o formato do nome de usuário está correto" .FontColor ("Green"); retornar true;} else {eourNamesPan.innerHerHtml = username "; }} função checkpwd2 () {var ouserpwdnode = document.getElementsByName ("pwd") [1]; var pwd = userpwdnode.value; var reg2 = novo Regexp ("^[// w // d] {6,9} $"); if (reg2.test (pwd)) {document.getElementById ("userpwdspan2"). Innerhtml = "formato de senha atende aos requisitos" .fontcolor ("verde"); retorno = true;} else {document.getElementById ("userpwdspan2"). innerhtml = "o comprimento da senha deve ser de 6-9 dígitos ou sublinhados" .Fontcolor ("Red"); retornar false;}} </sCript> </body> </html>);show.jsp:
<%@ página linguagem = "java" import = "java.util. Transição // pt "> <html> <head> <title> Esta é a página após o registro </title> </ad Head> <body> <%out.println (request.getAttribute (" uname ")); out.println (request.getttribute (" pwd); %> <div> Bem -vindo </div> < %// Isso pode escrever código html acima} %> </body> </html>Regservlet.java
Este é um novo servlet.
Combinaremos automaticamente web.xml
pacote cn.hncu.user; importar java.io.ioException; importar java.io.printwriter; importar javax.servlet.servletexception; importar javax.servlet.http.httpServlet; import javax.servlet.http.httletRestlest; javax.servlet.http.httpServletResponse; classe pública Regservlet estende httpServlet {public void Doget (httpServletReQuest Solicy, httpservletResponse resposta) lança o servidor de servleTexception, {dopost (resposta); Resposta HttpServLetResponse) lança servletexception, ioexception {request.Setcharacterencoding ("utf-8"); // set coding string name = request.getParameter ("nome de usuário"); // nome de usuário é o nome do atributo de uma entrada no formulário enviado PWD = request.getParameter ("pwd"); // System.out.println (nome); request.setAttribute ("uname", "hncu ---"+nome); request.setattribute ("pwd", "pwd ---"+pwd); request.getRequestDispatcher ("/dhtml/6formsubmit/jsps/show.jsp"). Forward (solicitação, resposta); // saída, guia para outra página para exibir}}}}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>This is the description of my J2EE component</description><display-name>This is the display name of my J2EE Componente </libe-name> <ame-name> regservlet </servlet-name> <Servlet-class> cn.hncu.user.regservlet </servlet-class> </servlet> <sirtlet-mapping> <ervletname> regservlet </serrlet> <ratter>/servlet/regérletl </urlpattern>/servletlet/regérletl </url-maptlet>/servlettlet <lame> <lister-fil-list> <ldenmy-fil-bile> index.jsp </-Welcome-File> </list-File-List> </web-app>
360 Browser 8.1 Imagem da demonstração:
Quando os formatos forem preenchidos corretamente, clique no botão de registro e pule automaticamente para outra página.
Quando houver um erro de formato, clicar no botão de registro não responderá.
Verificação do formulário de registro e controlar a versão final da verificação front-end:
Demonstração de código:
<html> <head> <title> DHTML Technology Demonstração --- Verificação e controle Submissão do Formulário de Registro-Front-Definir Verificação-Final </ititle> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <cript "" check (nome, reg, spanid, okinfo, errinfo) {var value = document.getElementsByName (nome) [0] .Value; // Use verificação regular var ospannode = document.getElementById (spanid); if (reg.test (value)) {osportor.innerherh); true;} else {ospannode.innerhtml = errinfo.fontcolor ("vermelho"); retorna false;}} função checkUserName () {var reg = new regexp ("[az] {4}", "i"); // contém 4 letras consecutivas, observe que as cotações duplas "" i "); check ("nome de usuário", reg, "userNamespan", "userNamesPan", "Formato de nome de usuário está correto", "o nome de usuário do formato está errado");} função checkpwd () {var reg = new regexp ("^[// w/d] {6,9} $"); retorno " Requisitos "," O comprimento da senha deve ser de 6-9 dígitos ou sublinhado ");} função checkpwd2 () {var flag; var pwd = document.getElementsByName (" pwd ") [0] .Value; var pwd2 = document.getElementsByName (" pwd2 ") [0] .Value; document.getElementById ("userpwd2span"); if (pwd == pwd2) {ospannode.innerhtml = "duas senhas são consistentes" .fontcolor ("verde"); flag = true;} else {ospannode.InnerHtml ("duas senhas); flag;} função checkMail () {var reg = /^/w+@/w+(/./w+)+$/i; return check ("correio", reg, "userMailspan", "faça o formato da caixa de correio correto" e "CheckUrtNearname (check); checkMail ()) {return true;} else {return false;}} </script> </ading> <body> <formulário action = "/mydhtmlproj/servlet/regservlet" onSubMit = "Return checkUser ();"> nome de usuário: <input Type = "text"/"username" "username" "," username "") id = "userNamespan"> </span> <br/> Digite a senha: <input type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> <br/> Confirme a senha: <input Type = "" name = "pwd2" onblur = " id = "userpwd2span"> </span> <br/> Endereço de email: <input type = "text" name = "email" onblur = "checkMail ()"/> <span id = "usermailspan"> </span> <br/> <input Type = "submit" value = "registro"> </body> </body>360 Browser 8.1 Resultados da demonstração:
Somente após preencher todos os formatos corretamente, você responderá se clicar no botão de registro.
Depois de preencher todos os formatos corretamente, clique na página depois de clicar no botão Registro, ele realmente salta para a página Show.jsp. (Você pode localizar onde quiser)
O exposto acima é o conhecimento relevante do resumo da tecnologia de formulários (recomendado) no JavaScript introduzido a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem. O editor responderá a você a tempo!