feed twitter facebook LinkedIn facebook

JavaScript » Validar números de tarjetas de crédito con JavaScript

marzo 7, 2008 por Víctor Cuervo 6 Comentarios Imprimir Imprimir

Hace ya bastante tiempo leí en anieto2K un pequeño, pero a la vez interesante artículo sobre como validar números de tarjetas de crédito con JavaScript mediante unas sencillas expresiones regulares en JavaScript. La idea es validar una tarjeta de crédito Visa y una tarjeta de crédito MasterCard. En nuestro caso vamos a ver el código completo del ejemplo.

Lo primero que tenemos que saber es el formato de los números de estas tarjetas de crédito, para poder montar las expresiones regulares que lo validen.

  • Visa, son 4 grupos de 4 dígitos cada uno. Además el primer número de la tarjeta tiene que empezar por 4. Un total de 16 dígitos. Un ejemplo de número de una tarjeta Visa sería el siguiente: 4552 7204 1234 5678.
  • Mastercard, de igual manera son 4 grupos de 4 dígitos cada uno. Pero en este caso los dos primeros dígitos van del 51 al 55. Un total de 16 dígitos. Un ejemplo sería 5588 3201 2345 6789.

Ahora construyamos las expresiones regulares. Lo primero que tenemos que saber es que una expresión regular comienza con /^ y termina con $/. Entre estos caracteres estará la expresión regular.

  1. /^ expresion regular $/

Como vamos a manejar dígitos tenemos que saber que el dígito lo representa el carácter d. Así:

  1. /^dd$/

sería una expresión regular que validase dos dígitos seguidos. Pero como no es plan de poner una ristra de caracteres d hasta llegar a 16 podemos utilizar la cardinalidad, es decir, el número de veces que se repite un dígito. Para ello utilizamos la siguiente expresión :

  1. {cardinalidad}

Así los dos dígitos quedarían de la siguiente forma:

  1. /^d{2}$/

Alguna cosa más que tenemos que saber es que si queremos que en una posición vaya un número específico valdría con poner el número y de igual forma podemos expresar rangos mediante corchetes y el rango en concreto.

  1. [rango]

Así, si queremos hacer referencia a los números entre el 500 y el 509 podríamos tener la siguiente expresión regular:

  1. /^50[1-9]$/

Por último, si queremos hacer referencia a que un número o carácter aparezca o no, es decir, la opcionalidad. Utilizamos el símbolo de cierre de interrogación (?). Esto nos servirá para hacer referencia que entre los grupos de dígitos de 4 de las tarjetas pueda venir un guión o no.

Finalmente las expresiones regulares de Visa y Mastercard serian las siguientes

  1. /^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/ //Visa
  2. /^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/ //Mastercard

Para validar si una cadena se ajusta a una expresión regular tenemos varios métodos. En nuestro caso utilizamos match. Este método le aplicamos directamente sobre la cadena

  1. umer.match(/^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/)

Esto nos devolverá un valor booleano. Es por ello que simplemente tendremos que comprobar el valor retornado:

  1. if (!visa.match(/^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/))
  2. visa_error = "No es un número de Visa correcto";
  3.  
  4.  
  5. if (!mastercard.match(/^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/))
  6. mastercard_error = "No es un número de Visa correcto";

Vía: anieto2K

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre JavaScript
Foro sobre JavaScript
tags:

Artículos relacionados:

TrackBack URI

  1. shadow
    marzo 13, 2008 #

    hola… me gustaria saber como puedo poner una restrigcion que me diga que es numero y ademas que es decimal… GRACIAS…

  2. Astua
    abril 1, 2008 #

    No lei mucho el codigo pero por lo que veo no validas si las tarjetas
    cumplen con el algoritmo Mod10, por lo tanto solo te validaria si cumplen con el largo y si son numeros, espero no equivocarme.

    Gracias…

  3. najim
    mayo 22, 2009 #

    yo la verdad no me he enterao de nada aver si me lo esplicas mas claro

  4. oscar
    julio 14, 2009 #

    Disculpa pero modifique tu codigo para implementarlo, el problema es que no corre en la porquería de IE, ya se que es una cochinada pero aqui no corre incluso usando el original como aqui dices.
    ya lo proble en firefox y en chrome y si corre.

  5. oscar
    julio 15, 2009 #

    SOLUCIONADO IE

    Validar numero de tarjeta

    function validarTarjetas(){

    visa = document.getElementById(“visa”).value;
    mastercard = document.getElementById(“mastercard”).value;

    if ((document.Form1.visa.value == “”) || (document.Form1.visa.value== null)) {
    document.getElementById(“visa_error”).innerHTML = “”;
    document.getElementById(“visa_paso”).innerHTML = “”;
    }else{
    if (!visa.match(/^4\d{3}?\d{4}?\d{4}?\d{4}$/)){
    document.getElementById(“visa_error”).innerHTML = “No es un número de Visa correcto”;
    document.getElementById(“visa_paso”).innerHTML = “”;}
    else{
    document.getElementById(“visa_paso”).innerHTML = “Número de Visa correcto”;
    document.getElementById(“visa_error”).innerHTML = “”;
    }}

    if ((document.Form1.mastercard.value == “”) || (document.Form1.mastercard.value== null)) {
    document.getElementById(“mastercard_error”).innerHTML = “”;
    document.getElementById(“mastercard_paso”).innerHTML = “”;
    }else{
    if (!mastercard.match(/^5[1-5]\d{2}?\d{4}?\d{4}?\d{4}$/)){
    document.getElementById(“mastercard_error”).innerHTML = “No es un número de MasterCard correcto”;
    document.getElementById(“mastercard_paso”).innerHTML = “”;}
    else{
    document.getElementById(“mastercard_paso”).innerHTML = “Número de MasterCard correcto”;
    document.getElementById(“mastercard_error”).innerHTML = “”;
    }}

    }

    Validar Numero de tarjeta

    VISA:
    MasterCard:
    Utilizar guiones para separar los numeros. No se permiten espacios.

    gemral_cracken@yahoo.com.mx | obdc.com.mx

    Artículo disponible en: http://lineadecodigo.com/2008/03/07/validar-numeros-de-tarjetas-de-credito-con-javascript/
    lineadecodigo.com

  6. lara
    diciembre 23, 2009 #

    gracias por todo lo que estan haciendo
    los felicito a todos