{
"summary": "创建了一个包含个人信息、联系方式、职业详情和验证功能的响应式表单，使

{
"summary": "创建了一个包含个人信息、联系方式、职业详情和验证功能的响应式表单，使用Tailwind Grid布局实现移动优先的响应式设计",
"widget": {
"type": "formly",
"fields": [
{
"fieldGroup": [
{
"key": "name",
"type": "input",
"className": "col-span-12 md:col-span-6",
"props": {
"label": "姓名",
"required": true,
"placeholder": "请输入您的姓名"
},
"validation": {
"messages": {
"required": "姓名不能为空"
}
}
},
{
"key": "email",
"type": "input",
"className": "col-span-12 md:col-span-6",
"props": {
"label": "邮箱",
"required": true,
"type": "email",
"placeholder": "请输入您的邮箱"
},
"validation": {
"messages": {
"required": "邮箱不能为空",
"pattern": "请输入有效的邮箱格式"
}
}
},
{
"key": "phone",
"type": "input",
"className": "col-span-12 md:col-span-6",
"props": {
"label": "手机号",
"required": true,
"pattern": "^1[3-9]\\d{9}$",
"placeholder": "请输入11位手机号"
},
"validation": {
"messages": {
"required": "手机号不能为空",
"pattern": "请输入有效的手机号码"
}
}
},
{
"key": "address",
"type": "input",
"className": "col-span-12 md:col-span-6",
"props": {
"label": "地址",
"placeholder": "请输入您的详细地址"
}
},
{
"key": "gender",
"type": "radio",
"className": "col-span-12 md:col-span-6",
"props": {
"label": "性别",
"required": true,
"options": [
{
"label": "男",
"value": "male"
},
{
"label": "女",
"value": "female"
}
]
},
"validation": {
"messages": {
"required": "请选择性别"
}
}
},
{
"key": "age",
"type": "slider",
"className": "col-span-12 md:col-span-6",
"props": {
"label": "年龄",
"min": 18,
"max": 100,
"step": 1
}
},
{
"key": "occupation",
"type": "select",
"className": "col-span-12 md:col-span-6",
"props": {
"label": "职业",
"placeholder": "请选择职业",
"options": [
{
"label": "学生",
"value": "student"
},
{
"label": "上班族",
"value": "employee"
},
{
"label": "自由职业",
"value": "freelancer"
},
{
"label": "其他",
"value": "other"
}
]
}
},
{
"key": "hobbies",
"type": "checkbox",
"className": "col-span-12",
"props": {
"label": "兴趣爱好",
"options": [
{
"label": "阅读",
"value": "reading"
},
{
"label": "运动",
"value": "sports"
},
{
"label": "音乐",
"value": "music"
},
{
"label": "旅行",
"value": "travel"
},
{
"label": "美食",
"value": "food"
}
]
}
},
{
"key": "introduction",
"type": "textarea",
"className": "col-span-12",
"props": {
"label": "自我介绍",
"rows": 4,
"placeholder": "请简要介绍一下自己..."
}
},
{
"key": "resume",
"type": "rich-text",
"className": "col-span-12",
"props": {
"label": "简历",
"placeholder": "请详细描述您的工作经历和教育背景..."
}
},
{
"key": "avatar",
"type": "img-picker",
"className": "col-span-12 md:col-span-6",
"props": {
"label": "头像",
"updateLabel": "更换头像",
"addLabel": "上传头像",
"description": "支持JPG/PNG格式，建议尺寸200x200像素"
}
},
{
"key": "captcha",
"type": "input",
"className": "col-span-12 md:col-span-6",
"props": {
"label": "验证码",
"required": true,
"placeholder": "请输入验证码"
},
"validation": {
"messages": {
"required": "验证码不能为空"
}
}
}
],
"className": "grid grid-cols-12 gap-4"
}
]
},
"next": ["添加校验规则","设置默认值","分组字段集","增加提示信息","添加条件逻辑"]
}