101 lines
4.2 KiB
JSON
101 lines
4.2 KiB
JSON
{
|
||
"slug": "form",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生表单：requiered 加 span 显隐做校验，提交时 preventDefault 后自己判空。",
|
||
"usage": [
|
||
"<form class=\"kole-form-form\" id=\"kole-form-form\"> 是真实表单，提交与重置用原生 type=\"submit\" 与 type=\"reset\" 两个按钮。",
|
||
"字段用 <label class=\"kole-form-field\"> 包裹说明文字与 <input>，必填星号写在 <b aria-hidden=\"true\">*</b> 里。",
|
||
"校验提示是预置的 .kole-form-error 加 hidden 属性，提交时把它置为 hidden = this.elements.name.value.trim() !== \"\"（true 表示无错）。",
|
||
"submit 处理里第一句是 e.preventDefault()，阻止原生提交后才做校验，没有模拟提交动作。",
|
||
"输入框带 name=\"name\" 与原生 required 属性，示例初值 value=\"示例项目\"。"
|
||
],
|
||
"bestPractices": [
|
||
"示例只校验「非空」，接真实业务时把规则换成自己的，并注意 .kole-form-error 的显隐语义是「hidden 为 true 即无错」，容易写反。",
|
||
"preventDefault 之后没有 fetch 占位，实际提交逻辑完全待补。",
|
||
"重置按钮是原生 type=\"reset\"，会清空到初始 value（不是空值），要清空需自己接管。"
|
||
],
|
||
"a11y": [
|
||
"必填星号用 <b aria-hidden=\"true\"> 屏蔽，避免读屏念出「星号」，这是对的；但输入框依赖原生 required 表达必填，读屏会播报「必填」。",
|
||
"错误提示 .kole-form-error 与输入框之间没有 aria-describedby 关联，读屏不会主动读出错误文案。",
|
||
"输入框没有 id，label 用包裹方式关联，这种写法本身有效；但一旦把 label 拆开就必须补 for / id。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端走原生表单：<form class=\"kole-form-form\"> 承载提交，.kole-form-field 是 label 包裹层，.kole-form-control 是原生 input，.kole-form-error 用 hidden 属性显隐，校验逻辑在页内一段 submit 脚本里。",
|
||
"table": [
|
||
{
|
||
"name": "demo",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Form.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-block",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Form.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-note",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Form.html:5）。"
|
||
},
|
||
{
|
||
"name": "kole-form",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Form.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-form-button",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Form.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-form-control",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Form.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-form-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Form.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-form-error",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Form.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-form-field",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Form.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-form-form",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Form.html:6）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Form.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Form.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"form-ex-1",
|
||
"form-ex-2"
|
||
],
|
||
"notes": [
|
||
"表单结构与 required 属性见（frameworks/Form.html:6），错误节点带 hidden 也在这一行。",
|
||
"submit 处理与 preventDefault 见（frameworks/Form.html:6）的内联脚本，elements.name 判空同此。",
|
||
"按钮类型为原生 submit / reset 见（frameworks/Form.html:6）。"
|
||
]
|
||
}
|