实现 Luhn 工具

分类：developer ｜ 标签：Luhn、卡号、校验 校验/生成符合 Luhn 的卡号

2.1 功能说明

校验/生成符合 Luhn 的卡号

2.1.1 使用指南

功能说明

按 Luhn 算法校验银行卡/信用卡号是否合法，并可生成符合 Luhn 的测试卡号。仅校验格式，不验证真实账户。

使用场景

支付表单前端校验、生成测试卡号。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• luhnValid()
• brand()
• check()
• gen()
• clear()
• copy()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const num = ref('')
const result = ref(null)
const genOut = ref('')

function luhnValid(digits) {
  let sum = 0, alt = false
  for (let i = digits.length - 1; i >= 0; i--) {
    let d = digits.charCodeAt(i) - 48
    if (alt) { d *= 2; if (d > 9) d -= 9 }
    sum += d
    alt = !alt
  }
  return sum % 10 === 0
}
function brand(p) {
  if (/^4/.test(p)) return 'Visa'
  if (/^5[1-5]/.test(p) || /^2[2-7]/.test(p)) return 'MasterCard'
  if (/^3[47]/.test(p)) return 'Amex'
  if (/^62/.test(p)) return 'UnionPay'
  return ''
}

function check() {
  result.value = null
  genOut.value = ''
  const p = num.value.replace(/\D/g, '')
  if (!p) { result.value = { ok: false }; return }
  result.value = { ok: luhnValid(p), brand: brand(p) }
}
function gen() {
  result.value = null
  let body = ''
  for (let i = 0; i < 15; i++) body += Math.floor(Math.random() * 10)
  let sum = 0, alt = true
  for (let i = body.length - 1; i >= 0; i--) {
    let d = body.charCodeAt(i) - 48
    if (alt) { d *= 2; if (d > 9) d -= 9 }
    sum += d
    alt = !alt
  }
  const checkDigit = (10 - (sum % 10)) % 10
  genOut.value = body + checkDigit
}
function clear() { num.value = result.value = genOut.value = '' }
function copy() { if (genOut.value) navigator.clipboard?.writeText(genOut.value) }

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/luhn