MarsCode生成前端表单规则提示词检查表方法
类型:热点整理2026-07-14
在MarsCode中编写前端表单校验提示词时,需覆盖email、password、confirmPassword、username、phone五个字段,并适配Zod或ElementPlusRules格式。提示词需包含格式、长度和业务约束,且直接可调用。生成后需格式化代码并存入项目utils目录,导入表单组件验证可用性。
在 MarsCode 中编写前端表单校验规则时,核心原则非常明确:生成的提示词必须能够直接被 Zod、Element Plus Rules 这类校验库调用,避免开发者重复手动编写校验逻辑。以下这份提示词模板覆盖了最常见的五个表单字段,并提供了两种主流技术栈的适配写法——直接复制使用,常见的陷阱和复杂逻辑已经替你处理好了。

简单来说,就是要让 AI 生成的校验规则实现“开箱即用”,无论项目基于 React 还是 Vue,导入后即可直接运行。
明确表单字段与校验维度
打开 MarsCode 编辑器,新建一个 `.md` 或 `.txt` 文件,标题写为“用户注册表单规则提示词”。第一行用粗体标出核心字段:**【email、password、confirmPassword、username、phone】**。五个字段缺一不可——遗漏 confirmPassword 会导致前后端校验不一致,用户填写两次密码后可能直接绕过比对环节,这属于生产环境的事故隐患。
每个字段下方,使用短横线隔开,依次写入三项强制性约束:格式要求、最小/最大长度、业务限制(例如“用户名不能包含空格”)。避免使用“建议”“可选”等模糊措辞,只保留必须执行的规则,确保校验逻辑清晰严谨。
按校验库类型生成结构化提示词
针对不同技术栈,有两种最常用的输出格式,根据实际项目选择即可。
**方法一:适配 Zod Schema(推荐 TypeScript 项目)**
在提示词开头添加一行注释:`// Zod Schema output format: z.string().email().min(6).max(32)`。然后逐字段编写 Zod 的链式调用语句。特别强调:**email 字段必须使用 `z.string().email()`,不能使用 `z.string().regex()` 手动编写邮箱正则——后者容易遗漏国际化邮箱(如带 `+` 符号的地址)。** confirmPassword 字段需要额外添加 `.refine((val, ctx) => val === password, { message: "两次输入密码不一致" })`,注意 `password` 变量名必须与上一行声明完全一致,否则校验会拿错值进行比对。
**方法二:适配 Element Plus Rules(Vue 项目)**
每个字段输出一个对象字面量,key 固定为 `trigger`,值固定为 `blur`。数组中第一项是 `required: true`,从第二项开始编写 `validator` 函数。函数体内不能出现 `async/await`——Element Plus 的 Rules 是同步触发,一旦使用异步写法,校验会直接失效,控制台也不会报错,容易埋下隐患。
导出检查表并验证可用性
第一步:将生成的提示词全文复制出来。
第二步:粘贴到 VS Code 中,按 `Shift+Alt+F` 让 Prettier 格式化代码。这一步非常重要,因为 MarsCode 生成的代码有时缩进不够规范,直接导入项目可能会报错。
第三步:将格式化后的文本保存为 `form-rules.ts`(Zod 版)或 `form-rules.js`(Element Plus 版),并放置在项目 `src/utils/` 目录下。
第四步:在表单组件中导入该文件,将导出的对象直接赋值给 `rules` 属性。如果控制台报 `"Cannot read property 'required' of undefined"`,说明某个字段对象缺少了 `trigger` 字段,请返回第三步检查格式化结果。这个错误最常见的原因是字段名拼写不一致或数组结构错误,仔细排查即可定位问题。