正则表达式允许最多 10 位数字，后跟一个逗号和 3 位以上的数字答案

【问题标题】：Regex to allow max 10 digits followed by only one comma and 3 more digits正则表达式允许最多 10 位数字，后跟一个逗号和 3 位以上的数字
【发布时间】：2017-11-15 07:55:05
【问题描述】：

我正在研究一个正则表达式，允许逗号前最多 10 位数字，逗号后最多 3 位数字。

到目前为止，我想出了这个：

^[1-9]{1}[0-9]{1,9}(,[0-9]{0,3})?$.

我将在 javascript 中验证输入。

我正在使用 sap.m.input 控件，并且在实时更改事件中捕获了用户的击键。

以下示例被接受为用户输入：

1234567890,123
4,1
234,45
56457

输入必须始终以自然数开头，并且只能出现逗号。

使用上面提到的正则表达式，我可以避免第一个数字为零，但它没有考虑这个输入值- 1,23。

我在应用程序中添加了以下代码：

var input = oEvent.getSource().getValue();
        var isValid = false;
        var regex = /^[1-9]{1}[0-9]{1,9}(,[0-9]{0,3})?$/;
        isValid = regex.test(input);
        if (isValid == false) {
            //  oEvent.getSource().setValueState("Error");
            input = input.replace(/[^[1-9]{1}[0-9]{1,9}(,[0-9]{0,3})]/g,"");
            oEvent.getSource().setValue(input);
            return;
        }

我还想避免在输入字段中出现空白条目和空格。我想在实时更改事件中用空格替换不需要的字符。截至目前，我无法使用上述代码替换其他字符。

请建议如何形成完美的正则表达式来处理这种情况。

谢谢。

【问题讨论】：

即使没有模型和数据绑定，StepInput 可能对您引导和限制用户输入无效值很有帮助。正则表达式是a powerful tool but should not be overused，特别是如果已经有解决问题的替代方法。

标签： javascript regex input sapui5

【解决方案1】：

^[1-9]\d{0,9}(,\d{0,3})?$

[1-9] - 第一个数字必须是 1-9
\d{0,9} - 在第一个数字之后，可以有 0 - 9 位数字
,\d{0,3} - 逗号后多 3 位
()? - 逗号部分是可选的

在线试用：https://regex101.com/r/YsaXvo/1

【讨论】：

【解决方案2】：

如果你想接受负数，你甚至可以走得更远：

^-?[1-9]\d{0,9}(,\d{0,3})?$

通过接受字符串开头的 -。

最后但同样重要的是，我建议在检查输入的有效性之前使用 trim！用户倾向于在输入内容的末尾甚至开头添加不必要的空格。

祝你好运

【讨论】：

连字符周围的捕获组有什么意义？无论如何，自然数不能是负数，所以甚至没有理由添加-?..

【解决方案3】：

你几乎没问题，除了在昏迷前不允许有 1 个数字，并且从减号开始。

试试这个：

var regex = /^-?[1-9][0-9]{0,9}(,[0-9]{0,3})?$/;

【讨论】：

【解决方案4】：

由于您使用的是 SAPUI5 / OpenUI5，请查看该框架已经提供的功能。例如：建议在您的场景中使用控件StepInput 而不是普通的Input：

它只允许支持十进制值的数字。
它支持min 和max 值。
它会删除不需要的字符，例如空格。
它替换空白条目（使用min 值）。
此外，它还支持简单的步进with keyboard and scroll wheel。

这是一个展示上述标准的示例。 可选地，我们还可以在控件上设置模型并将bind 数据设置为value，以便 UI5 仅在满足某些条件时才处理保存值。为此，我们使用带有相应约束的 Float 类型：

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel",
  "sap/ui/core/Core",
], async (XMLView, JSONModel, Core) => {
  "use strict";

  const control = await XMLView.create({
    definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
      height="100%"
      displayBlock="true">
      <App>
        <Page class="sapUiResponsiveContentPadding" showHeader="false">
          <StepInput xmlns:core="sap.ui.core"
            core:require="{ 'FloatType': 'sap/ui/model/type/Float' }"
            textAlign="Center"
            width="14rem"
            displayValuePrecision="3"
            step="0.1"
            min="1"
            max="9999999999.999"
            value="{
              path: '/data',
              type: 'FloatType',
              constraints: {
                minimum: 1,
                maximum: 9999999999.999
              }
            }"/>
          <ObjectAttribute title="Model data" text="{/data}" />
        </Page>
      </App>
    </mvc:View>`,
    models: new JSONModel({
      "data": 1.0,
    }),
  });

  Core.getMessageManager().registerObject(control, true);
  control.placeAt("content");
}));

<script id="sap-ui-bootstrap"
  src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

我们可以看到，如果值无效（例如“-1.000”），模型不会保存该值。

【讨论】：