Detectar y validar tarjetas de crédito con jQuery

“jQuery Credit Card Validator”, es un plugin jQuery escrito en CoffeeScript que detecta y valida tarjetas de crédito. Le avisa al cliente la tarjeta de crédito detectada y si el número de dígitos y el “algoritmo de Luhn”es válido para ese tipo de tarjeta.

¿Cómo funciona?

Cada vez que escribimos en el input correspondiente, el script chequea con el evento keyup los cambios y llama a la función definida por nosotros. Pasa solamente un parámetro a la función (un objeto con 3 propiedades):

  • card_type — un objeto con las propiedades de abajo o null si el tipo de tarjeta es desconocido:
    • name — nombre de la tarjeta de crédito, por ejemplo visa
    • pattern — regular expression usado para encontrar el tipo de tarjeta, ejemplo /^4/
    • length — un array de la longitud para el tipo de tarjeta, ejemplo [13, 16]
  • length_valid — true si la longitud del número es válido, false en caso contrario
  • luhn_valid — true si el algoritmo de Luhn es correcto, false en caso contrario

¿Cómo usarlo?

Recuerden siempre que para todos los plugins jQuery necesitan tener en su sitio la librería de jQuery que la podemos llamar desde Google Apis o Code jQuery.

INSTALÁNDOLO

Comenzamos por llamar a los scripts dentro de las etiquetas <head> que serán los que nos permitirán que funcione el script “jQuery Credit Card Validator”

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>

A continuación colocamos el script que selecciona el input en donde el usuario debe escribir su tarjeta de crédito

<script type="text/javascript">
$('#cc_number').validateCreditCard(function(result) { alert('CC type: ' + result.card_type + '\nLength validation: ' + result.length_valid + '\nLuhn validation: + result.luhn_valid'); });
</script>

TARJETAS DE CRÉDITO SOPORTADAS

  • Maestro — maestro
  • MasterCard — mastercard
  • Visa — visa
  • Visa Electron — visa_electron
  • American Express — amex
  • Diners Club Carte Blanche — diners_club_carte_blanche
  • Diners Club International — diners_club_international
  • Diners Club United States & Canada — mastercard
  • Discover Card — discover
  • JCB — jcb
  • Laser — laser

DescargaDemo

Modificado por última vez el día 01 de diciembre de 2012 a las 08:30
Scroll to top