101 lines
4.6 KiB
JSON
101 lines
4.6 KiB
JSON
{
|
||
"slug": "bankcardinput",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生银行卡输入：边输边四位空格，正则认卡组织、Luhn 判合法性后切状态类。",
|
||
"usage": [
|
||
"输入框是 .kole-card-input，带 inputmode=\"numeric\" 与 maxlength=\"23\"（19 位数字加空格），移动端直接弹数字键盘。",
|
||
"格式化在 input 事件里做：先 replace(/\\D/g, \"\") 去非数字、slice(0, 19) 截断，再按 /(.{4})/g 插空格写回 input.value。",
|
||
"卡组织由 detectType 的五个正则判定（^4 Visa、^5[1-5] MasterCard、^62 银联、^3[47] AmEx、^35 JCB），结果写进 .kole-card-type 文本。",
|
||
"识别不出时给 .kole-card-type 补 unknown 类（typeEl.className = \"kole-card-type\" + (t ? \"\" : \" unknown\")），文案变「未知」。",
|
||
"校验态加在外层 .kole-card-field 上（is-valid / is-invalid，聚焦时 is-focus），提示行 .kole-card-tip 同时加 valid 或 invalid 类。",
|
||
"Luhn 只在位数 >= 13 时才判（frameworks/BankCardInput.html:62），位数不够时提示「继续输入卡号…」。"
|
||
],
|
||
"bestPractices": [
|
||
"格式化就地改写 input.value，光标会跳到末尾；要支持中间插删得自己保存并恢复 selectionStart。",
|
||
"detectType 只认前缀，^62 会先于其他规则命中银联，新增卡种时注意正则顺序。",
|
||
"校验结果只驱动类名，提交前仍要服务端复核，前端 Luhn 只挡明显错误。"
|
||
],
|
||
"a11y": [
|
||
"输入框既没有 aria-label 也没有关联 <label>，读屏进到 .kole-card-input 只会报「编辑框」。",
|
||
"卡组织与校验结果（.kole-card-type、.kole-card-tip）是普通文本，没有 aria-live，读屏不会自动读出状态变化。",
|
||
"校验失败只体现为 is-invalid 带来的颜色，需要补 aria-invalid 才能让读屏感知。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props：输入、识别、校验全在页内脚本，契约面是 .kole-card-input 输入框、.kole-card-type 识别结果、.kole-card-tip 提示，以及挂在 .kole-card-field 上的 is-valid / is-invalid / is-focus 状态类。",
|
||
"table": [
|
||
{
|
||
"name": "kole-card",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/BankCardInput.html:17）。"
|
||
},
|
||
{
|
||
"name": "kole-card-field",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/BankCardInput.html:18）。"
|
||
},
|
||
{
|
||
"name": "kole-card-input",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/BankCardInput.html:19）。"
|
||
},
|
||
{
|
||
"name": "kole-card-tip",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/BankCardInput.html:22）。"
|
||
},
|
||
{
|
||
"name": "kole-card-type",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/BankCardInput.html:20）。"
|
||
},
|
||
{
|
||
"name": "kole-demo",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/BankCardInput.html:15）。"
|
||
},
|
||
{
|
||
"name": "kole-demo__title",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/BankCardInput.html:16）。"
|
||
},
|
||
{
|
||
"name": "kole-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/BankCardInput.html:13）。"
|
||
},
|
||
{
|
||
"name": "kole-h2",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/BankCardInput.html:12）。"
|
||
},
|
||
{
|
||
"name": "kole-page",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/BankCardInput.html:11）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/BankCardInput.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/BankCardInput.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"bankcardinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"输入框属性（inputmode / maxlength）见（frameworks/BankCardInput.html:19）。",
|
||
"四位空格格式化见（frameworks/BankCardInput.html:53），卡组织正则见（frameworks/BankCardInput.html:28）。",
|
||
"Luhn 判定见（frameworks/BankCardInput.html:36），位数门槛见（frameworks/BankCardInput.html:62），聚焦态类见（frameworks/BankCardInput.html:66-67）。"
|
||
]
|
||
}
|