使用正则表达式限制字段中的帐户 ID 输入

Question

我在使用 Angular 1.6 的网站上有一个表单，其中一个字段允许用户输入应执行操作的帐户 ID。 （实际上有几种形式都由同一个控制器驱动。）

要求用户用任何非字母数字字符分隔 ID。

但是，在这些表单的某些实例中，我需要限制可以指定的 ID 数量。 （所有 ID 都符合 [a-z0-9] 模式。）我已经接近了使用以下 RegEx 模式和 ng-pattern 所需的内容。正则表达式存储在 app.js 中的 var 中，并且在 HTML 中引用了 var：

new RegExp(`^(?:(?=([a-z0-9]+))\\1[^a-zA-Z0-9]*){1,${maxSites}}$`);

不幸的是，这也会匹配帐户 ID 后的逗号、空格等。例如，我的 RegEx 不应该匹配 foobar,（“foobar”后跟逗号和空格）。

这是一个表格，显示了我期望基于maxSites 的正则表达式匹配：

输入 |最大 |最大 2 |最多 3 个 吧台 |是的 |是的 |是的 富吧，|没有 |没有 |不 富吧，|没有 |没有 |不 foob​​ar,bizbaz |没有 |是的 |是的 foob​​ar, bizbaz1 |没有 |是的 |是的 foob​​ar bizbaz1 |没有 |是的 |是的 foob​​ar, bizbaz1, |没有 |没有 |不 foob​​ar, bizbaz1, binbong2 |没有 |没有 |是的

有没有办法用 RegExp 做到这一点？

Answer 1

这是我想出的。 ^([a-z0-9]+){1}(,[a-z0-9]+){0,(MAX-1)} 这个站点https://regexr.com/ 可以让你测试出你想测试的字符串，你可以看看它是否匹配。这个想法是第一组不能有逗号，只能有一个字母数字字符串。第二组首先包含逗号，因此您不能有尾随逗号，并且可以重复 0 到 MAX-1。我希望这会有所帮助。

Answer 2

除非您有其他更令人信服的理由来使用正则表达式，否则我更喜欢使用自定义验证函数来验证它。看起来您确实在尝试拆分字符串，然后验证（非空）元素的数量小于或等于一个数字。这是使用string.split 的好时机，也是使用正则表达式的坏时机。这是一个简单的函数，可以验证字符串的形式：

function isValidAction(str, max) {
    if (!str || !max)
        return false;

    //split the string by non-alphanumeric
    var actions = str.split(/[^a-zA-Z\d]/);

    //validate length
    var valid = actions.length <= max;
    //validate every element has non-empty content
    valid = valid && actions.every(function(a) {
        return a.length > 0;
    });
    return valid;
}

然后，只需将其手动连接到 ng-change 并使用 form.element.$setValidity() 之类的东西来手动验证您的自定义逻辑。

Demo on Plunker