Udostępnij za pośrednictwem

Microsoft.Common.TextBox UI, element

  • Artykuł

Za TextBox pomocą elementu interfejsu użytkownika można dodać niesformatowany tekst. Element jest jednowierszowym polem wejściowym, ale obsługuje wprowadzanie wielowierszowe z właściwością multiLine .

Przykład interfejsu użytkownika

Element TextBox używa jednowierszowego lub wielowierszowego pola tekstowego.

Przykład jednowierszowego pola tekstowego.

Zrzut ekranu przedstawiający jednowierszowe pole tekstowe przy użyciu elementu Microsoft.Common.TextBox UI.

Przykład pola tekstowego z wieloma wierszami.

Zrzut ekranu przedstawiający wielowierszowe pole tekstowe używające elementu Microsoft.Common.TextBox UI.

Schemat

{
  "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
}

Przykładowe dane wyjściowe

"contoso123"

Uwagi

  • toolTip Użyj właściwości , aby wyświetlić tekst dotyczący elementu, gdy kursor myszy zostanie zatrzymany na symbolu informacji.
  • Właściwość placeholder jest tekstem pomocy, który zniknie po rozpoczęciu edycji przez użytkownika. placeholder Jeśli wartości i defaultValue są zdefiniowane, pierwszeństwo defaultValue ma wartość i jest wyświetlana.
  • Właściwość multiLine jest wartością logiczną true lub false. Aby użyć wielowierszowego pola tekstowego, ustaw właściwość na truewartość . Jeśli nie jest potrzebne wielowierszowe pole tekstowe, ustaw właściwość na false lub wyklucz właściwość . W przypadku nowych wierszy dane wyjściowe JSON są wyświetlane \n dla kanału informacyjnego wiersza. Wielowierszowe pole tekstowe akceptuje \r zwrot karetki (CR) i \n źródło danych liniowych (LF). Na przykład wartość domyślna może obejmować \r\n określenie powrotu karetki i zestawienia wiersza (CRLF).
  • Jeśli constraints.required jest ustawiona wartość true, pole tekstowe musi mieć wartość do pomyślnego zweryfikowania. Domyślna wartość to false.
  • Właściwość to tablica validations , w której dodawane są warunki sprawdzania wartości podanej w polu tekstowym.
  • Właściwość regex jest wzorcem wyrażenia regularnego języka JavaScript. Jeśli zostanie określona, wartość pola tekstowego musi być zgodna ze wzorcem w celu pomyślnego zweryfikowania. Domyślna wartość to null. Aby uzyskać więcej informacji na temat składni wyrażeń regularnych, zobacz Skrócona dokumentacja wyrażeń regularnych.
  • Właściwość isValid zawiera wyrażenie, które daje wartość lub true false. W wyrażeniu zdefiniujesz warunek określający, czy pole tekstowe jest prawidłowe.
  • Właściwość message jest ciągiem, który ma być wyświetlany, gdy sprawdzanie poprawności wartości pola tekstowego zakończy się niepowodzeniem.
  • Istnieje możliwość określenia wartości dla regex parametru , gdy required jest ustawiona wartość false. W tym scenariuszu wartość nie jest wymagana, aby pole tekstowe zostało pomyślnie zweryfikowane. Jeśli został określony, musi być zgodny ze wzorcem wyrażenia regularnego.

Przykłady

W przykładach pokazano, jak używać jednowierszowego pola tekstowego i pola tekstowego z wieloma wierszami.

Jednowierszowe

W poniższym przykładzie użyto pola tekstowego z kontrolką Microsoft.Solutions.ArmApiControl , aby sprawdzić dostępność nazwy zasobu.

W tym przykładzie po wprowadzeniu nazwy konta magazynu i wyjściu z pola tekstowego kontrolka sprawdza, czy nazwa jest prawidłowa i czy jest dostępna. Jeśli nazwa jest nieprawidłowa lub już istnieje, zostanie wyświetlony komunikat o błędzie. Nazwa konta magazynu, która jest prawidłowa i dostępna, jest wyświetlana w danych wyjściowych.

{
  "$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')]"
    }
  }
}

Wiele linii

W tym przykładzie użyto multiLine właściwości do utworzenia wielowierszowego pola tekstowego z tekstem zastępczym.

{
  "$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')]"
    }
  }
}

Następne kroki