如何使用 angularjs 验证 html 中 span 元素的模式？答案

【问题标题】：how can i validate the pattern of a span element in html using angularjs?如何使用 angularjs 验证 html 中 span 元素的模式？
【发布时间】：2021-08-22 11:02:40
【问题描述】：

我是 angularjs 的新手，我在验证我的 span 内容时遇到了困难。我无法在下面的代码中验证邮件。我正在使用自定义指令来创建电子邮件芯片，我需要将芯片颜色更改为错误的格式。我尝试了 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();
              }
            };
          },
        };
      },
    ]);

【问题讨论】：

标签： javascript html angularjs directive email-validation

【解决方案1】：

请参考以下代码，如果解决了您的问题，请告诉我

<!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

【讨论】：

谢谢。但我想检查一个跨度元素是否是电子邮件格式..我可以不使用表单就这样做