Question

我需要为输入字段创建掩码，用户只能在模板中输入符号：“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;
            }
        }

    });
});

Answer 1

查看此示例。它唯一能做的就是正确删除。我想你可以自己解决这个问题。

使用的正则表达式匹配任意数字[0-9]两次，然后查找任意字符[A-Z]三次，然后查找任意数字[0-9]四次，然后查找-个字符，然后任何数字[0-9]两次，然后是另一个-个字符。最后再两次数字[0-9]。 ^表示序列以＃开头，$表示序列以。基本上，任何与该Regex一起生产和结束的行。

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

＆＃13;

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 = "";
  }
});

＆＃13;

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

＆＃13;

掩蔽输入AngularJS

1 个答案: