« anterior próximo »
Páginas: [1]

Autor Tema: JavaScript expresiones regulares Paréntesis encontrar patrones cadenas CU01155E  (Leído 4107 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
JavaScript expresiones regulares Paréntesis encontrar patrones cadenas CU01155E
« en: 21 de Febrero 2016, 22:16 »
A continuación colgaré la solución del ejercicio CU01155E del curso JavaScript desde cero.

Antes de proceder quiero decir que dicho ejercicio coincide con el ejercicio de la entrega CU01142E del mismo curso. Supongo que nos hacen hacer de nuevo el ejercicio porque ahora sabemos más métodos de JavaScript.

Citar
EJERCICIO

Crea un documento HTML (página web) donde exista un formulario que se envíe por el método GET. Se pedirá al usuario que introduzca nombre, apellidos y correo electrónico. Define dentro de la etiqueta form que cuando se produzca el evento onsubmit (pulsación del botón de envío del formulario) se ejecute una función a la que denominaremos validacionConExpReg que no recibe parámetros.

La función validar debe realizar estas tareas y comprobaciones utilizando expresiones regulares:

a) Comprobar que el nombre contiene al menos tres letras. Si no es así, debe aparecer un mensaje por pantalla indicando que el texto no cumple tener al menos tres letras. Por ejemplo si se trata de enviar Ka como nombre debe aparecer el mensaje: “El nombre no cumple tener al menos tres letras”.

b) Comprobar que el correo electrónico contiene el carácter @ (arroba) y el carácter . (punto). De no ser así, deberá aparecer un mensaje indicando que al correo electrónico le falta uno o ambos caracteres. Por ejemplo si se trata de enviar pacogmail.com deberá aparecer el mensaje: “Falta el símbolo @ en el correo electrónico”.

c) Antes de enviarse los datos del formulario a la página de destino, todas las letras del correo electrónico deben transformarse a minúsculas. Por ejemplo si se ha escrito PACO@GMAIL.COM debe enviarse paco@gmail.com

d) Antes de enviarse los datos del formulario a la página de destino, si el correo electrónico contiene la subcadena “ at “ debe reemplazarse por el símbolo @. Por ejemplo si se ha escrito paco at gmail.com debe enviarse paco@gmail.com


Y el código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Curso JavaScript"/>
<meta name="keywords" content="programar,cursos,JavaScript,aprenderaprogramar.com"/>
<link rel="stylesheet" type="text/css" href="CU01142E.css"/>
<script type="text/javascript">

function validar(){
var nodoNombre = document.getElementById('nombre').value;
var nodoApellido = document.getElementById('apellidos').value;
var nodoCorreo = document.getElementById('email').value;
var pattern1 = /\w{3}/;
var pattern2 = /[@]/;
var pattern3 = /[.]/;

if(nodoNombre.match(pattern1) == null){
alert('El nombre no cumple tener al menos tres letras');
}

if(nodoCorreo.match(pattern2) == null && nodoCorreo.match(pattern3) == null){
alert('Faltan los símbolos @ y . en el correo electrónico');
}else if(nodoCorreo.match(pattern3) == null){
alert('Falta el símbolo . en el correo electrónico');
}else if( nodoCorreo.match(pattern2) == null){
alert('Falta el símbolo @ en el correo electrónico');
}

nodoCorreo = nodoCorreo.replace(/at/g,'@');
nodoCorreo = nodoCorreo.toLowerCase();
alert(nodoCorreo);

}

</script>
</head>
<body>
<div id="contenedor">
<form name="formulario1" method="get" onsubmit="validar()">
<h2>Formulario ejemplo cadenas Texto</h2>
<label for="nombre"><span>Nombre:</span><input type="text" id="nombre" name="nombre"></input></label>
<label for="apellidos"><span></span>Apellidos:<input type="text" id="apellidos" name="apellidos"></input></label>
<label for="email"><span>Correo Electrónico:</span><input type="text" id="email" name="email"></input></label>
<label><input type="submit" value="Enviar"></input><input type="reset" value="Cancelar"></input></label>
</form>
</div>

</body>
</html>

Os dejo también el enlace de la solución del ejercicio CU01142E del mismo curso:

https://www.aprenderaprogramar.com/foros/index.php?topic=3935.msg16672#msg16672

Gracias
« Última modificación: 26 de Febrero 2016, 09:54 por César Krall »
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CU01155E JavaScript Paréntesis en expresiones regulares
« Respuesta #1 en: 24 de Febrero 2016, 00:10 »
Hola dimiste.

Si introduzco un correo electrónico, como 'patata@.com', el formulario acaba mandando 'p@@a@.com', así que toca corregir.

Por otro lado, seria bueno que empezases a separar el código, usando más funciones. Y que cada función tenga un cometido. Esto ultimo, solo es un consejo. ;)

Saludos.
En línea

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:CU01155E JavaScript Paréntesis en expresiones regulares
« Respuesta #2 en: 25 de Febrero 2016, 10:06 »
Hola! Los ejercicios de cada entrega van destinados a practicar los conceptos explicados. Por tanto en la entrega CU01142E la idea es usar funciones para cadenas, y en la entrega CU01155E la idea es usar expresiones regulares.

Saludos!
En línea
Responsable de departamento de producción aprenderaprogramar.com

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Re:CU01155E JavaScript Paréntesis en expresiones regulares
« Respuesta #3 en: 25 de Febrero 2016, 14:31 »
Buenas.

Referente a César Krall, pensé justamente lo que dices, por eso comenté que cada ejercicio tenía un cometido distinto.

Referente al Pedro: pues sí, ya toca hacer los código un poquito mejores y con más nivel, jeje. Voy a ello :)

