Scribd Logo
Upload

Welcome to Scribd!

  • Ajs 8

    Uploaded by

    atriahostels
    2 views1 page

    Original Title

    ajs 8

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views1 page

    Ajs 8

    Uploaded by

    atriahostels

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>Login Form with Validation</title>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></
    script>

    </script>
    </head>
    <body ng-app="myApp">
    <div ng-controller="LoginController">
    <h2>Login Form with Validation</h2>
    <form name="loginForm" novalidate>
    <label>Username:</label>
    <input type="text" ng-model="user.username" name="username" required>
    <span ng-show="loginForm.username.$error.required && loginForm.username.$dirty">
    Username is required.</span>
    <br>
    <label>Password :</label>
    <input type="password" ng-model="user.password" name="password" ng-pattern="/^(?
    =.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/" required>
    <span ng-show = "loginForm.password.$error.required && loginForm.password.$dirty">
    Password is required.</span>
    <span ng-show ="loginForm.password.$error.pattern && loginForm.password.
    $dirty">Password must be alphanumeric and at least 8 characters long.
    </span>
    <br>
    <button ng-click="login()" ng-disabled="loginForm.$invalid">Login</button>
    </form>
    <div ng-show="isLoggedIn">
    <p>Login successful! Welcome,{{user.username}}!</p>
    </div>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('LoginController',function($scope) {
    $scope.user = { username: '', password: '' };
    $scope.isLoggedIn = false;
    $scope.login = function(){
    $scope.isLoggedIn = true;
    };
    });
    </script>
    </body>
    </html>

    You might also like