Javascript 使用angularjs的电话格式自定义指令

我正在尝试使用angularjs为美国电话号码编写自定义指令，需要将字段的数据类型保留为整数

如果用户输入一个有效的电话号码（正好是10个号码，即123456780），则当用户移动到下一个控件时，输入应分为3个区块，即123-456-7890。否则，我应显示错误消息“无效号码”

只有数字！
只有精确的10个数字！
var myApp=angular.module（“myApp”，[]）；
var myCtrl=myApp.controller（“myCtrl”、[“$scope”、函数（$scope）{
$scope.telephone=“1234567890”；
}]);
myApp.指令（“phoneformat”，函数（）{
返回{
限制：“A”，
要求：“ngModel”，
链接：函数（范围、元素、属性、ngModelCtrl）{
var phoneformat=函数（）{
}
}
};
});

您可能需要使用掩码指令。

工作小提琴：

---

}))

Iv'e扩展了你原来的小提琴。结果如下：

您可以在表单提交中找到

splittedNumber

array（包含数字的3部分）

js:

var myApp = angular.module("myApp", []);

var myCtrl = myApp.controller("myCtrl", ["$scope", function ($scope) {
    $scope.telephone = "1234567890";
    $scope.submit = function () {

        var splittedNumber = [$scope.telephone.substring(0, 3), $scope.telephone.substring(3, 6), $scope.telephone.substring(6, 10)];

        // Do something with splitted number
        console.log(splittedNumber);
    };
}]);

myApp.directive("phoneformat", function () {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (phoneInput) {
                phoneInput = phoneInput.trim();
                if (phoneInput && phoneInput.length == 10 && !isNaN(phoneInput)) {
                    ctrl.$setValidity('phoneformat', true);
                    return phoneInput;
                } else {
                    ctrl.$setValidity('phoneformat', false);
                    return undefined;

                }
            });
        }
    };
});

<div ng-app="myApp" ng-controller="myCtrl">
    <form name="myForm" novalidate ng-submit="myForm.$valid && submit()">
        <input type="text" ng-model="telephone" phoneformat name="input1" /> <span class="error" ng-show="myForm.input1.$error.phoneformat">Invalid US Phone number!</span>

        <div>
            <button class="btn btn-primary" type="submit" ng-class="{'disabled': !myForm.$valid}">submit</button>
        </div>
    </form>
</div>

html:

var myApp = angular.module("myApp", []);

var myCtrl = myApp.controller("myCtrl", ["$scope", function ($scope) {
    $scope.telephone = "1234567890";
    $scope.submit = function () {

        var splittedNumber = [$scope.telephone.substring(0, 3), $scope.telephone.substring(3, 6), $scope.telephone.substring(6, 10)];

        // Do something with splitted number
        console.log(splittedNumber);
    };
}]);

myApp.directive("phoneformat", function () {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (phoneInput) {
                phoneInput = phoneInput.trim();
                if (phoneInput && phoneInput.length == 10 && !isNaN(phoneInput)) {
                    ctrl.$setValidity('phoneformat', true);
                    return phoneInput;
                } else {
                    ctrl.$setValidity('phoneformat', false);
                    return undefined;

                }
            });
        }
    };
});

<div ng-app="myApp" ng-controller="myCtrl">
    <form name="myForm" novalidate ng-submit="myForm.$valid && submit()">
        <input type="text" ng-model="telephone" phoneformat name="input1" /> <span class="error" ng-show="myForm.input1.$error.phoneformat">Invalid US Phone number!</span>

        <div>
            <button class="btn btn-primary" type="submit" ng-class="{'disabled': !myForm.$valid}">submit</button>
        </div>
    </form>
</div>

无效的美国电话号码！
提交

看起来您想利用表单的$error属性来驱动验证。为此，您需要在指令中所需的ngModelCtrl中调用$setValidity：

var myApp = angular.module("myApp", []);

var myCtrl = myApp.controller("myCtrl",["$scope", function($scope) {
    $scope.telephone = "1234567890";
}]);

