Validar Formularios con JavaScript y expresiones regulares: Validación de URL.

Validar URL JavaScript

La forma más fácil para validar una dirección URL con JavaScript dentro de un formulario, es usar expresiones regulares, he creado una pequeña función bastante útil que es capaz de validar incluso formatos raros de URL (por ejemplo: http://dominio.com:445/)

La función que contiene la expresión regular es la siguiente:

function ValidaURL(url) {
var regex=/^(ht|f)tps?:\/\/\w+([\.\-\w]+)?\.[a-z]{2,10}(:\d{2,5})?(\/.*)?$/i;
return regex.test(url);
}

Ejemplo de formulario con la función que valida la URL integrada:

Actualización 25-Oct-2016: La expresión regular es válida/compatible con Expresiones Regulares de PERL y con la función preg_match() de PHP.
Nota 1: Puedes copiar este código en el bloc de notas y guardar con extensión HTML para verlo en acción.
Nota 2: Se debe reaamplazar campo_a_validar por el nombre real del campo que contendrá la URL que deseas validar en tu formulario.

<script type="text/javascript"><!--
function ValidaURL(url) {
var regex=/^(ht|f)tps?:\/\/\w+([\.\-\w]+)?\.[a-z]{2,10}(:\d{2,5})?(\/.*)?$/i
return regex.test(url);
}
//Validar del campo de formulario de URL
function validar(f)  {
if(!ValidaURL(f.campo_a_validar.value) ){
alert("La dirección URL es incorrecta");
f.campo_a_validar.focus();
return (false);
}
}
// --></script>
Formulario de ejemplo:
<form method="post" action="" onsubmit="return validar(this)">
<div>Dirección URL: <input type="text" name="campo_a_validar" value="" /><br />
<input type="submit" value="Validar URL" /></div>
</form>

Eso es todo, si tienen dudas pueden dejar una respuesta y con gusto trataré de resolverla.

Saludos desde México, DASUMO.

  1. Crear ventanas con JavaScript usando el objeto Window
  2. Validar Email con JavaScript usando Expresiones Regulares
  3. JavaSript: Usar target _blank en XHTML 1.0 Strict y XHTML 1.1
Escrito en: Webmaster
15 CommentsLeave a comment
  • ¿Por que eliminaste travel?
    ¿Podrias explicar cada sección de la expresion regular?
    De antemano gracias

    • Eduardo, respondo tus 2 preguntas aquí:

      1- La "/i" indica a la expresión regular que NO ES SENSIBLE a mayúsculas o minúsculas, por lo tanto algo.com y ALGO.COM son válidos.
      2- Eliminé TRAVEL debido a la gran cantidad de extensiones de dominio nuevas, las he visto de hasta 10 caracteres y listarlas una por una sería interminable.

  • ¿Por que termina con i?
    Creí que las expresiones regulares terminaban con $/

    De antemano gracias

  • hola, intente poner la funcion en un archivo externo y no funciona

    • Hola, revisa que hayas copiado la función completa, y debes llamar a la función del archivo externo dentro del formulario donde deseas implementarla, debería funcionar.

  • hola intente poner la funcion en un archivo externo js y no funciona

  • no no ya esta listo amigo funciona muy bien era un simple error que no modifique la segunda variable campo_a_validar ise la primera y no la segunda disculpa el mal comentario

  • `hey hermano una dudita tengo un formulario que envia unos datos a la base de datos y este no valida osea si muestra el cartel de validacion y demas pero aun asi envia las variables del formulario a la base de datos

  • Bourorilt says:

    SKG Hosting provide low cost high value UK hosting solutions. With Free Domain Names, free WHMCS, ClientExec, Shared Hosting and much more.

  • Hola
    gracias por los tutoriales son muy buenos,
    podrias por favor explicar la expresion de validacion

  • Hola dasumo, genial gracias por la ayuda me sirvio mucho para mi proyecto de la escuela.

  • Problemas:
    1- no valida si escribiste la URL con mayúsculas
    2- no valida dominios que tengan guión medio como www.collado-consultores.com.ar

    • Hola flavia, muchas gracias por tus observaciones…

      Sí, tomaba como inválidas las URL con GUION en dominios de segundo nivel, por ejemplo .com.mx o .com.ar, hice un pequeño cambio a la expresión regular para solucionar ambos problemas, y queda así:

      /^(ht|f)tps?:\/\/\w+([\.\-\w]+)?\.([a-z]{2,3}|info|mobi|aero|asia|name)(:\d{2,5})?(\/)?((\/).+)?$/i;

  • Gracias Dasumo, la expresion regular funciona de lujo, slds

  • Muy buena entrada! existe un framework llamado JSValidate que te permite validar formularios en JavaScript http://programandoideas.com/2010/02/jsvalidate-framework-para-validar-formularios-en-javascript/ Yo lo uso y es muy bueno 🙂

    Saludos

Leave a comment

 

     


Subir