屏蔽输入AngularJS答案

【问题标题】：Masking input AngularJS屏蔽输入AngularJS
【发布时间】：2026-01-10 08:55:01
【问题描述】：

我需要为输入字段创建掩码，用户只能在模板中输入符号：“01ABC2345-67-89” - 两位，然后是三个字符，然后是四位，然后是“-”（或者如果他输入数字, "-" 自动添加)，然后是两位数，"-" 和两位数。有我的代码 - 我的面具过滤器只有数字。何为我的目标创建正则表达式？

html:

<html ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title>serialNumber mask</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="myCtrl">
        <input type="text" id="serialNumber" ng-model="model.serialNumber">
        <br>
        <label for="serialNumber">format: 01ABC2345-67-89</label>
        <br><br>
{{model.serialNumber}}
    </body>
</html>

和js：

var app = angular.module('app', []);

app.controller('myCtrl', function ($scope) {
    $scope.model = {};
    $scope.$watch('model.serialNumber', function (newValue, oldValue) {
        console.log('newValue', newValue);
        var regex = new RegExp('^\\d+$');
        if (newValue) {
            if (!regex.test(newValue)) {
                $scope.model.serialNumber = oldValue;
            }
        }

    });
});

【问题讨论】：

标签： javascript angularjs validation input masking

【解决方案1】：

看看这个例子。它唯一不能正确删除的事情。我想你可以自己解决这个问题。

使用的正则表达式匹配任意数字 [0-9] 两次，然后查找任意字符 [A-Z] 三次，然后查找任意数字 [0-9] 四次，然后查找 - 字符，然后查找任意数字 [0-9] 两次，然后是另一个- 字符。最后再次出现任何数字[0-9]。 ^ 表示序列以开头，$ 表示以结尾。所以本质上，任何以该正则表达式存在和结束的行。

^[0-9]{2}[A-Z]{3}[0-9]{4}-[0-9]{2}-[0-9]{2}$

var app = angular.module('app', []);

app.controller('myCtrl', function($scope) {
  $scope.model = {};

  $scope.checkForChanges = function() {
    var regex = new RegExp('^[0-9]{2}[A-Z]{3}[0-9]{4}-[0-9]{2}-[0-9]{2}$');
    var len = $scope.model.serialNumber.length;
    if (len == 9 | len == 12) {
      $scope.model.serialNumber += "-";
    }
    if (regex.test($scope.model.serialNumber)) {
      console.log("matches");
      $scope.isMatch = "Regex match!";
    } else {
      $scope.isMatch = "Regex mismatch!";
    }

  }

  $scope.clear = function() {
    $scope.model.serialNumber = "";
  }
});

<html ng-app="app">

<head>
  <meta charset="UTF-8">
  <title>serialNumber mask</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="myCtrl"> <input type="text" id="serialNumber" ng-model="model.serialNumber" ng-change="checkForChanges()"> <br> <label for="serialNumber">format: 01ABC2345-67-89</label> <br>
  <button ng-click="clear()">Clear</button>
  <br> {{model.serialNumber}} </body>
<div>{{isMatch}}</div>

</html>

【讨论】：

@KumarSrivastava 将01ABC2345-67-89 复制并粘贴到测试框中。确保字母大写，并且与您提供的示例格式相匹配。
我可以在此输入中输入随机文本，例如“Qwerty”。这是不对的。我需要一个解决方案，用户只能像在模板中一样输入符号。
@KumarSrivastava 您不能阻止键盘输入，只允许格式通过。当您只想在给定格式上执行时使用验证。没有人可以让用户不输入Qwerty。但是您绝对可以通过验证输入来阻止用户执行Qwerty。如果验证不起作用，那么我们就不会执行。