BizBankCardInput 银行卡号输入

银行卡号录入：仅数字、按 4 位（可配）分组展示；位数区间（默认 13~19，ISO/IEC 7812）与 Luhn 模 10 校验位校验，失焦后展示位数与结论。财务打款、工资卡绑定、退款账户确认等金融录入场景。发卡行识别等增强由业务侧基于 BIN 数据自行扩展（组件不内置）。

基础用法

18 位6222 0212 3456 7890 12

输入过程中自动过滤非数字、按 4 位分组；失焦后展示位数与校验结论，改动末位即可看到 Luhn 校验失败提示。

v-model 收发纯数字卡号，界面分组展示；失焦后显示位数与校验结论。

<script setup lang="ts">
/** 场景：打款账户绑定——卡号 4 位分组展示，位数 + Luhn 模 10 双重校验 */
import { ref } from 'vue'
import { BizBankCardInput } from 'vue3-ep-biz-lib'

const cardNo = ref('622202123456789012')
</script>

<template>
  <div style="max-width: 420px">
    <BizBankCardInput v-model="cardNo" />
    <p style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      输入过程中自动过滤非数字、按 4 位分组；失焦后展示位数与校验结论，改动末位即可看到 Luhn 校验失败提示。
    </p>
  </div>
</template>

显示代码

内部账户卡（关闭 Luhn）

16 位9000 1234 5678 9012

luhn=false：仅校验位数区间（默认 13~19 位），适配无校验位的内部卡体系

预付卡 / 内部账户卡无校验位，luhn=false 仅做位数校验。

<script setup lang="ts">
/** 场景：内部账户卡 / 预付卡——不走银联 BIN 规则，关闭 Luhn 校验仅做位数校验 */
import { ref } from 'vue'
import { ElAlert } from 'element-plus'
import { BizBankCardInput } from 'vue3-ep-biz-lib'

const cardNo = ref('9000123456789012')
</script>

<template>
  <div style="max-width: 420px">
    <BizBankCardInput v-model="cardNo" :luhn="false" placeholder="内部账户卡号" />
    <ElAlert
      style="margin-top: 12px"
      type="info"
      :closable="false"
      show-icon
      title="luhn=false：仅校验位数区间（默认 13~19 位），适配无校验位的内部卡体系"
    />
  </div>
</template>

显示代码

信用卡（16 位收紧）

16 位6222 6001 2345 6788

min/max-length 收紧到 16 位：输 15 位提示不足，超过 16 位自动截断。

min-length / max-length 收紧位数区间，group-size 自定义分组。

<script setup lang="ts">
/** 场景：信用卡录入——16 位卡 + 自定义分组长度 */
import { ref } from 'vue'
import { BizBankCardInput } from 'vue3-ep-biz-lib'

const cardNo = ref('6222600123456788')
</script>

<template>
  <div style="max-width: 420px">
    <BizBankCardInput
      v-model="cardNo"
      :min-length="16"
      :max-length="16"
      :group-size="4"
      placeholder="16 位信用卡号"
    />
    <p style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      min/max-length 收紧到 16 位：输 15 位提示不足，超过 16 位自动截断。
    </p>
  </div>
</template>

显示代码

工资卡批量录入

张三

李四

王五

校验全部通过

多人卡号一次录完，逐行校验状态汇总后提交。

<script setup lang="ts">
/** 场景：工资卡批量录入——多人卡号一次录完，逐行校验状态汇总后提交 */
import { computed, ref } from 'vue'
import { ElButton, ElMessage, ElTag } from 'element-plus'
import { BizBankCardInput } from 'vue3-ep-biz-lib'
import type { BizBankCardInputInstance } from 'vue3-ep-biz-lib'

interface Staff {
  id: number
  name: string
  card: string
  ref?: BizBankCardInputInstance
}

const staff = ref<Staff[]>([
  { id: 1, name: '张三', card: '622202123456789012' },
  { id: 2, name: '李四', card: '6222600123456788' },
  { id: 3, name: '王五', card: '' },
])

const invalidCount = computed(() => staff.value.filter((s) => s.card && s.card.length !== 0 && (s.card.length < 13)).length)

const submit = (): void => {
  const allValid = staff.value.every((s) => !s.card || (s.card.length >= 13 && s.card.length <= 19))
  if (!allValid) {
    ElMessage.warning('存在未通过校验的卡号，请检查标红项')
    return
  }
  ElMessage.success(`已提交 ${staff.value.filter((s) => s.card).length} 人的工资卡`)
}
</script>

<template>
  <div style="max-width: 520px">
    <div v-for="s in staff" :key="s.id" style="display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-start">
      <span style="width: 3em; line-height: 32px; flex: none">{{ s.name }}</span>
      <BizBankCardInput v-model="s.card" :show-info="false" />
    </div>
    <div style="display: flex; gap: 10px; align-items: center">
      <ElButton type="primary" @click="submit">提交工资卡</ElButton>
      <ElTag :type="invalidCount > 0 ? 'danger' : 'success'">
        {{ invalidCount > 0 ? `${invalidCount} 项待修正` : '校验全部通过' }}
      </ElTag>
    </div>
  </div>
</template>

显示代码

退款账户确认（change 日志）

18 位6222 0212 3456 7890 12

修改卡号后这里显示 change 事件携带的校验信息

change 事件携带 BizBankCardInfo（位数 / 分组文本 / 校验结论）。

<script setup lang="ts">
/** 场景：退款账户确认——回显已绑卡 + change 事件日志 */
import { ref } from 'vue'
import { BizBankCardInput } from 'vue3-ep-biz-lib'
import type { BizBankCardInfo } from 'vue3-ep-biz-lib'

const cardNo = ref('622202123456789012')
const logs = ref<string[]>([])

const onChange = (_value: string, info: BizBankCardInfo): void => {
  logs.value.unshift(`change：${info.length} 位 / ${info.valid ? '校验通过' : info.message}`)
}
</script>

<template>
  <div style="max-width: 460px">
    <BizBankCardInput v-model="cardNo" @change="onChange" />
    <div style="margin-top: 10px; font-size: 13px; color: var(--el-text-color-secondary)">
      <div v-for="(log, i) in logs.slice(0, 4)" :key="i">{{ log }}</div>
      <div v-if="logs.length === 0">修改卡号后这里显示 change 事件携带的校验信息</div>
    </div>
  </div>
</template>

显示代码

只读回显

disabled + 关闭信息区，用于审批详情。

<script setup lang="ts">
/** 场景：银行卡信息只读回显——审批详情页 */
import { ref } from 'vue'
import { BizBankCardInput } from 'vue3-ep-biz-lib'

const cardNo = ref('622202123456789012')
</script>

<template>
  <div style="max-width: 420px">
    <BizBankCardInput v-model="cardNo" disabled :show-info="false" :show-error="false" />
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
model-value / v-model	string	''	纯数字卡号（自动过滤非数字）
placeholder	string	'请输入银行卡号'	占位文案
disabled	boolean	false	只读
clearable	boolean	true	可清空
group-size	number	4	分组长度
min-length	number	13	最短位数
max-length	number	19	最长位数（超出自动截断）
luhn	boolean	true	是否启用 Luhn 模 10 校验
show-error	boolean	true	校验失败时展示原因
show-info	boolean	true	展示位数与分组预览

Events

事件名	参数	说明
update:model-value	(value: string)	纯数字卡号更新
change	(value: string, info: BizBankCardInfo)	值变化携带解析结果
blur	(event: FocusEvent)	失焦

Expose

名称	类型	说明
validate	() => BizBankCardInfo	主动校验，返回 { value, formatted, valid, message, length }