JavaScript - Validación de correo y contraseñas con expresiones regulares

 
Vista:
sin imagen de perfil
Val: 18
Ha disminuido su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validación de correo y contraseñas con expresiones regulares

Publicado por raquel (12 intervenciones) el 03/06/2020 22:27:14
Muy buenas gente!
Estoy haciendo un formulario de registro sencillo (nombre, email, contraseña y verificar contraseña), y mi intención era validar tanto el correo como la contraseña con expresiones regulares...
aqui os pongo el codigo html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<form class="flex-column flex-md-row" action="#" name="registro" id="registro" method="POST" enctype="multipart/form-data" autocomplete="off" onsubmit="return validar();">
 
	<div class="form-group row">
		<label for="nombre" class="col-sm-2 col-form-label">Nombre</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="nombre" placeholder="Nombre" >
			        <span id="Name_error"></span>
			</div>
 
	</div>
 
 
	<div class="form-group row">
		<label for="email" class="col-sm-2 col-form-label">Email</label>
			<div class="col-sm-10">
			    <input type="email" class="form-control" id="email" placeholder="Email" >
			     <span id="Mail_error"></span>
		        </div>
	</div>
 
 
	<div class="form-group row">
		 <label for="password" class="col-sm-2 col-form-label">Password</label>
			 <div class="col-sm-10">
				<input type="password" class="form-control" id="pwd1" placeholder="Password" >
			        <span id="Clave1_error"></span>
			 </div>
	</div>
 
	<div class="form-group row">
		<label for="password" class="col-sm-2 col-form-label">Confirma Password</label>
			<div class="col-sm-10">
				<input type="password" class="form-control" id="pwd2" placeholder="Confirma Password"  >
				<small id="passwordHelpInline" class="text-muted"> 8-16 caracteres, at least one number, at least one lowercase, at least one uppercase.</small><br>
			       <span id="Clave2_error"></span>
			</div>
	</div>
 
 
	<div class="custom-control custom-checkbox my-4 ">
	           <input class="custom-control-input" type="checkbox" id="gridCheck" name="acepto" value="yes" >
                   <span id="Check_error" ></span>
	            <label class="custom-control-label" for="gridCheck">Acepto<a href=""> las condiciones de uso y privacidad</a><br><small>Debe aceptar antes de registrarse.</small></label>
        </div>
 
	<div class="form-group my-3">
		<button type="submit" class="btn btn-outline-primary" id="btn" >Registrarse</button>
	</div>
 
</form>

Es un formulario sencillo con bootstrap... el problema viene ahora... a la hora de validar correo y contraseña con expresiones regulares, el resto funciona correctamente.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
var nombre = document.forms["registro"]["nombre"];
	var correo = document.forms["registro"]["email"];
	var clave1 = document.forms["registro"]["pwd1"];
	var clave2 = document.forms["registro"]["pwd2"];
	var check = document.forms["registro"]["gridCheck"];
 
        var error_Nom = document.getElementById("Name_error");
	var error_Mail = document.getElementById("Mail_error");
	var error_pass1 = document.getElementById("Clave1_error");
	var error_pass2= document.getElementById("Clave2_error");
	var error_check = document.getElementById("Check_error");
 
        nombre.addEventListener("blur", nameVerify, true);
	correo.addEventListener("blur", emailVerify, true);
	clave1.addEventListener("blur", passwordVerify, true);
 
