iter(g345): 提交按钮补忙碌态与 aria-busy

2026-10-27 02:28:56 +08:00
parent e55097fd8f
commit 911ff29064
6 changed files with 28 additions and 11 deletions
@@ -585,7 +585,7 @@ const content = h(
  section(
    'sec-formlab',
    '表单校验',
-    'form + formItem：必填 / 长度 / 正则同步校验，validator 返回 Promise 即异步规则（提交会等待）；全部通过才触发提交。校验不通过时顶部出现「有 N 项需要修改」汇总条（role=alert 会被读屏播报）并聚焦第一处——自绘控件（下拉 / 评分 / 开关）没有原生 input，焦点退到它的触发器，整块不可聚焦时落在字段容器上；onError 拿到不通字段数。错误文案带唯一 id 并被 aria-describedby 关联到控件，读屏除了「无效」还会念出具体原因。点「重置」逐项复位：原生输入框回初始值、错误态与汇总条一起清空，自绘控件（城市下拉）靠 formItem 的 reset 钩子回写信号。校验失败只把控件描红，危险色光环聚焦时才亮——常驻红环会让整片字段看着像一起报错；汇总条的条数随字段校验实时重算，改好一项就少一项、全好即消失。本例 columns: 2 走两列栅格，窄屏自动堆叠，按钮区始终整行；字段传 span 可跨列（备注整宽）。',
+    'form + formItem：必填 / 长度 / 正则同步校验，validator 返回 Promise 即异步规则（提交会等待）；全部通过才触发提交。校验不通过时顶部出现「有 N 项需要修改」汇总条（role=alert 会被读屏播报）并聚焦第一处——自绘控件（下拉 / 评分 / 开关）没有原生 input，焦点退到它的触发器，整块不可聚焦时落在字段容器上；onError 拿到不通字段数。错误文案带唯一 id 并被 aria-describedby 关联到控件，读屏除了「无效」还会念出具体原因。点「重置」逐项复位：原生输入框回初始值、错误态与汇总条一起清空，自绘控件（城市下拉）靠 formItem 的 reset 钩子回写信号。校验失败只把控件描红，危险色光环聚焦时才亮——常驻红环会让整片字段看着像一起报错；汇总条的条数随字段校验实时重算，改好一项就少一项、全好即消失；点提交后按钮转圈并禁点（异步规则要等 400ms，只变灰会让人以为点空了）。本例 columns: 2 走两列栅格，窄屏自动堆叠，按钮区始终整行；字段传 span 可跨列（备注整宽）。',
    form(
      { columns: 2, submitText: '注册', resetText: '重置', onSubmit: () => formResult(`提交成功：${username()} / ${email()} / ${city()}`) },
      [