javascript - Angular js中的SSN掩码-6ren

javascript - Angular js中的SSN掩码

转载作者：行者123 更新时间：2023-11-30 16:21:40

29

4

我正在尝试使用 Angular js 屏蔽 SSN 号码。

预期:

Before mask (onFocus)

After mask (onBlur)

用户只能输入由过滤器完成的数字和 SSN 格式。下面是我写的示例代码。

指令:

app.directive('taxId', function ($filter, $browser) {
return {
    require: 'ngModel',
    link: function ($scope, $element, $attrs, ngModelCtrl) {
        var listener = function () {
            var value = $element.val().replace(/[^0-9]/g, '');
            if (value.length > 9)
                value = value.slice(0, 9);
            var type = $attrs.taxId;
            $element.val($filter('taxId')(value, type, false));
        };

        // This runs when we update the text field
        ngModelCtrl.$parsers.push(function (viewValue) {
            return viewValue.replace(/[^0-9]/g, '').slice(0, 10);
        });

        // This runs when the model gets updated on the scope directly and keeps our view in sync
        ngModelCtrl.$render = function () {
            $element.val($filter('taxId')(ngModelCtrl.$viewValue, $attrs.taxId, false));
        };

        $element.bind('change', listener);
        $element.bind('keydown', function (event) {
            var key = event.keyCode;
            // If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing.
            // This lets us support copy and paste too
            if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) {
                return;
            }
            $browser.defer(listener); // Have to do this or changes don't get picked up properly
        });

        if ($attrs.taxId== "ssn") {
            $element.bind('blur', function () {
                $scope.$apply(function () {

                });
            });

            $element.bind('focus', function () {
                $scope.$apply(function () {

                });
            });
        }

        $element.bind('paste cut', function () {
            $browser.defer(listener);
        });
    }

};

});过滤器:

app.filter('taxId', function () {
return function (taxId, type) {
    if (!taxId) { return ''; }

    var value = taxId.toString().replace(/^\+/, '');

    if (value.match(/[^0-9]/)) {
        return taxId;
    }

    if (type.toLowerCase() == "fein") {
        if (value.length == 10) {
            value = value.slice(0, 2) + "-" + value.slice(2, value.length - 1);
            return value;
        } else if (value.length > 2) {
            return (value.slice(0, 2) + "-" + value.slice(2, value.length));
        }
        else {
            return value.slice(0, 9);
        }
    }
    else if(type.toLowerCase() == "ssn"){
        if (value.length > 5) {
            return (value.slice(0,3) + "-" + value.slice(3,5) + "-" + value.slice(5,value.length));
        }
        else if (value.length > 3) {
            return (value.slice(0, 3) + "-" + value.slice(3, value.length));
        }
        else {
            return value;
        }
    }
};

});

我能够成功格式化 SSN。但是掩盖我做不到。我浏览了以下有关屏蔽的链接，但无济于事。我需要编写特殊函数来屏蔽和取消屏蔽指令中的“模糊”和“焦点”。最后 ng-model 应包含值“999993213”，但 UI 中的值应显示为“*--3213”(格式和掩码)。

感谢您的投入。谢谢。

Masking in AngularJS

最佳答案

这应该有效。

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
  $scope.modelssn = '';
});

app.directive("ssnInput",function(){
    return {
        require:'ngModel',
        link: function(scop, elem, attr, ngModel){
            $(elem).mask("999-99-9999");
            var temp;
            var regxa = /^(\d{3}-?\d{2}-?\d{4})$/;
            $(elem).focusin(function(){
                $(elem).val(temp);
            });
            $(elem).on('blur',function(){
                temp = $(elem).val();
                if(regxa.test($(elem).val())){
                   $(elem).val("XXX-XX" + temp.slice(6));
               }
            });
        }
    }
});

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdn.rawgit.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js"></script>
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    Enter SSN <input type="text" ng-model="modelssn" ssn-input >
    <p>Real SSN {{modelssn}} </p>
  </body>
</html>

关于javascript - Angular js中的SSN掩码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34645799/

29

4

0

文章推荐： c# - SQLDependency + 服务代理

文章推荐： javascript - express ， Passport : can't set headers after they are sent

文章推荐： javascript - 我如何将数组插入值匹配的其他数组？

文章推荐： Applescript 中的 Javascript

