Esta no es una verificación de fondo muy complicada y expresiones regulares de JavaScript. Acabo de presentar brevemente esta tecnología, recepción y salto de fondo simple, y solo entiendo cómo verificarla. Continuaré escribiendo blogs para técnicas específicas más adelante. Todavía estoy estudiando.
Verificación de formulario 1 Verificación simple
Para una verificación simple, el nombre de usuario debe ser ABCD, y la longitud de la contraseña debe ser mayor o igual a 6
Luego, según los datos ingresados por el usuario, se otorga un mensaje más adelante.
Código de demostración:
<html> <fead> <title> demostración de tecnología dhtml --- Verificación de formulario </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script> function checkUsername () {// alerta ("aa"); // prueba si esta pérdida de la pérdida de focal funciona var o oVuSernamenodeod =) document.getElementsByName ("UserName") [0]; var name = oUsernamenode.Value; // El valor de este tipo = "Text" Value es el carácter en el cuadro // en el futuro, cuando hay un fondo, los datos "ABCD" deben solicitarse desde el fondo a través de la tecnología AJAX // aquí solo estamos haciendo una demostración simple - El nombre que se llena debe llenar debe ser necesario que debe llenar en el que se llena debe llenar en el que se llena en el que se llena debe llenar en el nombre de que se llene debe llenar en el nombre de que se llene debe llenar en el nombre de que debe llenar en el nombre, debe llenar el nombre de que se llene debe llenar en el nombre de que se llene debe llenar en el nombre, debe ser que llena, debe ser que llene debe llenar el nombre de que se llene debe abcdif (name == "abcd") {document.getElementById ("usernamespan"). innerhtml = "username correcto" .fontcolor ("green");} else {document.getElementById ("usernamespan"). innerHml = "username error" .Fontcolor ("rojo"; checkPwd () {var oUserpwdnode = document.getElementById ("pwd") [0]; var pwd = ouserpwdnode.value; if (pwd.length> = 6) {document.getElementById ("userpwdspan"). innerhtml = "La contraseña se reúne en el formato de la contraseña. Requisitos ".FontColor (" Green ");} else {document.getElementById (" userPwdspan "). Innerhtml =" La longitud de la contraseña debe ser mayor o igual a 6 ".FontColor (" rojo "); }} </script> </head> <body> <form> <!-Onblur dispara cuando el objeto pierde el enfoque de entrada. -> UserName: <input type = "text" name = "username" onblur = "checkUsername ()"/> <span id = "usernamespan"> </span> <br/> <br/> <!-Para aclarar, la contraseña también se usa como tipo = "text" aquí. De hecho, se debe usar la contraseña de type = "contraseña" -> contraseña: <input type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> </form> </body> </html>360 Browser 8.1 Resultados de demostración:
El nombre de usuario no cumple con las reglas:
La contraseña no cumple con las reglas:
Verificación del Formulario de registro 2 - Expresiones regulares
Código de demostración:
<html> <foad> <title> DHTML Technology Demossion --- Verificación del formulario de registro-Uso de expresiones regulares en js </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <script type = "text/javaScript"> function checkUsername () {var o ovalamenod = = document.getElementsByName ("UserName") [0]; var userName = oUsernamenode.Value; // use la prueba regular var reg = new Regexp ("[AZ] {4}", "i"); // está bien incluir 4 letras consecutivas, tenga en cuenta que las cotizaciones dobles de "i" no se pueden omitir // i ---- Ignoring superior e infringido en la parte superior e inferior/ Regexp ("^ [AZ] {4} $", "i"); // Solo contiene 4 letras consecutivas, tenga en cuenta que las cotizaciones dobles en "i" no se pueden omitir //^ significa el inicio $ significa el final var osernamespan = document.getElementByid ("usernamespan"); // alerta (reg.test (username)); if (reg.test (username)) {ousernamespan.innerhtml = "El nombre de usuario está formateado correctamente" .FontColor ("verde");} else {oUsernamespan.innerhtml = "Error de formato de nombre de usuario". en js-> <script type = "text/javaScript"> // var reg =/^[0-9] {6} $/; // método un var reg = new Regexp ("^[0-9] {6} $"); // método dos var str = "123456"; var bres = reg.test (str); // 111 usa métodos en objetos de expresión regulares para la verificación --- solo se puede usar para juzgar si una coincidencia coincide. La función es similar al método de coincidencias () en la clase de cadena en java // alerta (bres); // true // 222 usa métodos en el objeto de cadena para pruebas regulares ---- La función es más potente, similar a la herramienta Matcher en java var res = str.match (reg); // El resultado de la coincidencia se guarda en res (es un array). Si no se alcanza no coincidir, Res es nulo. // alerta (res); // 123456 // La matriz devuelta por el método de coincidencia tiene tres propiedades: entrada, índice y dastIndex. // ★ Un pequeño detalle --- Al usar el nuevo método REGEXP (), los caracteres especiales deben escaparse // var reg2 =/^/d {6} $/; // "/" No es necesario escapar var reg2 = new Regexp ("^/d {6} $"); // ※※ Tenga en cuenta que "/" escapar // ▲atal la oración anterior está mal y debe escribirse como: new Regexp ("^// d {6} $") // Alert (reg2.test ("123456"); </script> <script> <formul pierde el enfoque de entrada. -> UserName: <input type = "text" name = "username" onblur = "checkUsername ()"/> <span id = "usernamespan"> </span> </form> </body> </html>360 Browser 8.1 Resultados de demostración:
Solo incluya 4 cartas consecutivas.
Verificación del formulario de registro y controlar la verificación front-end de la presentación:
Ubicación de la creación del archivo del código:
Código de demostración:
3form3.html
<html> <fead> <title> DHTML Technology Demosation --- Verificación y control de la presentación de la verificación de la frontea de registro </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <script type = "text/javaScript"> function chechusEname () {var oomeSernamenMeNamen = document.getElementsByName ("UserName") [0]; var userName = oUsernamenode.Value; // use verificación regular var reg = new REGEXP ("[AZ] {4}" "," i "); // está bien incluir 4 letras consecutivas, por favor, tenga en cuenta que las cotizaciones dobles de" i no se pueden omitir // i ---- Ignorando la actualidad y la caja baja Regexp ("^ [AZ] {4} $", "i"); // Solo contiene 4 letras consecutivas, tenga en cuenta que las cotizaciones dobles en "i" no se pueden omitir //^ significa el inicio $ significa el final var oSsernamespan = document.getElementByid ("usernamespan"); if (reg.test (username)) {ousernamespan.innerhtml = "El formato de nombre de usuario es correcto" .FontColor ("verde"); return true;} else {ousernamespan.innerhtml = "formato de error de nombre de usuario" .FontColor ("rojo"); return false; }} función checkPwd () {var oUserpwdnode = document.getElementsByName ("pwd") [0]; var pwd = ouserpwdnode.value; var reg2 = nuevo Regexp ("^[// w // d] {6,9} $"); if (reg2.test (pwd)) {document.getElementById ("userpwdspan"). Innerhtml = "El formato de contraseña cumple con los requisitos" .Fontcolor ("verde"); regreso; verdadero;} else {document.getElementById ("userPwdspan"). innerHtml = "La longitud de la contraseña debe ser 6-9 dígitos o subrayarse" .FontColor ("rojo"); return false;}} function checkUser () {if (checkUsEntame () & checkPWD () {// Si hay otros ítems que hay que ser verificados antes de que se hayan verificado verificado, el súbdito de verificación, solo la verificación, la verificación de verificación. aquí. Return true;} else {return false;}} </script> </head> <body> <!-Controle el envío del formulario registrando la respuesta del evento OnSubmit. Si devuelve falso, no se enviará, y el retorno verdadero se enviará. Si el evento OnSubmit no está registrado, se retira TrueSonsubmit activado cuando el formulario está a punto de ser enviado. <form de acción = "/mydhtmlproj/servlet/regservlet" onSubMit = "return true;">-> <form de action = "/mydhtmlproj/servlet/regservlet" onsubMit = "return checkUser ();"> userneNe: <input type = "text" name = "username" onblur = "checkuser ()") ")") ")") ")") id = "usernamespan"> </span> <!-En aras de la claridad, la contraseña también se usa aquí. De hecho, se debe usar la contraseña de type = "contraseña"-> contraseña: <input type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> <br/> <input type = "Subt" value = "registro" // </form> <hr/> <!-Formulario Método 2 ---- Botón de escritura A Botón para reemplazar el Botón de formulario To el formulario de la Formulario. Botón-> <Form ID = "UserInfo" Action = "/DhtmlProj/Servlet/RegServlet"> UserName: <input type = "text" name = "username" onblur = "checkusername2 ()"/> <span id = "usernamespan2"> </span> <br/> contraseña: <type de entrada = "text" name = "pwd" "" "" "" "" "PWD" onblur = "checkpwd2 ()"/> <span id = "userpwdspan2"> </span> <br/> </orm> <input type = "button" value = "registrar" onclick = "mysubMit ()"/> <script type = "text/javascript"> function mySubMit () {var oformnode = = document.getElementById ("UserInfo"); if (checkUsername2 () && checkPwd2 ()) {oformnode.submit (); // Enviar envío el formulario. }} function checkUsername2 () {var oUsernamenode = document.getElementsByName ("username") [1]; var userName = oUsernamenode.value; // Use la prueba regular var reg = new REGEXP ("[AZ] {4}", "I"); // está bien incluir 4 letreros consuetidos, anote que la cita dos cotas no pueda // i --- significa ignorar la caja superior y minúscula // var regg = new Regexp ("^ [AZ] {4} $", "I"); // Solo contiene 4 letras consecutivas, tenga en cuenta que las citas dobles en "I" no se pueden omitir //^ significa inicio $ medir Var Osernamespan = document.getElementById ("usernamespan2"); if (reg.test (username)) {oUsernamespan.innerhtml = "El formato de nombre de usuario es correcto" .fontcolor ("green"); return true;} else {ousernamespan.innerhtml = "usame format está equivocado" .fontcolor (fontcolor (("rojo"); }} función 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 = "El formato de contraseña cumple con los requisitos" .Fontcolor ("verde"); regreso; true;} else {document.getElementById ("userPwdspan2"). innerhtml = "La longitud de la contraseña debe ser 6-9 dígitos o subrayarse" .FontColor ("rojo"); return false;}} </script> </body> </html>show.jsp:
<%@ page lenguaje = "java" import = "java.util.*" pageEncoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> < Transitional // en "> <html> <fead> <title> Esta es la página después del registro </title> </head> <body> <%out.println (request.getAttribute (" uname ")); out.println (request.getAttribute (" pwd ");%> <%para (int i = 0; i <3; i ++) {// %> <div> Bienvenido </div> < %// Esto puede escribir el código HTML arriba} %> </body> </html>Regservlet.java
Este es un nuevo servlet.
Coincidiremos automáticamente en web.xml
paquete 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; importar; javax.servlet.http.httpServletResponse; public class regservlet extiende httpservlet {public void doget (httpservletRequest request, httpServletResponse respuesta) lanza ServletException, IOException {dopost (solicitud, respuesta);} Void void doPost (htpservletRequest, hettServeTrErtREn respuesta) lanza ServLetException, ioException {request.setcharacterEncoding ("UTF-8"); // Establecer name de cadena de codificación = request.getParameter ("username"); // UserName es el atributo de nombre de una entrada en la cadena de formulario presentada pwd = request.getParameter ("pwd"); // system.out.println (nombre); request.setTribute ("uname", "hncu ---"+name); request.setTribute ("pwd", ", "pwd ---"+pwd); request.getRequestDispatcher ("/dhtml/6formsubmit/jsps/show.jsp"). ADELAR (solicitud, respuesta);//salida, guía a otra página para mostrar}}web.xml
<? xml versión = "1.0" encoding = "utf-8"?> <web-app versión = "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> Esta es la descripción de mi componente j2ee </scuion> <pantsipname> Este es el nombre de la pantalla de mi j2ee componente </sippension-name> <Servlet-name> regservlet </servlet-name> <ervlet-class> cn.hncu.user.regservlet </servlet-class> </servlet> <ervlet-mapping> <ervlet-name> regservlet </servlet-name-name> <url-pattern>/servlet/regservlet </ url-stlame> <velceed-file-list> <Welcome-file> index.jsp </leadde-file> </le bienvenido-file-list> </beb-app>
360 navegador 8.1 Imagen de demostración:
Cuando los formatos se completen correctamente, haga clic en el botón de registro y salte automáticamente a otra página.
Cuando hay un error de formato, hacer clic en el botón de registro no responderá.
Verificación del formulario de registro y controlar la versión final de la verificación front-end:
Código de demostración:
<html> <fead> <title> Demostración de tecnología DHTML --- Verificación y control de la verificación de la verificación del extremo de registro-FRONT-Versión final </title> <meta http-oquiv = "Content-type" content = "text/html; charset = utf-8"/> <script type = "text/javaScript"> función vers (nombre, reg, spanid, okinfo, errinfo) {var value = document.getElementsByName (name) [0] .Value; // Use verificación regular var ospannode = document.getElementById (spanId); if (reg.test (valor)) {osphannode.innerhtml = okinfo.fontcolor ("green"); verdadero;} else {oSpannode.innerhtml = errinfo.fontcolor ("rojo"); return false;}} function checkUsername () {var reg = new regExp ("[az] {4}", "i"); // contiene 4 letras consecutivas, observa que las dobles cotizaciones en "i no se pueden omitir el retorno omitido cheque ("Nombre de usuario", reg, "usernamespan", "usernamespan", "formato de nombre de usuario es correcto", "el formato de nombre de usuario está mal");} function checkPwd () {var reg = new rege requisitos "," La longitud de la contraseña debe ser 6-9 dígitos o subrayarse ");} function checkPwd2 () {var flag; var pwd = document.getElementsByName (" pwd ") [0] .value; var pwd2 = document.getElementsByNeMyNe document.getElementById ("userPwd2span"); if (pwd == pwd2) {oSpannode.innerhtml = "dos contraseñas son consistentes" .FontColor ("green"); flag = true;} else {osphannode.innerhtml = "Dos contraseñas son entradas" .Fontcolor ("" Red "; flag;} function checkmail () {var reg = /^/w+@/w+(/./w+)+$$/i;return check ("mail", reg, "usermailspan", "hacer formato de buzón correcto", "formato de cajero incorrecto");} function checkUser () {// Control de formato if (checkusEname () && checkpwd () checkMail ()) {return true;} else {return false;}} </script> </head> <body> <form de action = "/mydhtmlproj/servlet/regservlet" onsubMit = "return checkUser ();"> userneN id = "usernamespan"> </span> <br/> Ingrese contraseña: <input type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> <br/> confirmar contraseña: <input type = "text" name = "pwd2" onblur = "checkpwd2 ()"/> "span id = "userpwd2span"> </span> <br/> Dirección de correo electrónico: <input type = "text" name = "mail" onblur = "checkmail ()"/> <span id = "usermailspan"> </span> <br/> <input type = "presentar" value = "registro"> </form> </buerte> </html>360 Browser 8.1 Resultados de demostración:
Solo después de completar todos los formatos correctamente, responderá si hace clic en el botón de registro.
Después de completar todos los formatos correctamente, haga clic en la página Después de hacer clic en el botón de registro, en realidad salta a la página show.jsp. (Puedes ubicar donde quieras)
Lo anterior es el conocimiento relevante del resumen de tecnología de formulario (recomendado) en JavaScript presentados por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje. ¡El editor le responderá a tiempo!