angular.js - 输入邮箱地址之后， 如何使其自动在末尾添加分号？

Question

1: 我有这样一个需求： 在邮箱输入框里面要输入N个地址， 这N个邮箱之间必须要使用分号隔开才行
2：能否通过angularJS 或者其他方法验证输入的N个邮箱地址是分隔好的， 能够正确发送邮件的？
3：或者能够判断这这些邮箱是否没有被分隔， 然后能让我据此提出提示框信息？
4：或者在输入地址之后自动判断，然后自动加上分号。

Answer 1

Anda boleh membuat sesuatu yang serupa dengan input-tag Apabila memasukkan, sahkan sama ada kandungan input memenuhi standard format e-mel Jika pengesahan berjaya, ia akan ditambahkan Jika pengesahan gagal, mesej ini akan digesa elakkan pengguna perlu memasukkan semua kandungan input Sahkan sekali lagi untuk memastikan kandungan yang dimasukkan adalah betul selepas pengesahan

Tekan enter untuk masuk

HTML

<p class="form-group">
  <p class="form-group">
    <input type="text" tag-input="primary" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" placeholder="Add Tag">
  </p>
</p>

Arahan

angular.module('BlurAdmin.pages.form')
      .directive('tagInput', tagInput);

  /** @ngInject */
  function tagInput() {
    return {
      restrict: 'A',
      link: function( $scope, elem, attr) {
        $(elem).tagsinput({
          tagClass:  'label label-' + attr.tagInput
        });
      }
    };
  }

Answer 2

Terima kasih banyak @crazy4x atas jawapannya:
Kemudian saya temui kaedah baharu sendiri:

Matlamat: Apabila memasukkan berbilang alamat e-mel ke dalam kotak input, semak sama ada N alamat e-mel adalah betul dan berikan gesaan
Kaedah:

HTML:
<form class="form-horizontal" role="form" id="custom_form" name="custom_form" novalidate>

        <p class="form-group">
            <label class="col-sm-2 control-label">email address</label>
            <p class="col-sm-10" ng-class="{'has-error':custom_form.user_email.$invalid&&custom_form.user_email.$dirty}">
                <input multiple-email name="user_email" ng-model="user.email" required class="form-control" placeholder="seperate the multiple mails with "
                /> 验证通过：{{custom_form.user_email.$valid}}
            </p>
        </p>
        <p class="form-group  text-center">
            <input class="btn btn-primary btn-lg" ng-disabled="custom_form.$invalid" type="submit" value="提交" />
        </p>
    </form>
    
    

Js:(Sudut)

   app.directive('multipleEmail', [function () {
        return {
            require: "ngModel",
            link: function (scope, element, attr, ngModel) {
                if (ngModel) {
                    var emailsRegexp =
                        /^([a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*[;；]?)+$/i;
                }
                var customValidator = function (value) {
                    var validity = ngModel.$isEmpty(value) || emailsRegexp.test(value);
                    ngModel.$setValidity("multipleEmail", validity);
                    return validity ? value : undefined;
                };
                ngModel.$formatters.push(customValidator);
                ngModel.$parsers.push(customValidator);
            }
        };
    }]);