java - 仅使用具有多个 SSN 的文件中的部分掩码来屏蔽所有 SSN
首先要声明我对正则表达式很糟糕。我想在字符串中查找社会保障号的每个实例，并屏蔽除破折号 (-) 和 SSN 的最后 4 个之外的所有实例。示例 String someStrWithSSN = "Th
Javascript 验证文本区域以查找 SSN
我正在尝试创建一个文本区域注释字段的快速验证，以查看它是否可能包含 SSN 号码，然后我将发出警报。我尝试了在网上找到的几种不同的正则表达式模式，但它们似乎都不起作用。我想知道我的 javascri
java - 我需要以非常具体的方式验证 SSN
这是我的代码，我知道这个问题或类似问题之前已经发布过。我遇到的冲突是我不应该使用“正则表达式”。我知道这是编写该程序的一种更简单的方法，但我们在类里面还没有讨论过这一点。我不是在寻找简单的答案，只是寻
JQuery SSN 掩码
如何在文本框中屏蔽 SSN，并在使用 JQuery 加载页面时仅显示 SSN 的最后 4 位数字？最佳答案如果您使用 jQuery 屏蔽它，那么您已经遇到了安全漏洞。您需要在服务器端对其进行屏蔽，
c# - 如何使用正则表达式在字符串中屏蔽 SSN
如何在字符串中屏蔽 SSN？我有以下场景 string str1 = "asdasfasdfasdf sfhagfdad SSN:123456789"; 我需要的输出 "asdasfasdfasdf
c# - 使用正则表达式格式化 ssn
您好，我需要 c sharp 中的正则表达式才能以 xxx-xx-6789 的格式显示 SSN。即 123456789 应在文本字段中显示为 xxx-xx-6789。我现在写的代码是 string S
java - 使用字符串验证 SSN
我应该编写一个程序，将 SSN 作为字符串读取，包括破折号，例如 DDD-DD-DDDD，其中“D”是数字。如果它有效，它会打印“valid ssn”，如果它无效则相反。我应该有四种方法:main、p
c++ - 使用字符串成员函数格式化 SSN
我可以通过哪些不同的方式来修改包含 ssn 的字符串 123-45-8999 变成 XXX-XX-8999 ? 必须使用字符串成员函数来完成。谢谢! 最佳答案尝试 replace : std::s
mysql - 在文本区域中查找 SSN
我有一个巨大的 VARCHAR 字段，它是电子邮件的正文。电子邮件的两边可以有任何类型的文本。我想看看是否有人在文本中的任何地方列出了他们的社会安全号码。在WHERE子句中，我试过了 WHERE X
algorithm - SSN 的校验和
我有一个项目需要在前端验证美国社会保险号(格式 ddd-dd-dddd)。一个建议是使用散列算法，但考虑到使用的字符集很小 ( [0-9] )，这将是灾难性的。以高概率验证数字是否正确并允许后端执行最
javascript - 输入号码时自动格式化 SSN
我有一个文本字段，用户输入 SSN 号码。在进入自身时，它应该格式化。就像在更改 textField 时...它应该在显示器本身上以这种方式格式化 999-999-999。最佳答案来自@kotte
c# - SSN 的正则表达式
这个问题在这里已经有了答案: SSN Regex for 123-45-6789 OR XXX-XX-XXXX (6 个答案) 关闭 7 年前。我在 C# 中有一个方法说 FormatSSN，它采
security - 散列 SSN 和其他有限域信息
我目前正在开发一个我们接收私有(private)健康信息的应用程序。最大的担忧之一是 SSN。目前，我们没有将 SSN 用于任何事情，但 future 我们希望能够使用它来唯一地识别多个设施中的患者。
angularjs:屏蔽 SSN 的前五位数字
我正在尝试使用过滤器来屏蔽 SSN 的前 5 位数字，它应该看起来像这样 XXX-XX-1234 到目前为止我想出了什么: // {{SocialSecurityNumber | ssn}} angu
java - 不允许 SSN 和电话号码出现在字符串正则表达式中
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Regular expression for SSN and phone number ^(?!.*(\\d{16}
mysql - 如何根据 SSN 获取重复记录
我想编写一个 SQL 查询，为所有用户提供 user_id、last_name 和 Social_security_number，这些用户的另一个用户具有相同的姓氏和相同的 SSN 最后四位 RIGH
c# - 显示 SSN 的最后四位数字
我只想在社会安全号码离开文本框后显示其最后四位数字。 AJax 是否有一个我不知道的工具？我怎样才能做到这一点？我想用“*”替换数字。我在.NET 工作。 Ajax 也可以访问。最佳答案据我所知，
python - 如何安全高效地将 SSN 存储在数据库中？
我的主要问题是我想检查具有相同 SSN 的人是否在我们这里拥有多个帐户。目前，所有个人身份信息都已加密，解密需要很长时间。我最初的想法是在数据库中的用户列中添加一个 ssn 列。然后我可以简单地进行
c# - 除了 SSN 之外的任何正则表达式
我在 C# 中有以下正则表达式代码。 ^((?!(\d{3}-?\d{2}-?\d{4})).)*$") 我唯一关心的是文本框与 ssn 不匹配。 [###-##-####]我如何使正则表达式匹配 S
javascript - 如何创建安全的网络应用程序(安全输入 SSN)？
我想创建一个网络应用: 使用 csv 获取个人数据(包括 SSN) 在浏览器 javascript 中处理和操作数据输出pdf 既然一切都发生在浏览器中，并且没有任何数据存储在 Web 主机的数据库

首页

博学

6Ren·AI

商城

javascript - Angular js中的SSN掩码