<html ng-app="validationApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="ValidationController">
<h1>Username Validation</h1>
<label for="username">Username:</label>
<input type="text" id="username" ng-model="username" ng-change="validateUsername()" required>
<label for="password">Password:</label>
<input type="password" id="password" ng-model="password" ng-change="validatePassword()" required>
<p>{{ validationMessage }}</p>
<script>
var app = angular.module('validationApp', []);
app.controller('ValidationController', function ($scope) {
$scope.validationMessage = '';
$scope.validateUsername = function () {
if (!$scope.username) {
$scope.validationMessage = 'Enter username';
} else if ($scope.username.length < 3) {
$scope.validationMessage = 'Username is too short';
} else {
$scope.validationMessage = 'Valid username';
}
};
$scope.validatePassword = function () {
if ($scope.password.length < 8) {
$scope.validationMessage += ' Password is too short (minimum 8 characters)';
}
};
});
</script>
</body>
</html>
No comments:
Post a Comment