Angular ng-pattern崩溃浏览器

时间:2014-03-26 20:18:29

标签: angularjs

我们有一个用于电子邮件的正则表达式。我们的应用程序继承了正则表达式,所以它可能不是一个选项来切换它...无论如何,同样的一组步骤似乎会使浏览器中的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。以下是导致浏览器崩溃的基本步骤:

  1. 在文本框中键入一堆字母字符,直到它已满(其他输入可能有效,但这就是我所使用的)。
  2. Backspace 2个字符。
  3. 点击主页键返回输入的前面。
  4. 输入字符: a @
  5. 这将使IE和Chrome始终崩溃。以前有人遇到过这个bug吗?任何已知的解决方法?

1 个答案:

答案 0 :(得分:5)

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

如果您使用原始表达式访问任何正则表达式验证程序站点(如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])*)+)$/;