共用方式為


Microsoft.Common.TextBox UI 元素

TextBox 使用者介面 (UI) 元素可用來新增未格式化的文字。 該元素是單行輸入欄位,但支援具有 multiLine 屬性的多行輸入。

UI 範例

TextBox 元素使用單行或多行的文字輸入框。

單行文字方塊的範例。

使用 Microsoft.Common.TextBox UI 元素的單行文本框螢幕快照。

多行文字方塊的範例。

使用 Microsoft.Common.TextBox UI 元素的多行文本框螢幕快照。

結構描述

{
  "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)。
  • 如果 constraints.required 設為 true,則文字輸入框必須有可成功驗證的值。 預設值是 false
  • validations 屬性是陣列,您可以在其中加入條件來檢查文字輸入框中提供的值。
  • regex 屬性是 JavaScript 規則運算式模式。 如果指定,文字方塊的值就必須符合模式,才能順利通過驗證。 預設值是 null。 如需 RegEx 語法的詳細資訊,請參閱規則運算式快速參照
  • isValid 屬性包含評估為 truefalse 的運算式。 在運算式中,您可以定義條件來判斷文字輸入框是否有效。
  • 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')]"
    }
  }
}

下一步