Question

与使用ng-pattern和电子邮件正则表达式相比，使用AngularJS内置电子邮件验证是否有任何不足之处？

http://www.w3schools.com/angular/angular_validation.asp

顺便说一句，这是AngularJS电子邮件验证还是使用HTML5验证？

Answer 1

对于网站，您应该只检查@，因为用户可以随时更改您的前端。在您的情况下，您正在使用HTML5验证，这将更好。

来自the link you provided：

使用HTML5类型的电子邮件指定值必须是电子邮件

但是，您的网络后端可以而且应该进行更严格的检查，以确保您在使用之前确实收到了真实的电子邮件地址。

Answer 2

HTML5电子邮件验证和角度ng-pattern之间存在一些差异。通常，它取决于您使用的模式类型。以下是一个简单的例子 1. HTML5
e@e is valid电子邮件与html5，而
2. ng-pattern ，如代码
所示 e@e is invalid电子邮件地址，您可以自定义，您可以使用不同的ng-pattern来使其有效从上面的两个例子可以看出，当你需要来自用户的严格电子邮件时，ng-pattern是有效的

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.emailAddr = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;
    $scope.submitBtn = function() {
    debugger;
    	console.log($scope.htmlemailModel, $scope.emailForm.htmlemail.$valid);
      console.log($scope.angemailModel, $scope.emailForm.angemail.$valid);
      console.log($scope.emailForm.angemail.$viewValue, $scope.emailForm.angemail.$valid); // this line is just to show you the value even it is invalid
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
    <form name="emailForm" novalidate>
      HTML: <input type="email" name="htmlemail" ng-model="htmlemailModel" required/> <br /> <br />
      Angular: <input type="text" name="angemail" ng-model="angemailModel" ng-pattern="emailAddr" required/> <br /> <br />
      <button type="button" ng-click="submitBtn()">
      Submit
      </button>
    </form>
</body>

ng-pattern为您提供了自定义验证的选项

AngularJS内置电子邮件验证的缺点Vs ng-pattern

2 个答案: