Microsoft.Common.TextBox UI 元素

TextBox 用户界面 (UI) 元素可用于添加无格式文本。 该元素是单行输入字段，但支持使用 multiLine 属性进行多行输入。

UI 示例

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

示例

以下示例演示如何使用单行文本框和多行文本框。

单行

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

在此示例中，当你输入存储帐户名称并退出文本框时，控件会检查该名称是否有效以及是否可用。 如果名称无效或已存在，则将显示一条错误消息。 有效且可用的存储帐户名称将显示在输出中。

{
  "$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": "nameApi",
        "type": "Microsoft.Solutions.ArmApiControl",
        "request": {
          "method": "POST",
          "path": "[concat(subscription().id, '/providers/Microsoft.Storage/checkNameAvailability?api-version=2021-09-01')]",
          "body": {
            "name": "[basics('txtStorageName')]",
            "type": "Microsoft.Storage/storageAccounts"
          }
        }
      },
      {
        "name": "txtStorageName",
        "type": "Microsoft.Common.TextBox",
        "label": "Storage account name",
        "constraints": {
          "validations": [
            {
              "isValid": "[basics('nameApi').nameAvailable]",
              "message": "[basics('nameApi').message]"
            }
          ]
        }
      }
    ],
    "steps": [],
    "outputs": {
      "textBox": "[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')]"
    }
  }
}

后续步骤

• 有关创建 UI 定义的简介，请参阅适合 Azure 托管应用程序的创建体验的 CreateUiDefinition.json。
• 有关 UI 元素中的公用属性的说明，请参阅 CreateUiDefinition 元素。
• 若要详细了解函数，请参阅 CreateUiDefinition 函数。