Aracılığıyla paylaş

Microsoft.Common.TextBox kullanıcı arabirimi öğesi

  • Makale

Kullanıcı TextBox arabirimi (UI) öğesi biçimlendirilmemiş metin eklemek için kullanılabilir. öğesi tek satırlı bir giriş alanıdır, ancak özelliğiyle multiLine çok satırlı girişi destekler.

Kullanıcı arabirimi örneği

öğesi tek TextBox satırlı veya çok satırlı bir metin kutusu kullanır.

Tek satırlı metin kutusu örneği.

Microsoft.Common.TextBox kullanıcı arabirimi öğesini kullanan tek satırlı metin kutusunun ekran görüntüsü.

Çok satırlı metin kutusu örneği.

Microsoft.Common.TextBox kullanıcı arabirimi öğesini kullanan çok satırlı metin kutusunun ekran görüntüsü.

Şema

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

Örnek çıktı

"contoso123"

Açıklamalar

  • Fare imleci bilgi simgesinin toolTip üzerine getirildiğinde öğe hakkında metin görüntülemek için özelliğini kullanın.
  • özelliği placeholder , kullanıcı düzenlemeye başladığında kaybolan yardım metnidir. placeholder ve defaultValue her ikisi de tanımlanmışsa, defaultValue öncelik alır ve gösterilir.
  • multiLine özelliği boole veya true falseşeklindedir. Çok satırlı metin kutusu kullanmak için özelliğini olarak trueayarlayın. Çok satırlı bir metin kutusu gerekmiyorsa özelliğini olarak false ayarlayın veya özelliği dışlayın. Yeni satırlar için, satır akışı için JSON çıkışı gösterilir \n . Çok satırlı metin kutusu, satır başı (CR) ve \n satır beslemesi (LF) için kabul eder\r. Örneğin, varsayılan değer satır başı ve satır beslemesini (CRLF) belirtmek için içerebilir \r\n .
  • olarak ayarlanırsa constraints.required true, metin kutusunun başarıyla doğrulanabilmesi için bir değere sahip olması gerekir. Varsayılan değer şudur: false.
  • validations özelliği, metin kutusunda sağlanan değeri denetlemek için koşullar eklediğiniz bir dizidir.
  • regex özelliği bir JavaScript normal ifade desenidir. Belirtilirse, başarılı bir şekilde doğrulamak için metin kutusunun değeri desenle eşleşmelidir. Varsayılan değer şudur: null. Regex söz dizimi hakkında daha fazla bilgi için bkz . Normal ifade hızlı başvurusu.
  • özelliği veya isValid falseolarak değerlendirilen true bir ifade içerir. İfade içinde, metin kutusunun geçerli olup olmadığını belirleyen koşulu tanımlarsınız.
  • message özelliği, metin kutusunun değeri doğrulamada başarısız olduğunda görüntülenecek bir dizedir.
  • olarak ayarlandığında falseiçin regex required bir değer belirtebilirsiniz. Bu senaryoda, metin kutusunun başarıyla doğrulanması için bir değer gerekli değildir. Biri belirtilirse, normal ifade deseni ile eşleşmesi gerekir.

Örnekler

Örneklerde tek satırlı metin kutusu ve çok satırlı metin kutusunun nasıl kullanılacağı gösterilmektedir.

Tek satırlı

Aşağıdaki örnek, kaynak adının kullanılabilirliğini denetlemek için Microsoft.Solutions.ArmApiControl denetimine sahip bir metin kutusu kullanır.

Bu örnekte, bir depolama hesabı adı girip metin kutusundan çıktığınızda, denetim adın geçerli olup olmadığını ve kullanılabilir olup olmadığını denetler. Ad geçersizse veya zaten varsa, bir hata iletisi görüntülenir. Çıktıda geçerli ve kullanılabilir bir depolama hesabı adı gösterilir.

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

Çok satırlı

Bu örnek, yer tutucu metin içeren çok satırlı bir metin kutusu oluşturmak için özelliğini kullanır 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')]"
    }
  }
}

Sonraki adımlar