<!DOCTYPE html>
<html ng-app="EmailValidationApp">
<head>
<link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<section class="container">
<div class="row">
<div class="col-xs-12">
<h1>Email Validation</h1>
<table class="table table-striped table-bordered">
<caption>Valid Emails</caption>
<tbody>
<tr>
<th>Email</th>
<th class="text-center">Is Valid?</th>
</tr>
<tr ng-repeat="email in vm.validEmails">
<td>{{email}}</td>
<td class="text-center">{{email | validateEmail}}</td>
</tr>
</tbody>
</table>
<table class="table table-striped table-bordered">
<caption>Invalid Emails</caption>
<tbody>
<tr>
<th>Email</th>
<th class="text-center">Is Valid?</th>
</tr>
<tr ng-repeat="email in vm.invalidEmails">
<td>{{email}}</td>
<td class="text-center">{{email | validateEmail}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</body>
</html>
(function() {
'use strict';
angular
.module('EmailValidationApp', [])
.controller('MainCtrl', function() {
var vm = this;
vm.validEmails = [
'john.smith@example.com',
'feedback@the-site.com.uk',
'客服@买卖.商务',
'サービス@business.com.jp',
'テストmail@こんにちは.net'
];
vm.invalidEmails = [
'no.domain@',
'@no.local-part',
'hyphen.first@-domain.com',
'hyphen.last@domain-.com'
];
})
.constant('emailRegex', /^(?:[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]|[^\u0000-\u007F])+@(?:[a-zA-Z0-9]|[^\u0000-\u007F])(?:(?:[a-zA-Z0-9-]|[^\u0000-\u007F]){0,61}(?:[a-zA-Z0-9]|[^\u0000-\u007F]))?(?:\.(?:[a-zA-Z0-9]|[^\u0000-\u007F])(?:(?:[a-zA-Z0-9-]|[^\u0000-\u007F]){0,61}(?:[a-zA-Z0-9]|[^\u0000-\u007F]))?)*$/)
.factory('validateEmail', function(emailRegex) {
return function(email) {
return emailRegex.test(email);
};
})
.filter('validateEmail', function(validateEmail) {
return function(email) {
return validateEmail(email);
}
});
})();
/* Styles go here */
.table th:first-child {
width: 80%;
}
Example Plunker of https://notetops.wordpress.com/2015/07/13/validating-email-address-in-javascript/