选“长期”时禁用并清空截止日期框，提交时跳过校验：radio组监听change事件动态控制input状态，前端主动删除字段，后端兼容不传值情形，并增强css提示与可访问性。
证件有效期选“长期”时，自动禁用并清空“有效截止日期”输入框，同时提交时跳过该字段校验——这是银行开户表单中常见的联动逻辑。
HTML 结构：基础表单与关键元素
确保证件类型、有效期选项（单选）、截止日期输入框三者有明确的关联关系：
- 证件有效期用 radio 按钮组实现，“长期”和“具体日期”二选一；
- 截止日期用 input type="date"，初始设为
disabled和空值； - 为关键元素添加语义化 id 和 name，便于 JS 精准控制（如
id="id-validity-type"、id="id-expiry-date"）。
JavaScript 联动：监听 + 启用/禁用 + 清空
绑定 change 事件到 radio 组，根据选中项动态控制日期框状态：
- 当“长期”被选中 → 设置
expiryDate.disabled = true，并执行expiryDate.value = ''； - 当“具体日期”被选中 → 设置
expiryDate.disabled = false，并可选地聚焦该输入框； - 建议在页面加载后也执行一次初始化逻辑，避免 DOM 加载顺序导致状态不一致。
表单提交校验：服务端与前端协同处理
仅靠前端禁用无法保证数据安全，需前后端配合：
- 前端提交前检查：
if (validityType === 'long-term') { delete formData.expiryDate; }； - 后端接收时判断：若证件类型支持“长期”，且未传入 expiryDate 字段，视为合法，不触发非空或格式校验；
- 避免仅依赖 disabled 属性传参——浏览器可能仍提交 disabled 元素的 value（尤其旧版 IE），应主动剔除。
用户体验细节：视觉反馈与可访问性
增强用户感知，减少误操作：
- 给禁用的日期框添加浅灰背景和更淡的边框（CSS 控制
input:disabled）； - “长期”选项旁可加小字提示：“勾选后无需填写截止日期”；
- 为 radio 组添加 aria-describedby 关联说明文字，提升读屏软件兼容性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
