car/frontend/x-pages/form-basic.json

{
  "type": "page",
  "title": "基础表单",
  "subTitle": "展示一些常规的表单，包括验证、提示等等",
  "body": [
    {
      "type": "form",
      "mode": "horizontal",
      "title": "常规表单示例",
      "affixFooter": true,
      "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/form/save",
      "actions": [
        {
          "label": "保存",
          "type": "submit",
          "level": "success"
        }
      ],
      "controls": [
        {
          "label": " 标题",
          "type": "text",
          "placeholder": "请输入标题",
          "description": "请输入一个能吸引眼球的标题",
          "name": "title",
          "size": "md"
        },

        {
          "label": "编号",
          "required": true,
          "type": "text",
          "placeholder": "请输入编号",
          "name": "b",
          "size": "md",
          "validations": {
            "matchRegexp": "/^\\w{4}-\\w{4}-\\w{4}$/"
          },
          "validationErrors": {
            "matchRegexp": "您输入的内容格式不对，请按提示输入！"
          },
          "hint": "输入范例：xxxx-xxxx-xxxx"
        },

        {
          "label": "置顶",
          "type": "switch",
          "name": "c",
          "inline": true,
          "labelRemark": "开启后将置顶这条数据！"
        },

        {
          "label": "活动时间",
          "type": "date-range",
          "name": "range",
          "size": "md",
          "remark": "这是一个字段时间范围"
        },

        {
          "label": "日期范围",
          "type": "group",
          "controls": [
            {
              "type": "date",
              "size": "md",
              "name": "start",
              "mode": "inline",
              "maxDate": "${end}"
            },

            {
              "label": "到",
              "type": "date",
              "size": "md",
              "name": "end",
              "inputClassName": "m-l-sm",
              "mode": "inline",
              "minDate": "${start}",
              "remark": "这是两个字段的时间范围"
            }
          ]
        },

        {
          "label": "浏览器",
          "type": "button-group",
          "name": "browser",
          "value": "chrome",
          "options": [
            {
              "label": "Chrome",
              "value": "chrome"
            },

            {
              "label": "火狐",
              "value": "firefox"
            },

            {
              "label": "IE",
              "value": "ie"
            }
          ]
        },

        {
          "type": "list",
          "name": "taocan",
          "label": "套餐选择",
          "options": [
            {
              "value": 1,
              "body": "<div class='m-l-sm m-r-sm m-b-sm m-t-xs'>  <div class='text-md p-b-xs b-b m-b-xs'>套餐：C01</div>   <div class='text-sm'>CPU：2核</div> <div class='text-sm'>内存：1GB</div> <div class='text-sm'>SSD盘：10GB</div>  </div>"
            },
            {
              "value": 2,
              "body": "<div class='m-l-sm m-r-sm m-b-sm m-t-xs'>  <div class='text-md p-b-xs b-b m-b-xs'>套餐：C02</div>   <div class='text-sm'>CPU：4核</div> <div class='text-sm'>内存：4GB</div> <div class='text-sm'>SSD盘：20GB</div>  </div>"
            },
            {
              "value": 3,
              "disabled": true,
              "body": "<div class='m-l-sm m-r-sm m-b-sm m-t-xs'>  <div class='text-md p-b-xs b-b m-b-xs'>套餐：C03</div>   <div class='text-sm'>CPU：8核</div> <div class='text-sm'>内存：8GB</div> <div class='text-sm'>SSD盘：50GB</div>  </div>"
            }
          ]
        },

        {
          "label": "最爱周几",
          "type": "select",
          "name": "select",
          "size": "md",
          "clearable": true,
          "options": [
            {
              "label": "周一",
              "value": "0"
            },

            {
              "label": "周二",
              "value": "1"
            },

            {
              "label": "周三",
              "value": "2"
            },

            {
              "label": "周四",
              "value": "3"
            },

            {
              "label": "周五",
              "value": "4"
            },

            {
              "label": "周六",
              "value": "5"
            },

            {
              "label": "周日",
              "value": "6"
            }
          ]
        },

        {
          "label": "休息日",
          "type": "list",
          "name": "freeday",
          "value": ["5", "6"],
          "multiple": true,
          "extractValue": true,
          "options": [
            {
              "label": "周一",
              "value": "0"
            },

            {
              "label": "周二",
              "value": "1"
            },

            {
              "label": "周三",
              "value": "2"
            },

            {
              "label": "周四",
              "value": "3"
            },

            {
              "label": "周五",
              "value": "4"
            },

            {
              "label": "周六",
              "value": "5"
            },

            {
              "label": "周日",
              "value": "6"
            }
          ]
        },

        {
          "label": "人数",
          "type": "number",
          "name": "num",
          "size": "md",
          "value": 10
        },

        {
          "label": "比率",
          "type": "range",
          "name": "percent"
        },

        {
          "label": "简介",
          "type": "textarea",
          "name": "textarea"
        }
      ]
    }
  ]
}