Este artículo describe el método de JS para la verificación de formulario. Compártelo para su referencia. El método de implementación específico es el siguiente:
1. Código de verificación de forma tradicional
Copie el código de la siguiente manera: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Verificación de formulario </title>
<script type = "text/javaScript">
función $ (id) {
return document.getElementById (id);
}
función check () {
var correos electrónicos = $ ("correo electrónico"). valor;
VAC PASSAWS = $ ("PASSAWS"). VALOR;
var repassword = $ ("repassword"). valor;
var name = $ ("nombre"). valor;
if (correo electrónico == "") {
alerta ("El valor de correo electrónico no puede estar vacío");
$ ("correo electrónico"). focus ();
devolver falso;
}
if (correo electrónico.indexof ("@") == -1 || email.indexof (".") == -1) {
alerta ("El formato del buzón es incorrecto, debe incluir @ y.");
$ ("correo electrónico"). focus ();
devolver falso;
}
if (contraseña == "") {
alerta ("la contraseña no puede estar vacía");
$ ("contraseña"). focus ();
devolver falso;
}
if (contraseña.length <6) {
alerta ("La longitud de la contraseña debe ser mayor o igual a 6");
$ ("contraseña"). focus ();
devolver falso;
}
if (repassword! = contraseña) {
alerta ("La contraseña ingresada dos veces es inconsistente");
$ ("Repassword"). Focus ();
devolver falso;
}
if (name == "") {
alerta ("el nombre no puede estar vacío");
$ ("Nombre"). Focus ();
devolver falso;
}
para (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == falso) {
alerta ('el nombre no puede contener números');
$ ("Nombre"). Focus ();
devolver falso;
}
}
}
</script>
</ablo>
<Body>
<form de nombre = "login_form" método = "post" onsubmit = "return check ()">
<div>
Correo electrónico: <input type = "text" name = "correo electrónico" id = "correo electrónico"/>
</div>
<div>
Contraseña: <input type = "contraseña" name = "contraseña" id = "contraseña" />
</div>
<div>
Vuelva a ingresar la contraseña: <input type = "contraseña" name = "repassword" id = "repassword" />
</div>
<div>
Nombre: <input type = "text" name = "name" id = "name" />
</div>
<div>
<input type = "enviar" valor = "registro" />
</div>
</form>
</body>
</html>
2. Verificación de la forma con información rápida detrás del cuadro de entrada
Copie el código de la siguiente manera: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Verificación de formulario </title>
<script type = "text/javaScript">
función $ (id) {
return document.getElementById (id);
}
función check () {
var correos electrónicos = $ ("correo electrónico"). valor;
VAC PASSAWS = $ ("PASSAWS"). VALOR;
var repassword = $ ("repassword"). valor;
var name = $ ("nombre"). valor;
$ ("EmailInfo"). Innerhtml = "";
$ ("PasswordInfo"). InnerHtml = "";
$ ("repasswordinfo"). innerhtml = "";
$ ("nameInfo"). innerhtml = "";
if (correo electrónico == "") {
$ ("Correo electrónicoinfo"). InnerHtml = "El valor de correo electrónico no puede estar vacío";
$ ("correo electrónico"). focus ();
devolver falso;
}
if (correo electrónico.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("Correo electrónicoinfo"). Innerhtml = "El formato del buzón es incorrecto, debe incluir @ y.";
$ ("correo electrónico"). focus ();
devolver falso;
}
if (contraseña == "") {
$ ("PasswordInfo"). InnerHtml = "La contraseña no puede estar vacía";
$ ("contraseña"). focus ();
devolver falso;
}
if (contraseña.length <6) {
$ ("PasswordInfo"). InnerHtml = "La longitud de la contraseña debe ser mayor o igual a 6";
$ ("contraseña"). focus ();
devolver falso;
}
if (repassword! = contraseña) {
$ ("RepassWordInfo"). InnerHtml = "La contraseña ingresada dos veces es inconsistente";
$ ("Repassword"). Focus ();
devolver falso;
}
if (name == "") {
$ ("nameInfo"). Innerhtml = "El nombre no puede estar vacío";
$ ("Nombre"). Focus ();
devolver falso;
}
para (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == falso) {
$ ("nameInfo"). Innerhtml = 'El nombre no puede contener números';
$ ("Nombre"). Focus ();
devolver falso;
}
}
}
</script>
</ablo>
<Body>
<form de nombre = "login_form" método = "post" onsubmit = "return check ()">
<div>
Correo electrónico: <input type = "text" name = "correo electrónico" id = "correo electrónico"/> <span id = "correo electrónicoinfo"> </span>
</div>
<div>
Contraseña: <input type = "contraseña" name = "contraseña" id = "contraseña" /> <span id = "contraseñainfo"> </span>
</div>
<div>
Vuelva a ingresar la contraseña: <input type = "contraseña" name = "repassword" id = "repassword" /> <span id = "repassWordInfo"> </span>
</div>
<div>
Nombre: <input type = "text" name = "name" id = "name" /> <span id = "nameInfo"> </span>
</div>
<div>
<input type = "enviar" valor = "registro" />
</div>
</form>
</body>
</html>
Las representaciones son las siguientes:
3. Activar la función de verificación Cuando el cuadro de entrada pierde el enfoque
Copie el código de la siguiente manera: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Verificación de formulario </title>
<script type = "text/javaScript">
función $ (id) {
return document.getElementById (id);
}
función check () {
var correos electrónicos = $ ("correo electrónico"). valor;
VAC PASSAWS = $ ("PASSAWS"). VALOR;
var repassword = $ ("repassword"). valor;
var name = $ ("nombre"). valor;
$ ("EmailInfo"). Innerhtml = "";
$ ("PasswordInfo"). InnerHtml = "";
$ ("repasswordinfo"). innerhtml = "";
$ ("nameInfo"). innerhtml = "";
if (correo electrónico == "") {
$ ("Correo electrónicoinfo"). InnerHtml = "El valor de correo electrónico no puede estar vacío";
devolver falso;
}
if (correo electrónico.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("Correo electrónicoinfo"). Innerhtml = "El formato del buzón es incorrecto, debe incluir @ y.";
devolver falso;
}
if (contraseña == "") {
$ ("PasswordInfo"). InnerHtml = "La contraseña no puede estar vacía";
devolver falso;
}
if (contraseña.length <6) {
$ ("PasswordInfo"). InnerHtml = "La longitud de la contraseña debe ser mayor o igual a 6";
devolver falso;
}
if (repassword! = contraseña) {
$ ("RepassWordInfo"). InnerHtml = "La contraseña ingresada dos veces es inconsistente";
devolver falso;
}
if (name == "") {
$ ("nameInfo"). Innerhtml = "El nombre no puede estar vacío";
devolver falso;
}
para (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == falso) {
$ ("nameInfo"). Innerhtml = 'El nombre no puede contener números';
devolver falso;
}
}
}
función checkEmail () {// Verifique el correo electrónico
$ ('emailInfo'). innerhtml = "";
var correos electrónicos = $ ('correo electrónico'). valor;
if (correo electrónico == "") {
$ ('emailInfo'). innerhtml = "El valor de correo electrónico no puede estar vacío";
devolver falso;
}
if (correo electrónico.indexof ('@') == -1 || email.indexof ('.') == -1) {
$ ('emailInfo'). innerhtml = "El correo electrónico debe contener @ y.";
devolver falso;
}
}
función checkPassword () {// Verifique la contraseña
$ ('PasswordInfo'). InnerHtml = "";
VAC PASSWASS = $ ('PASSAWS'). VALOR;
if (contraseña == "") {
$ ("PasswordInfo"). InnerHtml = "La contraseña no puede estar vacía";
devolver falso;
}
if (contraseña.length <6) {
$ ("PasswordInfo"). InnerHtml = "La longitud de la contraseña debe ser mayor o igual a 6";
devolver falso;
}
}
función checkrepassword () {// Verifique la contraseña de reingreso
$ ('repassword'). innerhtml = "";
var repassword = $ ('repassword'). valor;
if (repassword! = contraseña) {
$ ("RepassWordInfo"). InnerHtml = "La contraseña ingresada dos veces es inconsistente";
devolver falso;
}
}
función checkName () {// Nombre de verificación
$ ('nameInfo'). innerhtml = "";
var name = $ ('nombre'). Valor;
if (name == "") {
$ ("nameInfo"). Innerhtml = "El nombre no puede estar vacío";
devolver falso;
}
para (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == falso) {
$ ("nameInfo"). Innerhtml = 'El nombre no puede contener números';
devolver falso;
}
}
}
</script>
</ablo>
<Body>
<form de nombre = "login_form" método = "post" onsubmit = "return check ()">
<div>
Correo electrónico: <input type = "text" name = "correo electrónico" id = "correo electrónico" onblur = "checkEmail ();"/> <span id = "correo electrónicoinfo"> </span>
</div>
<div>
Contraseña: <input type = "contraseña" name = "contraseña" id = "contraseña" onblur = "checkpassword ();"/> <span id = "contraseñainfo"> </span>
</div>
<div>
Vuelva a ingresar la contraseña: <input type = "contraseña" name = "repassword" id = "repassword" onblur = "checkrepassword ();"/> <span id = "repasswordinfo"> </span>
</div>
<div>
Nombre: <input type = "text" name = "name" id = "name" onblur = "checkName ();"/> <span id = "nameInfo"> </span>
</div>
<div>
<input type = "enviar" valor = "registro" />
</div>
</form>
</body>
</html>
Las representaciones son las siguientes:
Espero que este artículo sea útil para la programación de JavaScript de todos.