myApp.directive("phoneformat", function () {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, element, attr, ngModelCtrl) {
            //Parsing is performed from angular from view to model (e.g. update input box)
            //Sounds like you just want the number without the hyphens, so take them out with replace
            var phoneParse = function (value) {
                var numbers = value && value.replace(/-/g, "");
                if (/^\d{10}$/.test(numbers)) {
                    return numbers;
                }

                return undefined;
            }
            //Formatting is done from view to model (e.g. when you set $scope.telephone)
            //Function to insert hyphens if 10 digits were entered.
            var phoneFormat = function (value) {
                var numbers = value && value.replace(/-/g,"");
                var matches = numbers && numbers.match(/^(\d{3})(\d{3})(\d{4})$/);

                if (matches) {
                    return matches[1] + "-" + matches[2] + "-" + matches[3];
                }

                return undefined;
            }

           //Add these functions to the formatter and parser pipelines
           ngModelCtrl.$parsers.push(phoneParse);
           ngModelCtrl.$formatters.push(phoneFormat);

           //Since you want to update the error message on blur, call $setValidity on blur
           element.bind("blur", function () {
                var value = phoneFormat(element.val());
                var isValid = !!value;
                if (isValid) {
                    ngModelCtrl.$setViewValue(value);
                    ngModelCtrl.$render();
                }

                ngModelCtrl.$setValidity("telephone", isValid);
                //call scope.$apply() since blur event happens "outside of angular"
                scope.$apply();
            });
        }
    };
});

工作。这只是演示ngModel中使用的解析器和格式化程序管道以及用于填充$error字段的$setValidity的一种快速方法

更新：要在多部手机上使用相同的手机验证，请使用带有$error的表单。请注意，每个输入都会获得一个与myForm（表单名称）一起使用的唯一名称。两者都使用$error.phone：

<form name="myForm">
    Mobile Phone:
    <input type="text" ng-model="mobilephone" phoneformat name="mobilephone" />
    <span class="error" ng-show="myForm.mobilephone.$error.telephone">
       Exact 10 Numbers only!
    </span>
    <br />
    Home Phone:
    <input type="text" ng-model="homephone" phoneformat  name="homephone" />
    <span class="error" ng-show="myForm.homephone.$error.telephone">
        Exact 10 Numbers only!
    </span>
</form>

流动电话：
只有精确的10个数字！


家庭电话：
只有精确的10个数字！

---

更新。

查看此信息，谢谢大家@帕特里克，我们可以避免遵循指令中的行吗？ie.硬编码字段名（电话）。因为我想以两种形式使用此指令，并且此指令对于所有模块都是通用的ngModelCtrl.$setValidity（“电话”，isValid）；我想在不同的页面/表单/选项卡中使用此指令，因此我想去掉语句“ngModelCtrl.$setValidity（“电话”，isValid）；”中硬编码的“phone”字段。如果我将“phone”替换为“phoneformat”（指令名），并且它没有按预期工作。请帮助此指令是专门用于电话的。为什么你想让它说一些不同于“电话”的错误？如果你想做出类似的指令（例如验证邮政编码），你有上面的模板，你可以根据其他领域的要求进行验证。。。上面的帖子回答了您发布的问题。示例更新为quick 5 number zip:--这显然不是生产zip验证，而是一个演示如何使用不同指令进行验证的快速示例。更进一步说，您可以创建一个helper函数来返回链接函数，您可以在其中传递格式化程序和解析器函数，但这可能有些过分。我还注意到，在您的模板中，您仍然在查看$error.phone。如果您将其更改为“phoneformat”，则必须将模板更新为$error.phoneformat。我刚刚用ng model=mobilephone更新了fiddle，并希望使用此指令[link]，当我输入超过10位数字时，是否抛出错误？基本上，这个指令是我想要给家庭电话、手机等的用户的，所以ng型号在每种情况下都是不同的。那么如何执行这个指令呢？