Validaciones en JavaScript

Posted by On junio 03, 2016 2 Comments

El otro día un amigo que está comenzando en el mundo de la programación me vino con el problema de las validaciones en JavaScript, y aunque ya hayamos hablado de como hacer validaciones directamente en html5, en PHP, e incluso en AngularJS, creo que puede ser interesante compartir el código que cree para él cuando me hizo la pregunta.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>Validación con expresión regular</title>
<script type="text/javascript">
function literal() { 
  var nombre = document.getElementById("nombre").value;
  var expreg =/^[a-zA-Z]{1,20}$/;
  var resultado = document.getElementById("resultado");
  
  if(expreg.test(nombre))
    resultado.innerHTML = "El nombre es correcto"
  else 
    resultado.innerHTML = "El nombre NO es correcto"
} 
</script>
</head>
<body>

  <form id="miFormulario" action="" method="get">
    Nombre: <input type="text" id="nombre" />
    <input type="button" value="literal" onclick="literal()" /><span id="resultado"></span>
  </form>

</body>
</html>

Lo primero que necesitamos es un formulario donde tengamos un input con el valor de la id que vamos a recoger.

Después un botón que active la función que va a efectuar la acción de validación.

Ahora que ya tenemos todo esto podemos centrarnos en el javascript propiamente dicho:

  • línea 7: recoge el valor del input que queremos validar
  • línea 8: guarda en una variable la expresión regular que tiene que cumplir el input
  • línea 9: preparamos el span donde vamos a mostrar si se cumple o no con la expresión regular
  • línea 11: se utiliza la propiedad test() para la variable donde hemos guardado la expresion regular, pasando como argumento el contenido del input.
    • Si es correcto nos va a mostrar que el contenido del input es correcto, es decir, que cumple con la expresión regular
    • En caso de no cumplir con la expresión regular nos dice que el campo no está relleno de forma correcta

Este tipo de validaciones no tienen más complejidad, aunque se puede hacer que avise si el campo está vacío, tomar diferentes inputs y compararlos de un solo vistazo, utilizar funciones diferentes al onclick()…

A mi parecer lo más complejo de las validaciones en javascript se trata de hacer las expresiones regulares, pero por fortuna tenemos la web html5pattern que nos ayuda muchísimo con ello.