输入模式正则表达式验证，JS添加逗号，允许用户添加逗号并验证

Question

我搜索了很多，我几乎可以单独完成所有任务，但一起... 所以，我输入了 type="text"

<input type="text" pattern="^[1-9]|^[-,0-9]{2,18}$" class="form-control commas-decimal-points" id="tot-uniques-display-<%%= model.adPartnerId %>" placeholder="eg. 100,000,000" name='network_data[display][total_monthly_uniques]' value="<%%= model.display.total_monthly_uniques  %>"/>

pattern="^[1-9]|^[-,0-9]{2,18}$"

此模式只对数字有效，不超过14位，不允许从“0”开始。

我必须允许用户输入数字，它必须从> 0开始并且不超过14个数字，用户可以在特殊地方输入逗号OR如果用户只输入数字我必须通过 JS 添加逗号。如果用户自己输入逗号，我必须根据模式对其进行验证。

1
10
100
1,000
10,000
100,000
1,000,000
10,000,000
100,000,000
1,000,000,000
10,000,000,000
100,000,000,000
1,000,000,000,000
10,000,000,000,000

我的 backbone 视图中有这样的功能：

inputEventOnInput: function (e) {
    var me = this;

    // skip for arrow keys
    if(event.which >= 37 && event.which <= 40) return;

    // format number
    me.$el.find(':input[type="text"]').val(function(index, value) {
      return value
        .replace(/\D/g, "")
        .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    });

  },

它在 "input" 事件上触发，并在用户仅输入数字时添加逗号。如果用户输入 10000000，它将被输入中的 10,000,000 替换。

我如何定义使用输入逗号，然后根据模式验证这个逗号，然后触发 HTML5 :invalid event on wrong comma?

Answer 1

您可以使用以下内容来验证逗号是否符合模式：

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

见DEMO

您可以使用此 Code on JSFiddle 来处理所有三种情况。

输入模式正则表达式验证，JS添加逗号，允许用户添加逗号并验证

Input pattern regexp validation, JS add commas, allow user add commas and validate it

html

javascript

regex

validation

backbone.js