使用unicode字符进行Angular JS Email验证

Question

我有一个应用程序的注册表单,angular js负责其验证.

当Angular js没有接受其中包含撇号的电子邮件地址时,我遇到了一个问题."Pear'lpeerh.shin@xyz.com".

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

有没有其他人遇到过这样的问题,我有兴趣知道我可以选择在angularJs中摆脱这个错误.

任何投入都表示赞赏.谢谢 !

Answer 1

如果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;

Answer 2

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">