输入字段无效时无法显示气球弹出答案

【问题标题】：unable to show the balloon pop up when the input fields are not valid输入字段无效时无法显示气球弹出
【发布时间】：2018-12-15 20:59:48
【问题描述】：

我正在尝试使用 bootstrap/angularjs 验证电子邮件地址字段（单个电子邮件/多个电子邮件地址）。我有两个输入字段，它们将单个电子邮件地址作为第一个字段的输入，将单个/多个电子邮件地址作为第二个输入字段的输入。我面临的问题是单个电子邮件输入字段，它正在验证电子邮件地址，但是当我以, 或; 终止时，它显示错误。即使它是单个电子邮件地址输入字段，如果用户不小心输入 , 或 ; 我想接受它。与多个电子邮件字段类似，当用户输入有效的电子邮件 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>

【问题讨论】：

标签： javascript html angularjs twitter-bootstrap

【解决方案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 使其成为有效字符串，即使它以, 或; 结尾

Updated Working Example

【讨论】：

您添加的插件不起作用。请使用您更新的指令找到我更新的 plunker，该指令不起作用（单击提交按钮时未显示任何错误消息：next.plnkr.co/edit/M3qPLqrVUxpNjfsO
@nan 你应该做的是禁用提交按钮，直到表单有效。并且在更改值时仅显示错误消息。对用户来说会更方便。您甚至可以为此目的使用 ng-model-options。这是更新的 plunker：plnkr.co/edit/f66dYZnGaxn01txaMyLk?p=preview