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)。 例如，預設值可以包含 \r\n 以指定歸位字元和換行字元 （CRLF）。
• 如果 constraints.required 設為 true，則文字輸入框必須有可成功驗證的值。 預設值是 false。
• validations 屬性是陣列，您可以在其中加入條件來檢查文字輸入框中提供的值。
• regex 屬性是 JavaScript 規則運算式模式。 如果指定，文字方塊的值就必須符合模式，才能順利通過驗證。 預設值是 null。 如需 RegEx 語法的詳細資訊，請參閱規則運算式快速參照。
• 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 函式。