AngularJS – Password Verification

AngularJS – Password Verification

Password field verification with AngularJS – remember that this is only client-side verification so don’t forget to validate on the server side too!

DEMO: View demo

Index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="2_controller.js"></script>
    <title>Password Verification</title>
    <style>
        html, body { padding: 20px; }
        p { font-size: 16px; color: #252525; }
        p.red { color: red; }
    </style>
</head>
<body>
    
    <div ng-app="myApp" ng-controller="c_home">

        <p>Password</p>
        <p><input type='password' ng-model='input1' ng-change='checkInput()' /></p>

        <p>Re-enter Password</p>
        <p><input type='password' ng-model='input2' ng-change='checkInput()' /></p>

        <p>
            Passwords match: {{ passwordMatch }} <br />
            Password complexity: {{ passwordComplexity }}
        </p>

        <div id='alert' style="display: none;">
            <p class='red'>{{ alertText }}</p>
        </div>

    </div>
</body>
</html>

2_controller.js

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

// Controller
app.controller('c_home', function($scope) {
    
    $scope.passwordMatch = "No";
    $scope.passwordComplexity = "No";

    var minPasswordLength = 8;
    
    $scope.checkInput = function () { 

        if($scope.input1 == $scope.input2) {
            $scope.passwordMatch = "Yes";
        }
        else {
            $scope.passwordMatch = "No";
        }

        if($scope.input1) {
            if($scope.input1.length >= minPasswordLength) {
                $scope.passwordComplexity = "Yes";
            }
            else {
                $scope.passwordComplexity = "No";
            }
        }
        else {
            $scope.passwordComplexity = "No";
        }

    }

});

 

 

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>