代码之家 › 专栏 › 技术社区 › THI

匹配两个文本字段的输入

sapui5 regex

THI · 技术社区 · 6 年前

场景:我有两个输入字段。其中一个将接受由用户决定的形式的输入。另一个字段应与第一个字段中定义的格式匹配。例如,如果用户输入如下格式 anan-xxx 在第一个字段中..:

允许用户输入 b1c1-!*> 在另一个领域。
使用者不能进来 1b1c->!* 因为第一个字符应该是字母而不是数字。

因此,第一个字段将定义 a (字母表), n (数字)、占位符和 x (任何字符)。

在UI5中执行此操作的简单方法是什么?我读到了一些与掩码输入相关的内容,但我不确定如何实现它。

1 回复 | 直到 6 年前

Boghyon Hoffmann 6 年前

正如您已经猜到的,控件 sap.m.MaskInput 可以用于这种用例。

下面是一个演示:

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel",
], (XMLView, JSONModel) => XMLView.create({
  definition: `<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:form="sap.ui.layout.form"
    xmlns="sap.m"
    height="100%"
  >
    <App>
      <form:SimpleForm
        editable="true"
        layout="ResponsiveGridLayout"
      >
        <Label text="Mask"/>
        <Input
          value="{
            path: '/maskValue',
            type: 'sap.ui.model.type.String',
            constraints: {
              search: '^$|^[-9ax]+$'
            }
          }"
          placeholder="Example: a9a9-xxx (case sensitive)"
          required="true"
        />
        <Label
          text="Masked Input"
          displayOnly="{= !%{/maskValue}}"
        />
        <MaskInput
          mask="{/maskValue}"
          editable="{= !!%{/maskValue}}"
        >
          <rules>
            <MaskInputRule
              maskFormatSymbol="x"
              regex="[^_]"
            />
          </rules>
        </MaskInput>
      </form:SimpleForm>
    </App>
  </mvc:View>`,
  models: {
    undefined: new JSONModel(),
  },
}).then(view => {
  const msgMgr = sap.ui.getCore().getMessageManager();
  msgMgr.registerObject(view.placeAt("content"), true);
})));

<script>
  window["sap-ui-config"] = {
    libs: "sap.ui.core, sap.m, sap.ui.layout",
    preload: "async",
    theme: "sap_belize",
    compatVersion: "edge",
    async: true,
    "xx-waitForTheme": true,
    "xx-xml-processing": "sequential",
    "xx-async": true,
  };
</script>
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

MaskInput有一个名为 <rules> 正在等待 N - MaskInputRules 。

液m、马斯金普特 contains already two default rules :
- "9" 对于 /[0-9]/
- "a" 对于 /[a-zA-Z]/
添加了其他规则: "x" 对于除违约占位符符号( _ )。相应的正则表达式为 /[^_]/ 。

有关更多参考,请参阅 "Writing a regular expression pattern" 。

(可选)仅当第一个输入将其值成功传递给模型时,才可以在第二个输入中应用掩码。为此,可以通过字符串验证条目 type 使用 search 约束正则表达式 ^$|^[-9ax]+$ 允许..:

^$ :空字符串
| :或
^[-9ax]+$ :从一开始( ^ )直到最后( +$ ),仅限 - ,则, 9 ,则, a 或 x 。

最后,让框架处理 UI Messages 和ValueState,以使任何无效输入对用户可见。