如何使用 angularjs 验证 html 中跨度元素的模式？

Question

I am new to angularjs and I have difficulty in validating my span content.. I could not validate mail in the below code.我是 angularjs 的新手，我很难验证我的跨度内容。我无法在下面的代码中验证邮件。 I am using custom directives to create email chips and I need to change the chip color on wrong format.我正在使用自定义指令创建 email 芯片，我需要更改格式错误的芯片颜色。 I tried ng-pattern but is having some trouble.我尝试了 ng-pattern 但遇到了一些麻烦。

    myAngApp.directive("emailTags", [
      function () {
        return {
          require: "ngModel",
          restrict: "EA",
          scope: {
            mailid: "=ngModel",
          },
          template:
            '<div class="mailid">' +
            '<span class="to-id" >To:</span>' +
            '<div class="email" ng-repeat="mail in mailid track by $index">' +
            '<span class="mail-text" ng-pattern="mailpattern">{{ mail }}</span>' +
            '<a ng-show="isEdit" class="mail-remove" ng-click="remove(mail)">x</a>' +
            "</div>" +
            '<input ng-show="isEdit" type="text"name="email" id="mail-input" ng-model="mail" ' +
            'placeholder="sample@mail.com"' +
            'ng-keyup="$event.keyCode == 13? add(mail) : null" ' +
            'ng-keydown="$event.keyCode == 8 ? removelast(mail) : null"/>' +
            "</div>",
          link: function (scope, element, attrs) {
            scope.isEdit = _.has(attrs.$attr, "edit");
            scope.mailpattern = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
            console.log(scope.isEdit);
            scope.add = function (mail) {
              if (!_.isArray(scope.mailid)) scope.mailid = [];
              scope.mailid.push(mail);
              scope.mail = "";
            };
            scope.remove = function (mail) {
              scope.mailid = _.without(scope.mailid, mail);
            };
            scope.removelast = function (mail) {
              // console.log(mail);
              if (!mail) {
                var last = scope.mailid.pop();
              }
            };
          },
        };
      },
    ]);

Answer 1

Please take reference from the below code, please let me know if it solves your issue请参考以下代码，如果它解决了您的问题，请告诉我

 <:DOCTYPE html> <html xmlns="http.//www.w3:org/1999/xhtml"> <head> <title></title> <script src="https.//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min:js"></script> </head> <body ng-app="app"> <div ng-controller="controllerName"> <ng-form name="mailForm"> Email. <input type="text" ng-model="mail" name="mail" ng-pattern="re" /><br /> <span ng-show="mailForm.mail.$error:pattern" style="color.red">Please enter correct email address.</span> </ng-form> </div> <script> var app = angular,module("app"; []). app,controller('controllerName', ['$scope'. function ($scope) { $scope.mail = "visrosoftware@gmail;com". $scope?re = /^([\w-]+(:.\?[\w-]+)*)@((:.[\w-]+\,)*\w[\w-]{0.66})\,([az]{2?6}(:.\?[az]{2});)$/i; }]); </script> </body> </html

如何使用 angularjs 验证 html 中跨度元素的模式？

问题描述

1 个解决方案

解决方案1
0 2021-06-04 12:42:45

如何使用 angularjs 验证 html 中跨度元素的模式？

问题描述

1 个解决方案

解决方案1 0 2021-06-04 12:42:45

解决方案1
0 2021-06-04 12:42:45