# input

# `Schema`类静态属性

Schema类静态属性请访问 Schema.js类静态属性及值逻辑与事件逻辑关系

{
  widget: 'input',
  title: '单行文本',
  preview: '',
  type: 'string',
  validators: ['string', 'email', 'url', 'pattern'],
  logic: {
    value: ['=', '!=', '<>', '><'],
    event: []
  }
}

1
2
3
4
5
6
7
8
9
10
11

# `schema.default`

默认''

# `schema.option`定义

schema完整定义请访问schema

{
  "password": false,  // 是否为密码框，为true，渲染时显示值将被*代替
  "prefix": "",       // 前置文本
  "suffix": ""        // 后置文本
}

1
2
3
4
5

# 示例展示

# 基础展示

完整示例 codeSandbox (opens new window)

schema

{
  "key": "k0CyR0gyT",
  "widget": "input",
  "hidden": false,
  "option": {
    "password": false,
    "prefix": "",
    "suffix": ""
  },
  "name": "username",
  "type": "string",
  "label": "输入框",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": false,
      "message": "必填",
      "type": "string",
      "trigger": "blur"
    }
  ],
  "placeholder": "请输入..."
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 邮箱、URL规则示例

完整示例 codeSandbox (opens new window)

schema

{
  "key": "k0CyR0gyT",
  "widget": "input",
  "hidden": false,
  "option": {
    "password": false,
    "prefix": "",
    "suffix": ""
  },
  "name": "email",
  "type": "string",
  "label": "邮箱",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": true,
      "message": "必填",
      "type": "string",
      "trigger": "blur"
    },
    {
      "message": "email不符合规范",
      "type": "email"
    }
  ],
  "placeholder": "请输入..."
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 自定义长度规则示例

TIP

要求：密码框，最小长度6，最大长度20

完整示例 codeSandbox (opens new window)

schema

{
  "key": "k0CyR0gyT",
  "widget": "input",
  "hidden": false,
  "option": {
    "password": true,
    "prefix": "",
    "suffix": ""
  },
  "name": "pwd",
  "type": "string",
  "label": "密码",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": true,
      "message": "必填",
      "type": "string",
      "trigger": "blur"
    },
    {
      "message": "最小长度6，最大长度20",
      "type": "string",
      "min": "6",
      "max": "20"
    }
  ],
  "placeholder": "请输入..."
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 自定义正则规则示例

TIP

要求：字母或下划线开始，字母、数字、下划线组合，最小长度1，最大长度10

完整示例 codeSandbox (opens new window)

schema

{
  "key": "k0CyR0gyT",
  "widget": "input",
  "hidden": false,
  "option": {
    "password": false,
    "prefix": "",
    "suffix": ""
  },
  "name": "field",
  "type": "string",
  "label": "输入框",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": true,
      "message": "必填",
      "type": "string",
      "trigger": "blur"
    },
    {
      "message": "字母或下划线开始，字母、数字、下划线组合，最小长度1，最大长度10",
      "type": "pattern",
      "pattern": "^[a-zA-Z_][a-zA-Z_\\d]{0,9}$"
    }
  ],
  "placeholder": "请输入..."
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

← 扩展示例 textarea →