function validar (){
 
	//var expresion = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/;
        //expresion regular para correo electronico
	var expresion = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
       //var expresion = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/;
 
       //expresion regular para contraseña
	var exp =/^(?=\w*\d)(?=\w*[A-Z])(?=\w*[a-z])\S{8,16}$/;
 
	if(nombre.value == ""){
		nombre.style.border = "1px solid red";
		error_Nom.textContent ="Nombre requerido";
		error_Nom.style.color ="red";
		nombre.focus();
		return false;
	}
 
	if(nombre.value.length < 4 || nombre.value.length > 16){
		nombre.style.border = "1px solid red";
		error_Nom.textContent ="El nombre debe tener entre de 4 y 16 caracteres";
		error_Nom.style.color ="red";
		nombre.focus();
		return false;
	}
	if(correo.value == ""){
		correo.style.border = "1px solid red";
		error_Mail.textContent ="Correo requerido";
		error_Mail.style.color ="red";
		correo.focus();
		return false;
	}
 
	/*if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/.test(correo)){
   		alert("La dirección de email " + correo + " es correcta.");
  	} else {
   		alert("La dirección de email es incorrecta.");
 	 }*/
 
	if(!expresion.test(correo)){
		correo.style.border = "1px solid red";
		error_Mail.textContent ="Introduzca un correo válido";
		error_Mail.style.color ="red";
		correo.focus();
		return false;
	}
 
	if(clave1.value == ""){
		clave1.style.border = "1px solid red";
		error_pass1.textContent ="Contraseña requerida";
		error_pass1.style.color="red";
		clave1.focus();
		return false;
	}
 
	if(!exp.match(clave1)){
		clave1.style.border = "1px solid red";
		error_pass1.textContent ="La contraseña debe contener al menos una mayúscula, al menos una minúscula, al menos un dígito y tener entre 8 y 16 caracteres";
		error_pass1.style.color="red";
		clave1.focus();
		return false;
	}
 
	if(clave1.value != clave2.value){
		clave1.style.border = "1px solid red";
		clave2.style.border = "1px solid red";
		error_pass1.textContent ="No coinciden las constraseñas";
		error_pass1.style.color="red";
		return false;
	}
 
}
 
function nameVerify(){
 
	if(nombre.value != ""){
		nombre.style.border = "1px solid #5e6e66";
		error_Nom.innerHTML ="";
		return true;
	}
}
 
function emailVerify(){
 
	if(correo.value != ""){
		correo.style.border = "1px solid #5e6e66";
		error_Mail.innerHTML ="";
		return true;
	}
}
 
function passwordVerify(){
 
	if(clave1.value != ""){
		clave1.style.border = "1px solid #5e6e66";
		error_pass1.innerHTML ="";
		return true;
	}
}

He probado con dos expresiones regulares distintas para el correo electrónico, y ninguna de las dos me valida el correo, es decir que un correo tal que [email protected] me lo da por incorrecto.
Y con la contraseña pasa más de lo mismo.
Os escribo a ver si me podéis echar un cable con eso, llevo días escarbando por internet en busca de respuestas, y quizás es una tontería que no estoy viendo.
Muchas gracias por adelantado.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 13
Ha disminuido su posición en 46 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validación de correo y contraseñas con expresiones regulares

Publicado por Alejandro (4 intervenciones) el 05/06/2020 03:12:40
Podéis probar un input de type="email" de HTML5 creo que te puede servir para lo que buscas y te ahorraría un poco de código ¿no?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de moises
Val: 47
Ha disminuido su posición en 12 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validación de correo y contraseñas con expresiones regulares

Publicado por moises (19 intervenciones) el 05/06/2020 14:49:13
Concuerdo con alejandro, utiliza HTML5, es ya automatico,
1
<input type:"email" required>
eso te dara una validacion
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 18
Ha disminuido su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validación de correo y contraseñas con expresiones regulares

Publicado por raquel (12 intervenciones) el 13/06/2020 20:52:35
gracias chicos, al final lo saqué con expresiones regulares, me costó pero lo prefiero, es más seguro, con la validacion en el html es muy fácil de hackear :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validación de correo y contraseñas con expresiones regulares

Publicado por Robokick (10 intervenciones) el 30/07/2021 03:33:23
Hola Raquel podrías enseñarme como usaste las expresiones regulares con javascript

Yo quiero hacer que si ingreso un nombre en un textbox solo permita ingresar letras y no @%! etc solo letras
Te agradecería si me puedes enseñar
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar