AngularJS UI选择验证

Question

嗨，我正在开发一个AngularJS应用程序，该应用程序具有从远程源选择多个电子邮件地址的字段。我正在为该字段使用Angular UI Select。用户还可以输入一封不存在的有效电子邮件。问题是如何限制用户输入无效的电子邮件。

以下是示例代码片段：

<ui-select multiple tagging tagging-label="('new' email)" ng-model="emails" theme="bootstrap" sortable="true" required>
<ui-select-choices repeat="email in emails track by emailId" refresh="refreshEmailAddresses($select.search)"
refresh-delay="0">
</ui-select-choices>
</ui-select>

Answer 1

在模板中添加以下代码。

<ui-select multiple tagging 
           ng-model="multipleName" 
           ng-change="checkValidMail()" 
           sortable="true" 
           style="width: 263px;" 
           title="Enter Name" 
           on-select="afterSelection($item);" 
           on-remove="afterRemoving($item); checkValidMail();">
   <ui-select-match placeholder="Enter Name...">{{$item | limitTo:25}}
   </ui-select-match>
   <ui-select-choices repeat="personName in multipleName |filter:$select.search">
        {{personName}} 
   </ui-select-choices>
</ui-select>
<span class="c-red" ng-if="errorMail"> You entered a wrong mail id..! </span>
    

在控制器中添加以下代码。

checkValidMail = function() {
     var exp = /^[_a-z0-9]+(.[_a-z0-9]+)*@[a-z0-9-]*.([a-z]{2,4})$/;
     for(var i of $scope.multipleName) {
         if(exp.test(i)) {
             $scope.errorMail = false;
         } else {
             $scope.errorMail = true;
             break;
         }
      }
 }

Answer 2

您可以使用Regex:

$scope.validEmail = /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([^<>()[].,;:s@"]+.)+[^<>()[].,;:s@"]{2,})$/i;

之后，将ngPattern添加到您的模块中，并将其包含在您的指令中：

<ui-select multiple tagging tagging-label="('new' email)" ng-model="emails" theme="bootstrap" sortable="true" ng-pattern="validEmail" required>
  <ui-select-choices repeat="email in emails track by emailId" refresh="refreshEmailAddresses($select.search)"
  refresh-delay="0">
  </ui-select-choices>
</ui-select>

Answer 3

您可以在输入上使用$watch，并在watch中使用regex或其他东西进行验证。也许是这样的事情，希望它能给你指明正确的方向：

  $scope.$watch('multipleDemo.emails', function(n, o) {
    if (!n) {
      return;
    }
    //validation here drop into n
    if (n === expression) {
      $scope.emails.push(n);
    } else {
       var index = $scope.emails.indexOf(n);
       $scope.emails.slice(index,1);
    }
  });