Microsoft.Common.TextBox UI 元素

用户界面 (UI) 元素可用于添加无格式文本。 Microsoft.Common.TextBox 元素是单行输入域,但通过 multiLine 属性,支持多行输入。

UI 示例

TextBox 元素使用单行或多行文本框。

Microsoft.Common.TextBox 元素单行文本框。

Microsoft.Common.TextBox 元素多行文本框。

架构

{
  "name": "nameInstance",
  "type": "Microsoft.Common.TextBox",
  "label": "Name",
  "defaultValue": "contoso123",
  "toolTip": "Use only allowed characters",
  "placeholder": "",
  "multiLine": false,
  "constraints": {
    "required": true,
    "validations": [
      {
        "regex": "^[a-z0-9A-Z]{1,30}$",
        "message": "Only alphanumeric characters are allowed, and the value must be 1-30 characters long."
      },
      {
        "isValid": "[startsWith(steps('resourceConfig').nameInstance, 'contoso')]",
        "message": "Must start with 'contoso'."
      }
    ]
  },
  "visible": true
}

示例输出

"contoso123"

备注

  • 当鼠标光标悬停在信息符号上时,使用 toolTip 属性可显示元素的相关文本。
  • placeholder 属性是帮助文本,当用户开始编辑后会消失。 如果同时定义了 placeholderdefaultValue,会优先显示 defaultValue
  • multiLine 属性为布尔值 truefalse。 若要使用多行文本框,请将属性设置为 true。 如果不需要多行文本框,请将属性设置为 false 或排除该属性。 对于新行,JSON 输出将显示 \n,表示换行。 多行文本框接受 \r(表示回车 (CR))和 \n(表示换行 (LF))。 例如,默认值可以包含 \r\n,用于指定 CRLF。
  • 如果 设置为 true,则文本框必须包含值才能成功通过验证 。 默认值为 false
  • validations 属性是一个数组,可在其中添加条件,用于检查文本框中提供的值。
  • regex 属性是一个 JavaScript 正则表达式模式。 如果已指定,文本框的值必须与模式匹配才能成功验证。 默认值为 null。 有关 regex 语法的详细信息,请参阅正则表达式快速参考
  • isValid 属性包含计算结果为 truefalse 的表达式。 在表达式中,定义确定文本框是否有效的条件。
  • message 属性是当文本框的值未通过验证时会显示的一个字符串。
  • required 设置为 false 时可以为 regex 指定值。 在这种情况下,文本框并非必须具有值才能成功通过验证。 如果指定了一个值,则它必须与正则表达式模式匹配。

示例

这些示例演示了如何使用单行文本框和多行文本框。

单行

以下实例结合使用 Microsoft.Solutions.ArmApiControl 控件和文本框来检查资源名称的可用性。

"basics": [
  {
    "name": "nameApi",
    "type": "Microsoft.Solutions.ArmApiControl",
    "request": {
      "method": "POST",
      "path": "[concat(subscription().id, '/providers/Microsoft.Storage/checkNameAvailability?api-version=2019-06-01')]",
      "body": "[parse(concat('{\"name\": \"', basics('txtStorageName'), '\", \"type\": \"Microsoft.Storage/storageAccounts\"}'))]"
    }
  },
  {
    "name": "txtStorageName",
    "type": "Microsoft.Common.TextBox",
    "label": "Storage account name",
    "constraints": {
      "validations": [
        {
          "isValid": "[not(equals(basics('nameApi').nameAvailable, false))]",
          "message": "[concat('Name unavailable: ', basics('txtStorageName'))]"
        }
      ]
    }
  }
]

多行

此示例使用 multiLine 属性创建包含占位符文本的多行文本框。

{
  "$schema": "https://schema.management.azure.com/schemas/0.1.2-preview/CreateUIDefinition.MultiVm.json#",
  "handler": "Microsoft.Azure.CreateUIDef",
  "version": "0.1.2-preview",
  "parameters": {
    "basics": [
      {
        "name": "demoTextBox",
        "type": "Microsoft.Common.TextBox",
        "label": "Multi-line text box",
        "defaultValue": "",
        "toolTip": "Use 1-60 alphanumeric characters, hyphens, spaces, periods, and colons.",
        "placeholder": "This is a multi-line text box:\nLine 1.\nLine 2.\nLine 3.",
        "multiLine": true,
        "constraints": {
          "required": true,
          "validations": [
            {
              "regex": "^[a-z0-9A-Z -.:\n]{1,60}$",
              "message": "Only 1-60 alphanumeric characters, hyphens, spaces, periods, and colons are allowed."
            }
          ]
        },
        "visible": true
      }
    ],
    "steps": [],
    "outputs": {
      "textBox": "[basics('demoTextBox')]"
    }
  }
}

后续步骤