7

我有一个应用程序的注册表单，Angular js 负责它的验证。

当 Angular js 不接受包含撇号的电子邮件地址时，我遇到了一个问题。“Pear'lpeerh.shin@xyz.com”。

我发现 angularJs 不喜欢电子邮件地址中的 unicode 字符。

有没有其他人遇到过这样的问题，我很想知道我的选择来摆脱 angularJs 中的这个错误。

任何输入表示赞赏。谢谢 ！

4

5 回答 5

17

如果拥有 html5<input type=email />并不重要，您可以使用<input type=text />和模式验证

 <input type="text" ng-model="field" ng-pattern="EMAIL_REGEXP" />

你可以使用@Andy Joslin 在他的回答中发布的正则表达式

 $scope.EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*$/i;
于 2013-05-31T19:00:25.470 回答
11

AngularJS 使用这个正则表达式来测试电子邮件：https ://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L4

您可以做的是编写一个自己检查的指令。只需从 AngularJS 复制一个并使用您自己的正则表达式：https ://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L606-L614

myApp.directive('nanuEmail', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attrs, model) {
      //change this:
      var EMAIL_REGEXP = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
      var emailValidator = function(value) {
      if (!value || EMAIL_REGEXP.test(value)) {
        model.$setValidity('email', true);
        return value;
      } else {
        model.$setValidity('email', false);
        return undefined;
      }
      model.$parsers.push(emailValidator);
      model.$formatters.push(emailValidator);
    }
  };
});

然后你可以这样做：

<input nanu-email ng-model="userEmail">
于 2013-05-31T18:47:07.527 回答
1

我刚刚更新了 angular.js 文件中的正则表达式（在表达式中添加了“ ' ”）并且它工作正常，没有进行任何其他更改。

EMAIL_REGEXP = /^[A-Za-z0-9._%+- ' ]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$/ . 感谢 Vittore，给了我更新 REGEX 的想法。:)

于 2013-06-03T18:26:08.843 回答
0

你为什么返回未定义？

重构函数：

var verificationEmail = function (viewValue) {
  if ((typeof viewValue != "undefined") && viewValue != "") {
    return regex.test(viewValue);
  }
};
于 2014-03-29T19:13:33.387 回答
0

Angular 不支持'电子邮件 ID 中的撇号（）。如果您需要在 Angular 中验证撇号，您需要将正则表达式从以下位置更改：

(/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/)

至：

/^[A-Za-z0-9._%+'-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/.

它将完美地工作。

于 2017-03-03T11:09:25.147 回答