angularjs - Angular ng-pattern 崩溃浏览器

Question

我们有一个用于电子邮件的正则表达式。我们的应用程序继承了正则表达式，所以它可能不是切换它的选项......无论如何，相同的步骤似乎使浏览器中的javascript崩溃。我已经能够在 IE 和 Chrome 中重现，但不能在 Firefox 中重现。这是代码:

var mod = angular.module("myApp", []);

mod.controller("MainCtrl", function ($scope) {
    //Pattern that blows up the browser during ng-pattern
    $scope.emailPattern = /^(?!.*\.{2})([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+([\.][a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*)@((([\-]?[a-zA-Z0-9]){2,}[\.])*(([a-zA-Z0-9][\-]?){1,})+).(([\.]([a-zA-Z0-9][\-]?){2,}([a-zA-Z0-9])*)+)$/;


});

HTML:

<div ng-app="myApp" ng-controller="MainCtrl">
    <form name="emailForm" novalidate>
        <input type="text" ng-model="user.email" name="email" maxlength="80" required ng-pattern="emailPattern">
    </form>
    <br>
    {{user.email}}
</div>

Fiddle here .以下是导致浏览器崩溃的基本步骤:

在文本框中输入一堆字母字符直到它填满(其他输入可能有效，但这是我使用的)。

退格 2 个字符。

点击 首页 键返回到输入的前面。

输入字符: a@

这将始终使 IE 和 Chrome 崩溃。有没有人遇到过这个错误？任何已知的解决方法？

Answer 1

我认为问题在于正则表达式本身。

如果您访问任何正则表达式验证器站点(例如 http://regexpal.com/ )，使用原始表达式，则会在那里发生同样的问题(浏览器卡住)。

改变:

$scope.emailPattern = /^(?!.*\.{2})([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+([\.][a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*)@((([\-]?[a-zA-Z0-9]){2,}[\.])*(([a-zA-Z0-9][\-]?){1,})+).(([\.]([a-zA-Z0-9][\-]?){2,}([a-zA-Z0-9])*)+)$/;

到:

$scope.emailPattern = /^(?!.*\.{2})([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+([\.][a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*)@((([\-]?[a-zA-Z0-9]){2,}[\.])*(([a-zA-Z0-9][\-]?))+).(([\.]([a-zA-Z0-9][\-]?){2,}([a-zA-Z0-9])*)+)$/;