请严格分两步响应:① 先用‘【结构框架】’为标题,只输出一个JSON对象,键名为fields、triggers、messages、bindings四类;fields数组中每个元素必须含name、type、rules三项,rules为字符串数组;triggers必须是submit/blur/change三选一;messages对象键名与fields.name完全一致;bindings对象键名也与fields.name一致,值为对应错误提示DOM选择器(如#username-error)。② 再用‘【规则实现】’为标题,基于该结构生成完整JavaScript验证代码。现在只输出第一步。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

你需要让Trae的AI在生成前端表单验证规则前,先输出清晰、可落地的结构框架,而不是直接堆砌代码或模糊描述——否则它会跳过字段粒度拆解、忽略触发时机差异、混淆错误提示绑定逻辑,最终生成的规则无法嵌入真实表单DOM树中。
强制AI先输出结构再填内容
在Trae Chat中新建对话,粘贴以下提示词(一字不改,不加空行、不补说明):
“请严格分两步响应:① 先用‘【结构框架】’为标题,只输出一个JSON对象,键名为fields、triggers、messages、bindings四类;fields数组中每个元素必须含name、type、rules三项,rules为字符串数组;triggers必须是submit/blur/change三选一;messages对象键名与fields.name完全一致;bindings对象键名也与fields.name一致,值为对应错误提示DOM选择器(如#username-error)。② 再用‘【规则实现】’为标题,基于该结构生成完整JavaScript验证代码。现在只输出第一步。”
【若AI回复“好的”“已理解”或直接写代码,说明指令未生效,必须清空对话重发原提示词】
立即学习“前端免费学习笔记(深入)”;
校验结构是否满足工程落地要求
拿到AI返回的JSON后,立刻做三项硬检查:
① fields数组长度是否等于表单实际字段数?少于字段数,说明AI漏掉了隐藏字段或动态生成项;
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度,帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度,帮助开发者将普通页面升级为高品质产品级界面。
② bindings中每个选择器是否都能在HTML中用document.querySelector()命中?例如绑定到span[data-field="email"]就合法,但#email-tip可能不存在;
【bindings值必须含至少一个属性选择器或ID,禁用纯class名如.error,因class易冲突】
③ messages对象里每个键名是否与fields中name字段100%一致?大小写、下划线、连字符任一错位都会导致提示无法渲染。
用字段级指令补全缺失结构
若【结构框架】中某字段rules为空或过于简略,单独追加指令补全:
方法一:针对邮箱字段补规则
“请为fields中name='email'的项,将rules数组替换为['required', 'format:email', 'max-length:254'],其中format:email需匹配RFC 5322标准正则,不接受中文@符号”
方法二:针对密码字段补规则
“请为name='password'的rules添加'has-uppercase'、'has-lowercase'、'has-number'、'has-special'四条,每条对应独立正则片段,不合并为单条超长正则”
方法三:修正触发时机
“将triggers从'blur'改为['blur', 'input'],但input触发时仅校验格式,不校验必填;blur触发时执行全部rules”














