search

Home  >  Q&A  >  body text

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

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

为情所困为情所困2744 days ago854

reply all(2)I'll reply

  • 滿天的星座

    滿天的星座2017-05-15 17:14:28

    You can make something similar to tag-input. When entering, verify whether the input content meets the email format standard. If the verification is successful, it will be added. If the verification fails, a detailed message will be prompted. This can avoid the user having to input all the input content. Verify again to ensure that the entered content is the correct one after verification


    Press Enter to enter

    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>

    Directive

    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
            });
          }
        };
      }

    reply
    0
  • 阿神

    阿神2017-05-15 17:14:28

    Thank you very much @crazy4x for the answer:
    Later I found a new method myself:

    Goal: When entering multiple email addresses into the input box, check whether the N email addresses are correct and give a prompt
    Method:

    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:(Angular)

       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);
                }
            };
        }]);
    

    reply
    0
  • Cancelreply