Saludos.
En línea

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Re:CU01155E JavaScript Paréntesis en expresiones regulares
« Respuesta #4 en: 25 de Febrero 2016, 14:40 »
Pedro, creo que al quitarle "/g" sólo hara el cambio en la primera coincidencia de "at" y no en todas.
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CU01155E JavaScript Paréntesis en expresiones regulares
« Respuesta #5 en: 25 de Febrero 2016, 18:41 »
Aun así seguiría haciendolo mal.

'patata@gmail.com' devolvería 'p@ata@gmail.com'

Según el enunciado, lo que tiene que evaluar la expresión es que en 'paco at gmail.com' contiene ' at '. Espacio en blanco at espacio en blanco.

Saludos.
En línea

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Re:JavaScript expresiones regulares Paréntesis encontrar patrones cadenas CU01155E
« Respuesta #6 en: 26 de Febrero 2016, 15:10 »
Buenas, Pedro.

Pues entonces haría esto:

Código: [Seleccionar]
if(nodoCorreo.match(pattern2) == null){
nodoCorreo = nodoCorreo.replace(/at/,'@');
};
nodoCorreo = nodoCorreo.toLowerCase();
nodoCorreo = nodoCorreo.replace(/\s/g,'');
Es decir, el codigo quedaría asi:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Curso JavaScript"/>
<meta name="keywords" content="programar,cursos,JavaScript,aprenderaprogramar.com"/>
<link rel="stylesheet" type="text/css" href="CU01142E.css"/>
<script type="text/javascript">

function validar(){
var nodoNombre = document.getElementById('nombre').value;
var nodoApellido = document.getElementById('apellidos').value;
var nodoCorreo = document.getElementById('email').value;
var pattern1 = /\w{3}/;
var pattern2 = /[@]/;
var pattern3 = /[.]/;

if(nodoNombre.match(pattern1) == null){
alert('El nombre no cumple tener al menos tres letras');
}

if(nodoCorreo.match(pattern2) == null && nodoCorreo.match(pattern3) == null){
alert('Faltan los símbolos @ y . en el correo electrónico');
}else if(nodoCorreo.match(pattern3) == null){
alert('Falta el símbolo . en el correo electrónico');
}else if( nodoCorreo.match(pattern2) == null){
alert('Falta el símbolo @ en el correo electrónico');
}

if(nodoCorreo.match(pattern2) == null){
nodoCorreo = nodoCorreo.replace(/at/,'@');
};
nodoCorreo = nodoCorreo.toLowerCase();
nodoCorreo = nodoCorreo.replace(/\s/g,'');
alert(nodoCorreo);

}

</script>
</head>
<body>
<div id="contenedor">
<form name="formulario1" method="get" onsubmit="validar()">
<h2>Formulario ejemplo cadenas Texto</h2>
<label for="nombre"><span>Nombre:</span><input type="text" id="nombre" name="nombre"></input></label>
<label for="apellidos"><span></span>Apellidos:<input type="text" id="apellidos" name="apellidos"></input></label>
<label for="email"><span>Correo Electrónico:</span><input type="text" id="email" name="email"></input></label>
<label><input type="submit" value="Enviar"></input><input type="reset" value="Cancelar"></input></label>
</form>
</div>

</body>
</html>
Te podría pedir que, utilizando este mismo código, me enseñaras cómo podrías dividirlo en varias funciones y cada una de ellas que tuviera diferentes cometidos.

Gracias :)
En línea

mouportador10

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Re:JavaScript expresiones regulares Paréntesis encontrar patrones cadenas CU01155E
« Respuesta #7 en: 08 de Febrero 2017, 05:25 »
Hola este es mi codigo, me cuesta mucho entender los patrones pero ayudandome de los demas se pide lo que quiere, gracias.
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>validacion Regex</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
*{margin: 0; padding: 0;}
form{width: 500px;}
label, input, button {
display:  block; padding: 5px; width: 100%; margin: 5px auto;}
span{display: none; color: red; background-color: lightyellow;}
</style>
<script type="text/javascript">
function validar(){
var patronNombre = new RegExp("[a-zA-Z]{3,}");
var patronCorreo = /\w+@{1}\w+\.{1}\w+/
var nodosInput = document.getElementsByTagName("input");
var enviar = true;
var msg = document.getElementsByTagName("span");

var nombre = nodosInput[0].value;
if (!patronNombre.test(nombre)) {
msg[0].textContent = "El nombre no cumple con tener al menos 3 letras";
msg[0].style.display = "block";
enviar = false;
}
else {
msg[0].style.display = "none";
}
var patronAT = /\sat\s/g;
nodosInput[2].value = nodosInput[2].value.replace(patronAT, '@');

if (!patronCorreo.test(nodosInput[2].value)) {
msg[2].textContent = "El formato de correo es incorrecto falta @ ó .";
msg[2].style.display = "block";
enviar = false;
}
else {
msg[2].style.display = "none";
}
nodosInput[2].value = nodosInput[2].value.toLowerCase();

return enviar;
}

</script>
<body>
</head>
<div>
<form method="GET" action="#" name="miformulario" onsubmit="return validar()" >
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" placeholder="Introducir Nombre" />
<span class="msg"></span>
<label for="apellidos">Apellidos:</label>
<input type="text" name="apellidos" id="apellidos" placeholder="Introducir Apellidos" />
<span class="msg"></span>
<label for="correo">Correo Electrónico:</label>
<input type="text" name="email" id="correo" placeholder="Introducir Correo Electrónico" />
<span class="msg"></span>
<button name="enviar" value="enviar" type="submit">Enviar</button>
</form>
</div>
</body>
</html>
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".