必须覆盖用户理解、开发实现、测试验证、无障碍访问四维度；每个字段提示词需基于真实业务意图（如“手机号必须为本人实名登记且唯一绑定”）；按操作流分层设计轻量失焦提示与上下文提交提示；适配HTML原生、JS动态、屏幕阅读器等多载体并预埋本地化占位符。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要为前端表单生成能覆盖用户理解、开发实现、测试验证、无障碍访问多个角度的规则提示词，而不是只写“必填”“格式错误”这类通用文案。
明确表单字段的真实业务意图
打开产品需求文档或与后端接口定义对照，逐个确认每个字段在业务流程中承担什么角色。例如手机号字段，不只是“用于登录”，而是“作为实名认证主标识，需与运营商实名库比对，且同一账户仅允许绑定一个有效号码”。这一步漏掉，后续所有提示词都会偏离实际风控逻辑。
把每个字段的业务约束写成一句话，用“必须”“禁止”“仅当”等强逻辑词，避免“建议”“尽量”这类模糊表述。
拆解用户可能出错的典型路径
方法一：基于用户操作流反推
填写→失焦→提交→校验失败→修改→再提交。在“失焦”环节，提示词要足够轻量（如“请输入11位手机号”）；在“提交”环节，提示词要带上下文（如“手机号未通过实名认证，请核对是否为本人登记号码”）。
立即学习“前端免费学习笔记（深入）”；
方法二：模拟三类高频错误场景
① 格式类：邮箱少@、身份证末位X写成小写x；【X必须大写，否则公安库校验失败】
② 逻辑类：结束日期早于开始日期、优惠券使用时间超出有效期；
③ 环境类：iOS Safari下日期控件不触发onchange、微信内置浏览器禁用clipboard API导致粘贴校验失效。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
适配不同技术实现层的提示载体
第一步：区分HTML原生属性提示和JS动态提示
title属性仅作hover辅助，aria-describedby必须绑定到对应input的id，而Formik/Yup的error.message是纯文本，不能直接塞进aria-live区域。
第二步：为每种载体设计差异化文案长度
title：≤30字符，不换行，如“密码需含大小写字母+数字”；
aria-live区域：支持完整句子，可包含动作指引，如“密码强度不足：请至少输入8位，包含1个大写字母、1个小写字母和1个数字”；
表单底部全局提示栏：允许带链接，如“忘记密码？点击重置”。
第三步：检查各载体是否被屏幕阅读器正确朗读
给required字段加aria-required="true"，但不要同时设required属性又设aria-required——会造成重复播报。
注入无障碍与本地化预埋点
在文案中预留占位符而非硬编码值：把“请输入6位验证码”改成“请输入{length}位{type}验证码”，其中length和type由JS动态注入。这样既能支持多语言（英文版自动变为“Enter {length} digit {type} code”），也方便视障用户配合语音合成引擎理解数值含义。
避免使用颜色单独传递状态信息，所有“红色错误提示”必须同步有图标+文字说明，比如 ❌ 电话号码格式不正确，而非仅靠红色文字。
