Ng-Pattern-8

 

Account detail validation using ng-pattern. app.controller('myController', ['$scope', function ($scope) { $scope.cardRegEx = /^[0-9]{16,16}$/; $scope.cvvRegEx = /^[0-9]{3,3}$/; }]); See the code ATM Card Number (16 digits):Invalid Card Number.

CVV (3 digits):Invalid CVV.

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app="app"> <div ng-controller="myController"> <div class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <h2>Debit Card Detail</h2> <ng-form name="myForm"> Name On Card : <input type="text" class="form-control" ng-model="name" name="name" /> <br /> ATM Card Number <span><i>(16 digits)</i></span>: <input type="text" class="form-control" ng-model="cardNumber" name="cardNumber" ng-pattern="cardRegEx" /> <span ng-show="myForm.cardNumber.$error.pattern" style="color:red">Invalid Card Number.</span> <br /> CVV <span><i>(3 digits)</i></span>: <input type="text" class="form-control" ng-model="cvv" name="cvv" ng-pattern="cvvRegEx" /> <span ng-show="myForm.cvv.$error.pattern" style="color:red">Invalid CVV.</span> </ng-form> </div> </div> </div> </div> <script> var app = angular.module("app", []); app.controller('myController', ['$scope', function ($scope) { $scope.cardRegEx = /^[0-9]{16,16}$/; $scope.cvvRegEx = /^[0-9]{3,3}$/; }]); </script> </body> </html>
Output