匹配两个文本字段的输入

时间:2018-04-30 00:50:43

标签: regex sapui5

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

  • 允许用户在其他字段中输入b1c1-!*>
  • 用户无法输入1b1c->!*,因为第一个字符应该是字母而不是数字。

因此,第一个字段将定义 a (字母表), n (数字),占位符和<的格式定义em> x (任何字符)。

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

1 个答案:

答案 0 :(得分:0)

正如您已经猜到的,控件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

  • sap.m.MaskInput contains already two default rules
      {li> "9" /[0-9]/ {li> "a" /[a-zA-Z]/
  • 默认占位符("x")之外的任何字符添加了附加规则:_。相应的正则表达式为/[^_]/

如需进一步参考,请查看"Writing a regular expression pattern"

或者,只有当第一个输入已成功将其值传递给模型时,才可以在第二个输入中应用蒙版。为此,您可以通过字符串type使用search约束正则表达式^$|^[-9ax]+$验证条目,该条件允许..:

  • ^$:空字符串
  • |:或
  • ^[-9ax]+$:从头开始(^)到结束(+$),仅-9ax

最后,让框架处理UI Messages和ValueState,以便向用户显示任何无效输入。