Autor Tema: JavaScript usar expresiones regulares para validar formulario HTML CU01155E (Leído 2131 veces)

Pepote21 · « **en:** 09 de Junio 2017, 14:26 »

Hola a todos. Os paso mi código del ejercicio CU01155E del tutorial de fundamentos de desarrollo web con JavaScript usando Notepad++ como editor.

Gracias. Un saludo.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <style type="text/css">
            body {background-color:pink; font-family: sans-serif;}
            label {color: maroon; display:block; padding:5px;}
        </style>
        <script type="text/javascript"> 
            var contador=0;		
            function validacionConExpReg(){
			    var nodoNombre=document.getElementById('nombre');
				var nodoApellidos=document.getElementById('apellidos');
				var nodoEmail=document.getElementById('email');
				comprobarNombre(nodoNombre.value);
				//comprobarApellidos(nodoApellidos.value);
				transformarEmailAMinusculas(nodoEmail.value);
				transformarAtEnEmail(nodoEmail.value);
				comprobarEmail(nodoEmail.value);
				
			    //document.getElementById('email').value=email;
            }
            function comprobarNombre(nombre){
			    var regexp=/^[A-Za-z]{3,}$/;
				if(!regexp.test(nombre)){
					alert('Nombre no válido, vuelva a introducirlo');
				}else{contador++;} 
			}
			function comprobarApellidos(apellidos){
			    var regexp=/^(\w+)\s(\w+)$/;
				if(!regexp.test(apellidos)){
					alert('Apellidos no válidos, vuelva a introducirlos');
				}else{contador++;} 
			}
            function transformarEmailAMinusculas(email){
			    return email.toLowerCase();
			}
			function rectificarAtEnEmail(email){
                return email.replace(/at/g,'@');
            }			
            function comprobarEmail(email){ 
			    var regExp1= /[@]/;
                var regExp2= /[\.]/;
				if(!regExp1.test(email) || !regExp2.test(email)){
					if(!regExp1.test(email) && !regExp2.test(email)){
						alert('Faltan los símbolos @ y . en el correo electrónico');
					}else if(!regExp1.test(email) && regExp2.test(email)){
						alert('Falta el símbolo @ en el correo electrónico');
					}else{
						alert('Falta el símbolo . en el correo electrónico');
					}
				}
			}
            			
        </script>
    </head>
    <body>
	    <script type="text/javascript">    
           
        </script> 
       		<div style="width:450px;">
            <form name ="formularioContacto" class="formularioTipo1" method="get"  onsubmit="validacionConExpReg()">
                <p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>
                <label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" placeholder="Introduzca su nombre" size="60"/></label>
                <label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" placeholder="Introduzca sus apellidos" size="60"/></label>
                <label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" placeholder="Introduzca su correo electrónico" size="60px"/></label>
                <label>
				    <input type="submit" value="Enviar" >
                    <input type="reset" value="Cancelar">
                </label>
            </form>
        </div>
    </body>
</html>

Ogramar · « **Respuesta #1 en:** 25 de Junio 2017, 20:53 »

Buenas Pepote21

En el formulario parece que no tienes definido un action, creo que sería preferible definir un action pudedes ponerle simplemente como página de destino http://aprenderaprogramar.com, de esa manera quedaría más claro si el formulario se envía o no

Si introduzco como nombre aaa, como apellidos bbb y como correo electrónico ccc no me aparece ningún mensaje, lo cual no es correcto

Deberías revisar este ejercicio

Nota: me está apareciendo el mensaje de error <<ReferenceError: transformarAtEnEmail is not defined>>

Salu2

Pepote21 · « **Respuesta #2 en:** 26 de Junio 2017, 16:15 »

Hola Ogramar.
Sí había errores en el ejercicio, especialmente el no establecer las variables en los métodos debido al return.
Adjunto el ejercicio corregido y comprobado diversas veces. Creo que para este ejercicio no se pedía la validación antes de enviar, sino solo la comprobación.
Solo decir aparte que la propiedad value en el correo electrónico la he tenido que quitar de los métodos, como se puede ver, ya que no me funcionaba para el segundo método (at) y ponerla en la iniciación y declaración del método. Supongo que todo correcto.
Gracias por todo.
Un saludo.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <style type="text/css">
            body {background-color:pink; font-family: sans-serif;}
            label {color: maroon; display:block; padding:5px;}
        </style>
        <script type="text/javascript">
            var contador=0;		
            function validacionConExpReg(){
			    var nodoNombre=document.getElementById('nombre');
				var nodoApellidos=document.getElementById('apellidos');
				var nodoEmail=document.getElementById('email').value;
				comprobarNombre(nodoNombre.value);
				//comprobarApellidos(nodoApellidos.value);
				nodoEmail=transformarEmailAMinusculas(nodoEmail);
				nodoEmail=rectificarAtEnEmail(nodoEmail);
				comprobarEmail(nodoEmail);
            }
            function comprobarNombre(nombre){
			    var regexp=/^[A-Za-z]{3,}$/;
				if(!regexp.test(nombre)){
					alert('Nombre no válido, vuelva a introducirlo');
				}else{contador++;}
			}
			function comprobarApellidos(apellidos){
			    var regexp=/^(\w+)\s(\w+)$/;
				if(!regexp.test(apellidos)){
					alert('Apellidos no válidos, vuelva a introducirlos');
				}else{contador++;}
			}
            function transformarEmailAMinusculas(email){
			    return email.toLowerCase();
			}
			function rectificarAtEnEmail(email){
                return email.replace(/at/g,'@');
            }			
            function comprobarEmail(email){
			    var regExp1= /[@]/;
                var regExp2= /[\.]/;
				if(!regExp1.test(email) || !regExp2.test(email)){
					if(!regExp1.test(email) && !regExp2.test(email)){
						alert('Faltan los símbolos @ y . en el correo electrónico');
					}else if(!regExp1.test(email) && regExp2.test(email)){
						alert('Falta el símbolo @ en el correo electrónico');
					}else{
						alert('Falta el símbolo . en el correo electrónico');
					}
				}
			}
            			
        </script>
    </head>
    <body>
	    <script type="text/javascript">   
           
        </script>
       		<div style="width:450px;">
            <form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com" onsubmit="validacionConExpReg()">
                <p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>
                <label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" placeholder="Introduzca su nombre" size="60"/></label>
                <label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" placeholder="Introduzca sus apellidos" size="60"/></label>
                <label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" placeholder="Introduzca su correo electrónico" size="60px"/></label>
                <label>
				    <input type="submit" value="Enviar" >
                    <input type="reset" value="Cancelar">
                </label>
            </form>
        </div>
    </body>
</html>

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: