jQuery.payment 信用卡表单处理实战教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00977/article/details/148575871

jQuery.payment 信用卡表单处理实战教程

jquery.payment [DEPRECATED] A general purpose library for building credit card forms, validating inputs and formatting numbers. 项目地址: https://gitcode.com/gh_mirrors/jq/jquery.payment

项目简介

jQuery.payment 是一个专门用于处理信用卡表单的轻量级jQuery插件，它提供了信用卡号码格式化、有效期格式化、CVC码验证等实用功能。这个库最初由Stripe团队开发，旨在简化电商网站中信用卡支付表单的开发工作。

核心功能解析

1. 输入格式化功能

jQuery.payment 提供了三种主要的格式化功能：

信用卡号码格式化：自动将输入的信用卡号码分组显示（如"4242 4242 4242 4242"）
有效期格式化：自动在月份和年份之间添加斜杠（如"12/24"）
CVC码格式化：限制输入长度并根据卡类型验证

2. 验证功能

该插件内置了强大的验证逻辑：

信用卡号码的Luhn算法验证
有效期的月份/年份合法性检查
CVC码长度验证（Visa/MC为3位，Amex为4位）

代码实现详解

基础HTML结构

示例中使用了Bootstrap框架构建响应式表单，包含四个主要输入字段：

信用卡号码输入框（cc-number）
有效期输入框（cc-exp）
CVC安全码输入框（cc-cvc）
纯数字限制输入框（numeric）

JavaScript核心逻辑

jQuery(function($) {
  // 初始化各输入框的格式化功能
  $('[data-numeric]').payment('restrictNumeric');
  $('.cc-number').payment('formatCardNumber');
  $('.cc-exp').payment('formatCardExpiry');
  $('.cc-cvc').payment('formatCardCVC');
  
  // 自定义错误显示方法
  $.fn.toggleInputError = function(erred) {
    this.parent('.form-group').toggleClass('has-error', erred);
    return this;
  };
  
  // 表单提交处理
  $('form').submit(function(e) {
    e.preventDefault();
    
    var cardType = $.payment.cardType($('.cc-number').val());
    
    // 执行各项验证
    $('.cc-number').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));
    $('.cc-exp').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));
    $('.cc-cvc').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));
    
    // 显示卡类型
    $('.cc-brand').text(cardType);
    
    // 更新验证状态显示
    $('.validation').removeClass('text-danger text-success');
    $('.validation').addClass($('.has-error').length ? 'text-danger' : 'text-success');
  });
});

关键方法解析

restrictNumeric() - 限制输入只能为数字
formatCardNumber() - 格式化信用卡号码（自动添加空格分隔）
formatCardExpiry() - 格式化有效期（自动添加斜杠）
formatCardCVC() - 格式化CVC码（限制长度）
validateCardNumber() - 验证信用卡号码有效性
validateCardExpiry() - 验证有效期
validateCardCVC() - 验证CVC码
cardType() - 检测信用卡类型

样式处理技巧

示例中使用了简单的CSS来增强用户体验：

.has-error input {
  border-width: 2px;  /* 错误时加粗边框 */
}

.validation.text-danger:after {
  content: 'Validation failed';  /* 验证失败提示 */
}

.validation.text-success:after {
  content: 'Validation passed';  /* 验证成功提示 */
}