マスキング入力AngularJS

テンプレートで "01ABC2345-67-89"のようにシンボルを入力できる入力フィールドのマスクを作成する必要があります.2桁、3桁、4桁、 " - "（またはif " - "を入力し、2桁の " - "と2桁の数字を入力します。私のコードがあります - 私のマスクフィルターは数字だけです。私の目的のために正規表現を作成するには？マスキング入力AngularJS

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

    }); 
});

出典

2017-10-24 Kumar Srivastava

この例をチェックしてください。それは正しく削除されません。私はあなた自身でこの問題を解決できると考えました。正規表現がマッチを使用

任意の数字[0-9]は二回、その後、任意の文字のために、その後[A-Z] 3回、その後、任意の数の[0-9] 4回、-文字、その後、任意の数字[0-9] 2回、その後、別の-の文字を探します。最後にもう一桁[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>

出典

2017-10-24 21:03:49 JustinJmnz

この正規表現に動作していない=（ –

@KumarSrivastavaコピーしてテストボックス内の '01ABC2345-67-89'を貼り付けます。文字は資産計上され、それは形式と一致することを確認してください – JustinJmnz

この入力にはQwertyのようなランダムなテキストを入力できます。フォーマットのみを通過させることができます。与えられたフォーマットで実行したい。誰もユーザーをQwertyに入れないようにすることはできません。しかし、あなたは間違いなく入力を検証することによってユーザーが 'Qwerty'を実行するのを止めることができます。検証が機能しない場合、実行されません。 –

答えて

関連する問題