如何使用angularjs验证html中span元素的模式?

xmd2e60i  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(170)

我是angularjs的新手,很难验证我的span内容。。我无法在下面的代码中验证邮件。我使用自定义指令创建电子邮件芯片,我需要更改错误格式的芯片颜色。我尝试了ng模式,但遇到了一些问题。

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();
              }
            };
          },
        };
      },
    ]);
5uzkadbs

5uzkadbs1#

请参考下面的代码,如果它解决了您的问题,请告诉我

<!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})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    }]);
</script>
</body>
</html

相关问题