使用unicode字符的Angular JS电子邮件验证

Angular JS Email Validation with unicode characters

本文关键字：JS 电子邮件 验证 Angular unicode 字符 使用      更新时间：2023-09-26

我有一个应用程序的注册表单，angular js负责对其进行验证。

我遇到了一个问题，Angular js不接受带有撇号的电子邮件地址。"梨'lpeerh.shin@xyz.com"。

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

有没有人遇到这样的问题，我有兴趣知道我的选择，以摆脱这个bug在angularJs。

欢迎任何输入。谢谢!

如果有html5 <input type=email />不是关键，你可以使用<input type=text />和模式验证

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

你可以使用@Andy Joslin在他的回答

中发布的regex
 $scope.EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+('.[a-z0-9-]+)*$/i;

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

你能做的是自己写一个指令来检查它。只需从AngularJS中复制一个，并使用自己的regexp: 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">

我刚刚更新了angular.js文件中的regex(在表达式中添加了" ' ")，它工作了，没有做任何其他更改。

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

为什么返回undefined?

重构函数:

var verificationEmail = function (viewValue) {
  if ((typeof viewValue != "undefined") && viewValue != "") {
    return regex.test(viewValue);
  }
};

Angular不支持在email 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}$/.
相关文章：