MarsCode生成前端表单规则提示词检查表方法

在 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` 字段，请返回第三步检查格式化结果。这个错误最常见的原因是字段名拼写不一致或数组结构错误，仔细排查即可定位问题。