用途:介绍 SGDS 表单组件的表单校验模式。SGDS 表单组件通过浏览器 ElementInternals API 工作,行为类似原生 HTML 表单控件,自动参与 form 提交、FormData 与约束校验。
前置:安装与框架集成见 sgds-components-setup。所有表单组件需放在 form 元素内并设置 name 属性才能参与提交。
主要能力:校验在 onChange(失焦后)、onSubmit(提交前拦截无效表单)、onReset(清除校验状态与值)触发,禁用组件不参与校验。约束校验无论是否设置 hasFeedback 都会运行,但只有设置 hasFeedback 才显示错误信息:布尔值显示原生校验文本,hasFeedback="text" 仅文本,"style" 仅无效边框样式,"both" 同时显示样式与文本;可用 invalidFeedback 覆盖显示文本。各组件支持的约束:sgds-input 支持 required、pattern、min、max、minlength、maxlength;sgds-textarea 支持 required、minlength、maxlength;sgds-quantity-toggle 支持 min、max;sgds-datepicker 支持 required、minDate、maxDate;sgds-select、sgds-combo-box、sgds-radio-group、sgds-checkbox-group、独立 sgds-checkbox、sgds-file-upload 支持 required(文件大小限制 WIP)。
使用方式:在提交处用 new FormData(event.target) 读取值;文件需从 sgds-file-upload 的 selectedFiles 手动加入 FormData。自定义或第三方校验(如 Zod)时先禁用内置校验:sgds-input 与 sgds-textarea 可用 noValidate 属性,或在 form 上加 novalidate 禁用整表校验;随后在 sgds-input 事件里调用 setInvalid(true/false) 并设置 invalidFeedback。reset 按钮自动清除状态,无需额外逻辑。
限制:自定义校验的 noValidate + setInvalid 目前仅 sgds-input 与 sgds-textarea 完整支持,其余组件为 WIP。约束校验不会单独显示 UI,需配 hasFeedback。不要额外添加提交监听来复现内置行为。其余细节资料未提供。