SuperAPI AI 工具集

form-vanilla

编程与开发

查看项目

更新于 10-15 17:25

技能介绍

用途:为不使用 React、Vue 等框架的网页表单提供验证方案,结合浏览器原生 HTML5 Constraint Validation API 与 Zod 处理复杂规则。

主要能力:使用 required、minlength、maxlength、min、max、step、pattern、type=email、type=url 等原生属性;通过 input.validity 的 valueMissing、typeMismatch、patternMismatch、tooShort、tooLong、rangeUnderflow、rangeOverflow、stepMismatch、badInput、customError 等属性判断约束,并用 checkValidity、reportValidity、setCustomValidity 控制提示。Zod 集成提供 createFormValidator,支持 validateOn(blur/input/submit)、revalidateOn、debounceMs 选项,返回 validate、validateField、setFieldError、clearFieldError、clearAllErrors、reset、getFormData 等方法,并设置 aria-invalid、aria-describedby 与错误元素。

使用方式:在表单上添加 novalidate,按约定结构放置 .form-field、label、input 与 .error 元素,引入 Zod 与 vanilla-validator,定义 schema 后创建 validator,在 submit 事件中调用 validate,成功后可用 fetch 提交。

适用场景:登录、联系、结账等原生 HTML 表单,以及需要渐进增强、无 JS 时仍可提交的场景。

限制:资料未提供安装命令、包名、版本要求、浏览器兼容范围、性能数据或收费信息;示例依赖 Zod 与模块化脚本,具体项目集成方式需自行确认。