Angularjs 如何使用一个输入控件应用多个ng模式

我正在尝试使用Angularjs验证文本框中的邮政编码和电话号码。但它不起作用

 <input type="text" class="form-control errorfields" id="postalCode"
 name="postalCode" ng-model="postalCode" 
 ng-pattern="/(^(\d{5}(-\d{4})?|[A-CEGHJ-NPRSTVXY]\d[A-CEGHJ-NPRSTV-Z]
  ?\d[A-CEGHJ-NPRSTV-Z]\d)$)||(^[0-9])/"  required>

---

我认为您需要在输入内容周围包装一个ng表单。然后你可以使用

[formName].postalCode.$error

请参见以下答案：

您可以从范围中添加一个函数，该函数根据验证测试返回true或false。下面是一些代码供您查看。有关更多信息，请参见答案：

控制器：

$scope.postalCodeValidation = (function() {
    var regexp = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
    return {
        test: function(value) {
            return regexp.test(value);
        }
    };
})();

<input type="text" class="form-control errorfields" id="postalCode"
 name="postalCode" ng-model="postalCode" 
 ng-pattern="postalCodeValidation "  required>

HTML：

$scope.postalCodeValidation = (function() {
    var regexp = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
    return {
        test: function(value) {
            return regexp.test(value);
        }
    };
})();

<input type="text" class="form-control errorfields" id="postalCode"
 name="postalCode" ng-model="postalCode" 
 ng-pattern="postalCodeValidation "  required>

---

您的正则表达式有两个| |，而不是一个，这破坏了正则表达式验证子句

---

我把它粘贴到（）上，它说char会破坏它。

首先，正如mico所指出的，在正则表达式语法中使用双管道是无效的，会破坏表达式

其次，ng模式只能验证每个输入的一个模式。如果您需要它来验证或，您将需要从两条路径中选择一条，创建一个自定义指令，或者向控制器添加一些逻辑，以确定我们应该检查哪个表达式，并使用数据绑定将其传递到ng模式。在角度世界中，这是一种不好的做法，因此最好的办法是制定一个指令。

编辑：这只适用于以

^

和

$

元字符结尾的正则表达式

和我的许多回答一样，我参加这个聚会已经迟到了。这个问题让我走上了正确的道路，但给出的答案都不足以做出最终的解决方案

这是我最近读了这篇文章后写的一篇文章，它没有完全回答我的问题，这让我的代码审阅者惊呼，“这是WTF吗？！”然后他按下了合并按钮

我的问题是我有一个表单输入，我想根据纬度或经度正则表达式接受和验证它。我想匹配DMS、DDM和DD样式的输入。我本可以编写一个巨大的表达式，但我还需要在组件级别测试输入，以确定用户输入的类型，并将其转换为DD。lat/long的表达式将使这个答案更加复杂，因此我使用的是我认为原始作者的意图

如果您对lat/long表达式感兴趣，这里有一个要点：

这是我为这个练习重写的代码，我从angular中抽象了它，使它更易于访问，因为它可以用于其他目的

看起来您接受了：北美邮政编码或英国邮政编码或以0-9开头的内容

