<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script data-require="angularjs@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script data-require="ng-messages@1.3.16" data-semver="1.3.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-messages.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="demoApp" ng-controller="demoCtrl">
<h1>Hello Plunker!</h1>
<form name="registerForm">
<label>Password</label>
<input type="password" ng-model="newUser.userPassword" name="userPassword" required ng-pattern="/^(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,20}$/">
<div ng-messages="registerForm.userPassword.$error">
<br>
<div style="color:dodgerblue" ng-show="registerForm.userPassword.$error.required">Required!</div><br>
<div style="color:orange" ng-show="!registerForm.userPassword.$valid">Password should be at least 8 characters
long and should contain one number,one character and one special
character</div>
</div>
<div style="color: green" ng-show="registerForm.userPassword.$valid">Yas</div>
</form>
</body>
</html>
// Code goes here
var app = angular.module('demoApp',['ngMessages']);
app.controller('demoCtrl',function($scope){
$scope.newUser = {
userPassword:''
};
});
/* Styles go here */