jump to navigation

Validar números de tarjetas de crédito con JavaScript Marzo 7, 2008

Publicado por lineadecodigo en : JavaScript , trackback

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.

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. if (!mastercard.match(/^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/))
  5.   mastercard_error = "No es un número de Visa correcto";

Vía: anieto2K

Articulos Similares:

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre JavaScript

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 60092 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (9 votos, media: 3.44 de 5)
Loading ... Loading ...

Comentarios

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