輸入字段無效時，無法顯示氣球彈出

Question

我正在嘗試使用bootstrap / angularjs驗證電子郵件地址字段（單個電子郵件/多個電子郵件地址）。 我有兩個輸入字段，其中第一個字段使用單個電子郵件地址作為輸入，第二個輸入字段使用單個/多個電子郵件地址作為輸入。 問題我現在面臨是單一的電子郵件輸入字段，它驗證的電子郵件地址，但是當我終止,或; 它顯示錯誤。 如果用戶不小心輸入，即使是單個電子郵件地址輸入字段,也可以; 我想接受it.Similarly與多個電子郵件領域也當用戶輸入有效的電子郵件ID和終止,或; 它沒有顯示為有效的電子郵件地址。 另一個問題是，如果用戶輸入的電子郵件地址無效，當用戶單擊“提交”按鈕時，我想顯示氣球彈出的錯誤消息。

演示不起作用： http : //plnkr.co/edit/stBbGYrod6zDqA0vVIMD?p=preview

工作演示： http : //next.plnkr.co/edit/X6ONPdgLAZEcUXhy

另外，在上述工作演示，則顯示錯誤消息，如果電子郵件地址是無效的，其是正確的，但如果與終止,或; 它顯示錯誤，並且輸入字段的背景為紅色。

樣本html：

<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head> 

  <body ng-app="myApp">
  <form name="shareSelectionForm"> 
    <div ng-controller="myCtrl">
      <div>
      Single email:  <input type="email" class="form-control" required name="singleRecipientEmail" ng-model="singleRecipientEmail">
     <div ng-show="shareSelectionForm.$submitted || shareSelectionForm.singleRecipientEmail.$touched">
         <p class="error-mesg" ng-show="shareSelectionForm.singleRecipientEmail.$error.required">Email Address is not valid</p>
     </div>
    </div>
   <div>
     Single/Multiple email:  <input type="text" class="form-control" multiple-emails required name="recipientEmail" ng-model="recipientEmail">
   <div ng-show="shareSelectionForm.$submitted || shareSelectionForm.recipientEmail.$touched">
         <p class="error-mesg" ng-show="shareSelectionForm.recipientEmail.$error.required">Single/Multiple Email Address is not valid</p>
     </div>
      </div>

 <button class="btn btn-primary" type="button" ng-click="submitForm()">Submit</button>

    </div>  
    </form>
  </body>

</html>

Answer 1

更新它通過兩種分裂多封電子郵件后，用正則表達式檢查您的自定義指令代碼,或; 。

app.directive('multipleEmails', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        var emails = viewValue.split(/[ ,;]+/);
        var re = /\S+@\S+\.\S+/;
        var validityArr = emails.map(function(str) {
          if (str.trim()) {
            return re.test(str.trim());
          } else {
            return true;
          }
        });
        console.log(emails, validityArr);
        var atLeastOneInvalid = false;
        angular.forEach(validityArr, function(value) {
          if (value === false)
            atLeastOneInvalid = true;
        });
        if (!atLeastOneInvalid) {
          ctrl.$setValidity('multipleEmails', true);
          return viewValue;
        } else {
          ctrl.$setValidity('multipleEmails', false);
          return undefined;
        }

      });
    }
  };
});

在這里，我只更新了validityArr以使其成為有效的字符串，即使它以,或;結尾;

更新的工作示例

輸入字段無效時，無法顯示氣球彈出

問題描述

1 個解決方案

解決方案1
0 2018-07-07 15:59:32

輸入字段無效時，無法顯示氣球彈出

問題描述

1 個解決方案

解決方案1 0 2018-07-07 15:59:32

解決方案1
0 2018-07-07 15:59:32