100 lines
4.3 KiB
JSON
100 lines
4.3 KiB
JSON
{
|
||
"slug": "idcardinput",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生身份证输入：加权求和校验位，通过后解出出生日期与性别写进信息区。",
|
||
"usage": [
|
||
"校验是国标算法：17 位数字各乘 WEIGHTS 后求和，用 CHECK = \"10X98765432\" 取 sum % 11 得校验位，与第 18 位比对。",
|
||
"输入时先净化：input.value.replace(/[^0-9Xx]/g, \"\").toUpperCase().slice(0, 18)，非数字与 X 直接丢弃。",
|
||
".kole-idcard-tip 分三档：位数不足提示「已输入 N 位，继续…」，满 18 位才走校验并提示通过或失败。",
|
||
"通过后从切片解析：出生日期取 v.slice(6, 14) 再拼成 YYYY-MM-DD，性别由第 17 位奇偶决定（奇数男、偶数女）。",
|
||
"解析结果写进 .kole-idcard-info（默认 display:none），用 flex 展开；状态类 is-valid / is-invalid / is-focus 加在外层 .kole-idcard-field 上。"
|
||
],
|
||
"bestPractices": [
|
||
"校验位只能挡输入错误，无法验证号码真实存在，提交前仍需服务端或实名接口复核。",
|
||
"出生日期与性别是算出来的，不要把它们当权威字段回传，应让后端解析。",
|
||
"净化逻辑在 input 事件里改写 value，粘贴超长内容会被静默截断，需要提示时自己补。"
|
||
],
|
||
"a11y": [
|
||
"输入框没有 aria-label，也没有关联 <label>，读屏只报「编辑框」。",
|
||
"校验结果与解析信息（.kole-idcard-tip、.kole-idcard-info）都是普通文本，没有 aria-live，状态变化不会播报。",
|
||
"校验失败只体现为 is-invalid 类带来的颜色，缺 aria-invalid，读屏拿不到错误状态。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props：.kole-idcard 容器内是 .kole-idcard-input 原生输入框、.kole-idcard-info 解析结果、.kole-idcard-tip 提示，校验态是挂在 .kole-idcard-field 上的 is-valid / is-invalid / is-focus 类，算法全在页内脚本。",
|
||
"table": [
|
||
{
|
||
"name": "kole-demo",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/IDCardInput.html:15）。"
|
||
},
|
||
{
|
||
"name": "kole-demo__title",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/IDCardInput.html:16）。"
|
||
},
|
||
{
|
||
"name": "kole-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/IDCardInput.html:13）。"
|
||
},
|
||
{
|
||
"name": "kole-h2",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/IDCardInput.html:12）。"
|
||
},
|
||
{
|
||
"name": "kole-idcard",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/IDCardInput.html:17）。"
|
||
},
|
||
{
|
||
"name": "kole-idcard-field",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/IDCardInput.html:18）。"
|
||
},
|
||
{
|
||
"name": "kole-idcard-info",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/IDCardInput.html:21）。"
|
||
},
|
||
{
|
||
"name": "kole-idcard-input",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/IDCardInput.html:19）。"
|
||
},
|
||
{
|
||
"name": "kole-idcard-tip",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/IDCardInput.html:22）。"
|
||
},
|
||
{
|
||
"name": "kole-page",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/IDCardInput.html:11）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/IDCardInput.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/IDCardInput.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"idcardinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"加权表与校验位字符串见（frameworks/IDCardInput.html:28-29），算法见（frameworks/IDCardInput.html:30-39）。",
|
||
"输入净化见（frameworks/IDCardInput.html:47），位数不足分支见（frameworks/IDCardInput.html:53）。",
|
||
"解析结果渲染见（frameworks/IDCardInput.html:59），聚焦态类见（frameworks/IDCardInput.html:67-68）。"
|
||
]
|
||
}
|