充实一下正则表达式，我自己还没有很好地测试过，所以你的里程数可能会有所不同。在我看来，这就是需求的样子，它只是示例代码，所以3年多之后，这其实并不重要

 N.America Zip or Zip+4 (from sample above)
     ^(\d{5}(-\d{4})?$
 UK Zip Code (from wikipedia)
     ^([A-Za-z][A-Ha-hJ-Yj-y]?[0-9][A-Za-z0-9]? ?[0-9][A-Za-z]{2}|[Gg][Ii][Rr] ?0[Aa]{2})$
 N.America Phone Number (from RegExLib.com)
    ^[2-9]\d{2}-\d{3}-\d{4}$
 UK Phone Number (from RegExLib.com)
    ^(\s*\(?0\d{4}\)?\s*\d{6}\s*)|(\s*\(?0\d{3}\)?\s*\d{3}\s*\d{4}\s*)$

在一个对象中

const expressions = {
    naZip: /^\d{5}(-\d{4})?$/,
    ukZip: /^([A-Za-z][A-Ha-hJ-Yj-y]?[0-9][A-Za-z0-9]? ?[0-9][A-Za-z]{2}|[Gg][Ii][Rr] ?0[Aa]{2})$/,
    naPhone: /^[2-9]\d{2}-\d{3}-\d{4}$/,
    ukPhone: /^(\s*\(?0\d{4}\)?\s*\d{6}\s*)|(\s*\(?0\d{3}\)?\s*\d{3}\s*\d{4}\s*)$/
 };

现在的问题是ng模式只接受一个正则表达式，但我有四个正则表达式。我想将它们保留为四种不同的东西，以便在我的组件中，我可以测试出用户输入的是哪一种，并根据它执行不同的操作

这看起来像垃圾，但它工作得很好

 const combinedExpression = new RegExp(`^(${_.map(expressions, exp => `(${exp.toString().replace(/^\/\^(.+?)\$\/$/,'$1')})`).join('|')})$`);

当然，从这里您可以将其添加到您的模型并设置ng模式

我将尝试用几种不同的方式解释这一点…

下面是它正在做的工作的分解

 new RegExp(`^(${_.map(expressions, exp => `(${exp.toString().replace(/^\/\^(.+?)\$\//g,'$1')})`).join('|')})$`);
 ^          ^^^^ ^                  ^      ^ ^ ^              ^                                ^  ^          ^^
 |          |||| |                  |      | | |              |                                |  |          ||
 |          |||| |                  |      | | |              |                                |  |          |+- end of the 1st template literal
 |          |||| |                  |      | | |              |                                |  |          +- end the expression with $
 |          |||| |                  |      | | |              |                                |  +- join all stringified expressions with a pipe so (a|b|c|d)
 |          |||| |                  |      | | |              |                                +- end of 2nd template literal
 |          |||| |                  |      | | |              +- replace the like /^(\d{5}(-\d{4})?$/ to (\d{5}(-\d{4})?
 |          |||| |                  |      | | +- convert the expression to a string
 |          |||| |                  |      | +- new Expression interpolation
 |          |||| |                  |      +- 2nd templte literal
 |          |||| |                  +- each expression is represented by exp
 |          |||| +- Using lodash map the expressions
 |          |||+- Expression interpolation
 |          ||+- Regex group match, we will be grouping each of the expressions
 |          |+- Regex starts with ^
 |          +- Starting a new template literal
 +- Establish a new combined expression.

进一步澄清

我要做的是将每个表达式转换为字符串，删除起始字符和结束字符，将它们重新组合为一个OR组，然后将整个过程转换为一个庞大的组合正则表达式

进一步澄清

如果这太让人困惑了，我可以看出这是怎么回事

循环遍历每个表达式

将这些值中的每一个转换为一个字符串，删除起始和结束组件，以便将

/^（\d{5}（-\d{4}）$/

转换为

（\d{5}（-\d{4}）

将所有这些元素组合成一个大的或组，这样你就可以得到类似于

（a | b | c | d）

的东西，其中

a、b、c、d是你的每个字符串化表达式

将OR组换行，以

^

开头，以

$

结尾

在一个

新的RegExp

中包装整个内容

进一步澄清，以长话短说的方式

// Instantiate a new empty array
const strings = [];
// Loop the expressions
for (let key in expressions) {
  // Console log to see what we're getting
  console.log('original expression', expressions[key]);
  // assign the current expression
  let stringifiedExp = expressions[key];
  // convert the current expression to a string
      stringifiedExp = stringifiedExp.toString();
  // replace the starting /^ and ending $/ with the contents
      stringifiedExp = stringifiedExp.replace(/^\/\^(.+?)\$\/$/,'$1');
  // Console log to see what we got.
  console.log('stringified expression', stringifiedExp);
  // Push the stringified expression to strings.
  strings.push(stringifiedExp);
}

// Instantiate a new string which we'll build the regex with
let expString  = '^(';
    expString += strings.join('|');
    expString += ')$';

// Console log to see what we've got.
console.log(expString);

// Make a new Regular Expression out of the string
const combinedExpression = new RegExp(expString);

// Console log what we've got
console.log(combinedExpression);

---

是的，因为我想同时应用电话号码和邮政编码验证…基于此，我需要显示错误消息。如果您想使用正则表达式，请使用single |进行验证。在正则表达式中没有double | In模式。非常感谢您，这真的很有帮助。我的问题现在已经解决。再次感谢。在Html中：-控制器中：-$scope.regforPostLandPhone=/（^\（[0-9]{3}）\）？[-.]（[0-9]{3}）[-.]（[0-9]{4}）$）|(^[aabbcceegghhjjkkllmmnnpprrsstvxyyzz]{1}\d{1}[A-Za-z]{1}*\d{1}[A-Za-z]{1}\d{1}$/；angular.js:14525错误：[ngPattern:noregexp]预期

货币验证

是一个RegExp函数（）。我直接在

ng模式

中使用regex。更多详细信息：我不理解不接受regex中的引号的原因。