電子郵件黑名單和驗證

Question

我是Angular的新手，所以我嘗試進行簡單的黑名單檢查。 目前，我可以使用ng-show顯示和隱藏兩個文本。 如果郵件模式錯誤，則應顯示第一個，如果正確和/或列入黑名單，則應隱藏第一個。

我的問題是我不知道必須如何實施模型。 目前，它由一個復選框模擬。 也許有人暗示。

<div class="controls">
  <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
  <input type="email" id="inputEmail" placeholder="Email" ng-model="email" required>
<div class="hint">
    <h4 name="mailValidator" ng-if="checked" ng-show="true">Invalid Email</h4>
    <h4 name="checkBlacklist" ng-if="!checked" ng-show="true">Email is not allowed</h4>
</div>

這是小提琴演示

Answer 1

如果您使用AngularJS表單驗證，則可以對第一個文本進行驗證

<form name="form" class="css-form" novalidate>
    <div class="controls">
      <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
      <input type="email" id="inputEmail" placeholder="Email" ng-model="email" required>
    </div>
    <div class="hint">
        <h4 name="mailValidator" ng-show="form.uEmail.$error.email && !onBlacklist">Invalid Email</h4>
        <h4 name="checkBlacklist" ng-show="onBlacklist">Email is not allowed</h4>
    </div>
</form>

然后在控制器中您可以監視電子郵件的更改，並將其列入黑名單時將onBlacklist設置為true，希望對您有所幫助

Answer 2

我為您的問題創建了JSFiddle。

JSFiddle

視圖：

<div ng-controller="MyCtrl">
     <input placeholder="Email" ng-model="email" ng-pattern="emailRegExp" ng-class="{ error: !email }" />
     <h4 name="mailValidator" ng-show="!email">Invalid Email</h4>
     <h4 name="checkBlacklist" ng-show="email && inBlackList">Email is not allowed</h4>
</div>

控制器：

function MyCtrl($scope) {
    $scope.inBlackList = false;

    //get from DB in your case
    var bannedEmail = ['qwe@qwe.qwe','qwe1@qwe.qwe','qwe2@qwe.qwe']

    $scope.emailRegExp = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
    $scope.$watch('email', function(newValue) {
       if(newValue){
           if(bannedEmail.indexOf(newValue) > -1) {
               $scope.inBlackList = true;
           }
           else {
               $scope.inBlackList = false;
           }
       }
   });      
}