Поделиться через

Элемент пользовательского интерфейса Microsoft.Common.TextBox

  • Статья

Элемент пользовательского интерфейса TextBox можно использовать для добавления неформатированного текста. Элемент представляет собой однострочное поле ввода, но поддерживает многострочный ввод со свойством multiLine.

Пример элемента пользовательского интерфейса

Элемент 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 представляет собой текст справки, который исчезает, когда пользователь начинает редактирование. Если 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. Дополнительные сведения о синтаксисе регулярных выражений см. в статье Краткий справочник по регулярным выражениям.
  • Свойство isValid содержит выражение, результатом вычисления которого является true или false. В выражении вы указываете условие, которое определяет, допустимо ли текстовое поле.
  • Свойство message — это строка, которая отображается, когда значение в текстовом поле не проходит проверку.
  • Можно указать значение для regex, если для required задано значение false. В этом случае, чтобы пройти проверку, значение для текстового поля не требуется. Если указано, оно должно соответствовать шаблону регулярного выражения.

Примеры

Примеры показывают, как использовать однострочное и многострочное текстовые поля.

Одна строка

В следующем примере используется текстовое поле с элементом управления 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')]"
    }
  }
}

Следующие шаги