你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。
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）。- 如果 设置为 true，则文本框必须包含值才能成功通过验证 。 默认值为
false。 validations属性是一个数组，可在其中添加条件，用于检查文本框中提供的值。regex属性是一个 JavaScript 正则表达式模式。 在已指定的情况下，此文本框的值必须与模式匹配才能成功通过验证。 默认值为null。 有关正则表达式语法的详细信息，请参阅正则表达式快速参考。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 函数。