Pregunta: Cómo verificar el formulario inmediatamente después de la entrada, en lugar de verificarlo después de enviarlo es tan inconveniente (las búsquedas en línea son ambiguas o incompletas ...)
Método: En vista de esto, Xiaoke, Shuishanqi, complete el código y agregue la comprensión personal (notaciones) de Xiaoke. Es solo para los recursos para evitar los desvíos. Critique y corrija todo tipo de héroes ... (tenga en cuenta el autor, Xiexie) - Versión de formulario de mesa, y habrá una versión jQuery en el futuro ...
Si te ayuda, pruébalo (o) 〃ao ~
captura de pantalla:
Código:
<! Doctype html> <html> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> Registro de usuarios </title> <!-El estilo CSS externo se hace referencia aquí-> <Link Rel = "StylesHeet" Href = "CSS/Style.css"/scripts "/scripts" type = "text/javaScript"> // verificación oportuna de la función de nombre de usuario checkuse () {// Definir la variable de verificación en cada función es poder verificar si cada función pasa una por una después de que se envíe el formulario, lo cual es muy bueno. (Igual a la siguiente) Var check; var userName = document.getElementById ("nombre de usuario"). valor; if (username.length> 18 || username.length <6) {alerta ("La entrada del nombre de usuario es ilegal, por favor vuelva a ingresar!"); // Esto es muy maravilloso. Desde que ingresó al lugar equivocado aquí, entonces en teoría, por supuesto, debe continuar entrando aquí. (¡Continúe enfocándose aquí!) Docum.getElementById ("Nombre de usuario"). Focus (); check = false; } else {document.getElementById ("checkText1"). innerhtml = "* El nombre de usuario consta de caracteres de 6-18 bits √"; check = true; } cheque de retorno; } // Use expresiones regulares para determinar si la contraseña cumple con la función checkpwd () {var check; var reg = /[^a-z-z0-9 _]+ /; var regs = /^[A-ZA-Z0-9_ /U4E00- /U9FA5] + $ /; VAC PASSWORD = Document.getElementById ("Password"). Valor; if (contraseña.length <6 || contraseña. document.getElementById ("contraseña"). focus (); check = false; } else {document.getElementById ("checkText2"). innerhtml = "* La contraseña consta de 6-18 caracteres y debe contener letras, números y signos de puntuación √"; check = true; } cheque de retorno; } // Verifique si la contraseña es inconsistente! función checkPwdc () {var check; VAC PASSWORD = Document.getElementById ("Password"). Valor; var pwdc = document.getElementById ("pwdc"). valor; if (contraseña! = pwdc) {alert ("La contraseña es inconsistente cuando se ingresa la contraseña, ¡vuelva a ingresar!"); document.getElementById ("pwdc"). focus (); check = false; } else {document.getElementById ("checkText3"). innerhtml = "* Ingrese su contraseña nuevamente √"; check = true; } cheque de retorno; } // Verificar la función de categoría de usuario checkut () {var check; if (document.getElementById ("Seluser"). SelectedIndex == 0) {Alert ("¡Seleccione el tipo de usuario!"); document.getElementById ("Seluser"). Focus (); check = false; } else {document.getElementById ("checkText4"). innerhtml = "* Seleccione el tipo de usuario √"; check = true; } cheque de retorno; } // Verificar la función de género del usuario checkgender () {var check; var gender = ""; // Obtener todas las etiquetas con el nombre Sex Var Sex = Docum.getElementsByName ("Sex"); // Transfiere estas etiquetas con el sexo de nombre para (var i = 0; i <sex.length; ++ i) {// Si se selecciona un sexo, registre si (sexo [i] .ecked) género = sexo [i] .value; } if (género == "") {alerta ("¡Seleccione el género!"); check = false; } else {document.getElementById ("checkText5"). innerhtml = "* Seleccione su género√"; check = true; } cheque de retorno; } // Verifique oportunamente la función de fecha de nacimiento check Date () {var check; if (document.getElementById ("txtDate"). valor == "") {alerta ("¡Complete la fecha de nacimiento!"); document.getElementById ("txtDate"). focus (); check = false; } else {document.getElementById ("checkText6"). innerhtml = "* Seleccione su fecha de nacimiento √"; check = true; } cheque de retorno; } // verifique oportunamente la función de intereses y pasatiempos checkHobby () {var check; Var Hobby = 0; // Objnum es todas las etiquetas de entrada con el nombre Hobby var objnum = document.getElementsByName ("Hobby"); // Transfiere todas las etiquetas de pasatiempo para (var i = 0; i <objnum.length; ++ i) {// juzga si se selecciona una etiqueta de pasatiempo si (objnum [i] .ecked == true) hobby ++; } // Si hay una etiqueta de pasatiempo seleccionada if (hobby> = 1) {document.getElementById ("checkText7"). Innerhtml = "* Seleccione su hobby √"; check = true; } else {alerta ("¡Complete el pasatiempo!"); check = false; } cheque de retorno; } // Función de correo electrónico de verificación de expresión regular (oportuno) CHECKMail () {var check; // Expresión regular del correo electrónico var e1 = document.getElementById ("correo electrónico"). value.indexof ("@", 0); var e2 = document.getElementById ("correo electrónico"). value.IndexOf (".", 0); if (correo electrónico == "" || (e1 ==-1 || e2 ==-1) || e2 <e1) {alert ("E_Mail Error de entrada!"); document.getElementById ("correo electrónico"). focus (); check = false; } else {document.getElementById ("checkText8"). innerhtml = "* Por favor, complete el correo electrónico comúnmente utilizado, que se utilizará para recuperar la contraseña √"; check = true; } cheque de retorno; } // verificación oportuna de la función de autointroducción checkIntro () {var check; var intro = document.getElementById ("Introducción"). Valor; if (intro.length> 100) {alert ("¿El recuento de palabras excede el límite!"); check = false; } else {document.getElementById ("checkText9"). innerhtml = "* limitado a 100 palabras"; document.getElementById ("checkText9"). focus (); check = true; } cheque de retorno; } //All verifications are performed when submitting the form (if any verification fails, it will be returned to false to prevent the form submission) function check() { var check = checkuse() && checkpwd() && checkpwdc() && checkut() && checkGender() && checkDate() && checkHobby() && checkmail() &&checkintro(); cheque de devolución; } </script> </head> <body> <!-<form de acción = "página de salto" método = "get" | "post" name = "form de formular" Target = "Open with" Enctype = "multipart/formy-data">-> <!-OnsubMit () Función Sumula un formulario cuando el valor de retorno es verdadero. -> <Form Action = "#" Method = "Get" onSubMit = "return check ()"> <FieldSet> <Legend> Pequeño ejemplo de verificación oportuna de la forma </legend> <table align = "left" style = "en fondo: url ('img/4.jpg');"; "; > <tr> <td> nombre de usuario: </td> <td> <input type = "text" name = "username" id = "username" onchange = "checkuse ()"/> </td> <td id = "checkText1">* UserName consiste en 6-18 caracteres </td> </tr> <!-OnBlur Event Handler: TRigging When a TRigging ANTIGER ANEMENTO A UN ELEMENT Handler de eventos: activado cuando un elemento de formulario obtiene enfoque y el contenido cambia-> <!-El siguiente es el mismo-> <tr> <td> contraseña: </td> <td> <input type = "contraseña" name = "contraseña" id = "contraseña" onchange = "checkpwd ()"/> </td> <td id = "checkText2">* La contraseña consiste de 6-18 caracteres y debe contener letras, y debe contener letras, y contener letras, contener contenido, contener contenido, contener contenido, contener contenido, contener contenido, contener contenido, contener contener contener contener contenido, contener contener contener contener contenido, contener contener contener contener contenido, contener contener contenido, contener contener contenido, contener contener contenido, contener contener contener contener contenido, contener contenido, contener contener contener contener contenido, contener contener contenido, contener contenido, Marcas </td> </tr> <tr> <tr> <td> Confirmar contraseña: </td> <td> <input type = "contraseña" name = "pwdc" id = "pwdc" onchange = "checkpwdc ()"/> </td> <td id = "checkText3">* Ingrese su contraseña nuevamente </td> </tr> <tr> <tr> <tr> <tr> <TD> <select id = "seluser" onblur = "checkut ()"> <opción name = "seluser" value = "0"> Seleccione </opción> <opción name = "seluser" value = "1"> admin </option> <option name = "seluser" value = "2"> user ordinary </select> </td> <td id = "checktext4">** por favor use usuar <tr> <td> género: </td> <td> <input type = "radio" valor = "1" name = "sex" onChange = "checkgender ()"/> masculino <input type = "radio" value = "2" name = "sex" onchange = "checkgender ()"/> femenino </td> <td iD = "checkText5">* por favor seleccione <TD> Fecha de nacimiento: </td> <td> <input type = "date" name = "date" id = "txtDate" onblur = "checkDate ()"/> </td> <td id = "checktext6">* Seleccione su fecha de nacimiento </td> </tr> <tr> <td> hosts: </td> <td> value = "Reading" onChange = "checkHobby ()"> Reading <input type = "checkbox" name = "hobby" value = "music" onChange = "checkHobby ()"> music <input type = "checkBox" name = "hobby" value = "sports" <ttr> <td> correo electrónico: </td> <td> <input type = "text" name = "correo electrónico" id = "correo electrónico" onchange = "checkemail ()"/> </td> <td id = "checkText8">* Por favor, complete el correo electrónico utilizado, que se usará para la recuperación de contraseña </td> </tr> <tr> <tr> <tr> cols = "30" Rows = "3" name = "Introducción" id = "Introducción" onChange = "checkIntro ()"> Esta es una autointroducción ... </sextarea> </td> <td id = "checkText9">* limitado a 100 palabras </td> </tr> <tr> <td colspan = "2" align = "center"> <py type de entrada = "Subting" name " valor = "enviar"/> <input type = "reset" name = "reset" value = "reset"/> </td> </tr> </table> </fieldset> </form> </body> </html>Estilo CSS:
Entrada: Focus, TextARea: Focus {Border: 1px Solid #F00; Antecedentes: #fcc; } textArea {ancho: 230px; Altura: 50px; } cuerpo {font-size: 15px; /* Estilo de fuente*/ Font-Family: Microsoft Yahei; } Opción Seleccionar {Font-Size: 10px; Font-Family: Microsoft Yahei; }Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.