Question

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

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

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

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

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

这是一张表格，显示我期望基于maxSites的工作RegEx匹配的内容：

Input                       | Max | Max 2 | Max 3
foobar                      | yes |  yes  | yes  
foobar,                     | no  |  no   | no  
foobar,                     | no  |  no   | no  
foobar,bizbaz               | no  |  yes  | yes  
foobar, bizbaz1             | no  |  yes  | yes  
foobar bizbaz1              | no  |  yes  | yes  
foobar, bizbaz1,            | no  |  no   | no  
foobar, bizbaz1, binbong2   | no  |  no   | yes

有没有办法用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

使用正则表达式限制字段

2 个答案: