Recurly.js validate 5大校验技巧：在浏览器端拦截无效卡号

Recurly.js validate 5大校验技巧：在浏览器端拦截无效卡号

【免费下载链接】recurly-jsSimple subscription billing in the browser项目地址: https://gitcode.com/gh_mirrors/re/recurly-js

Recurly.js是一款在浏览器端完成订阅支付卡信息校验与令牌化的开源 JS 库（Simple subscription billing in the browser）。它内置的Recurly.validate模块提供卡号、卡品牌、有效期、CVV 四大校验方法，让你在用户输入的瞬间就能拦截无效卡号，避免把脏数据提交到服务端。💳

下面 5 个技巧全部来自库源码 validate.js，零依赖、可直接复制使用。

技巧一：用 cardNumber() 做 Luhn 实时校验

这是最核心的卡号校验方法：先做长度检查（12~19 位），再执行Luhn 算法（模 10 校验和），双保险过滤掉绝大多数手输错误和无效卡号。

recurly.validate.cardNumber('4111111111111111'); // true recurly.validate.cardNumber('4111111111111112'); // false（Luhn 失败）

在卡号输入框的input事件里调用它，即可做到"边输边验"。实现细节见 validate.js#L82-L96。

技巧二：用 cardType() 在输入中识别卡品牌

用户只需输入前 6 位，就能预判卡品牌（visa、master、american_express、jcb、union_pay、elo、maestro 等十余种）。第二个参数传true开启部分号码识别：

recurly.validate.cardType('411111', true); // 'visa' recurly.validate.cardType('3725', true); // 'american_express'

典型用途：根据卡品牌动态调整 CVV 位数提示、展示对应卡 logo。品牌判定依据的是 BIN 号段与长度规则表，数据文件在 credit-card-types.json，测试用例可参考 validate.test.js。

技巧三：用 expiry() 拦截过期卡

expiry(month, year)同时校验月份合法性（1~12）和"未过期"（到期月最后一天仍晚于今天），年份支持 2 位或 4 位写法：

recurly.validate.expiry(10, 2028); // true recurly.validate.expiry(1, 2019); // false，已过期

⚠️ 注意：有效期校验需要月份和年份同时存在时才会生效，建议用户填完月份就联动校验。

技巧四：用 cvv() 校验 3/4 位安全码

CVV 只校验"是否为 3 或 4 位纯数字"，实现见 validate.js#L196-L200：

recurly.validate.cvv('123'); // true recurly.validate.cvv('1234'); // true（Amex 为 4 位） recurly.validate.cvv('12'); // false

技巧五：让 token() 自动完成全套校验

前四个方法用于"输入时"的即时提示；而提交阶段，recurly.token()会自动调用 validateCardInputs做最后一道关卡——卡号、有效期、CVV 逐个检查，并根据recurly.config.required配置检查必填字段（姓名、账单地址等）。校验失败时返回结构化的validation错误：

recurly.token(cardData, (err, token) => { if (err && err.code === 'validation') { err.details.forEach(e => markField(e.field, e.messages[0])); } });

三类错误信息一览：

错误对象形如{ field, messages: [...] }，可直接按field名映射回表单控件（格式函数见 validate.js#L299-L301）。

小结

• 输入时：cardNumber()/cardType()/expiry()/cvv()四方法组合，实现秒级反馈 ✨
• 提交时：token()自动兜底校验 +config.required自定义必填项
• 四个方法均为纯函数、无副作用，TypeScript 类型声明见 validate.d.ts，方便在 TS 项目中直接引用

掌握这 5 个技巧，你的支付表单就能在浏览器端拦截绝大部分无效卡号，降低服务端错误率、提升支付成功率。

【免费下载链接】recurly-jsSimple subscription billing in the browser项目地址: https://gitcode.com/gh_mirrors/re/recurly-js