SuperAPI AI 工具集

sgds-forms

前端与建站

查看项目

更新于 10-15 21:54

技能介绍

用途:SGDS 表单组件通过浏览器 ElementInternals API 表现得像原生表单控件,自动参与 <form> 提交、FormData 与约束校验。使用前需参考 sgds-components 完成安装与框架集成;所有表单组件必须放在 <form> 内并设置 name 属性。

主要能力:校验分层触发——onChange(失焦后)、onSubmit(提交前最终校验并阻止无效提交)、onReset(清空校验状态与值);禁用组件跳过校验。约束校验始终运行,但只有设置 hasFeedback 才显示错误信息:布尔值或 "text" 仅显示文本,"style" 仅显示无效边框样式,"both" 同时显示样式与文本;可用 invalidFeedback 覆盖原生提示。各组件支持约束不同,如 sgds-input 支持 required、pattern、min、max、minlength、maxlength,sgds-textarea 支持 required、minlength、maxlength,sgds-datepicker 支持 required、minDate、maxDate,其余多为 required。hintText 与错误信息在多数组件共用输入框下方空间,错误时替换 hintText;checkbox-group 与 radio-group 的 hintText 始终显示在选项上方。

使用方式:提交处理中用 new FormData(event.target) 读取值;文件上传需从 sgds-file-upload 的 selectedFiles 属性单独读取。自定义或第三方校验(如 Zod)时,先在组件加 noValidate 或在 <form> 加 novalidate,再在事件监听中调用 setInvalid(true/false) 并设置 invalidFeedback;事件名因组件而异(输入类用 sgds-input,日期用 sgds-change-date,选择类用 sgds-change,文件用 sgds-add-files/sgds-remove-file)。type="reset" 按钮会自动清空校验状态与值。

限制:文件上传的文件大小限制标注为 WIP;自定义校验支持状态表中各组件均标注已实现。