1.write a javascript program to validate a login form?
Ans:
<!DOCTYPE html>
<html>
<head>
<title>Login Form Validation</title>
<style>
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<h2>Login</h2>
<form id="loginForm" onsubmit="return validateForm()">
<label for="username">Username/Email:</label><br>
<input type="text" id="username" name="username"><br>
<span id="usernameError" class="error"></span><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br>
<span id="passwordError" class="error"></span><br><br>
<input type="submit" value="Login">
</form>
<script>
function validateForm() {
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value.trim();
const usernameError = document.getElementById('usernameError');
const passwordError = document.getElementById('passwordError');
let isValid = true;
// Clear previous error messages
usernameError.textContent = '';
passwordError.textContent = '';
// Validate username/email
if (username === '') {
usernameError.textContent = 'Username or Email is required.';
isValid = false;
} else if (!isValidEmail(username) && !isValidUsername(username)) {
usernameError.textContent = 'Please enter a valid username or email address.';
isValid = false;
}
// Validate password
if (password === '') {
passwordError.textContent = 'Password is required.';
isValid = false;
} else if (password.length < 6) {
passwordError.textContent = 'Password must be at least 6 characters long.';
isValid = false;
}
return isValid; // Prevent form submission if not valid
}
function isValidEmail(email) {
// Basic email regex for demonstration
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
function isValidUsername(username) {
// Example: username can contain letters, numbers, and underscores, and be at least 3
characters
const usernameRegex = /^[a-zA-Z0-9_]{3,}$/;
return usernameRegex.test(username);
}
</script>
</body>
</html>
2.What is angular JS?Explain different directives of Angular
JS with Examples?
Ans:AngularJS is a JavaScript-based open-source front-end web
framework developed by Google. It is used to build dynamic, single-page
web applications (SPAs). It extends HTML with custom tags (directives)
and binds data to HTML with expressions.
Key Features of AngularJS:
Two-way data binding,MVC architecture (Model-View-Controller),Dependency
injection,Directives to extend HTML capabilities,Form validation,Reusable
components
AngularJS Directives
1. ng-model
Binds HTML form elements to application data.
html
CopyEdit
<input type="text" ng-model="name">
<p>Hello {{name}}</p>
● User types in the input → value is instantly available in name.
2. ng-bind
Binds data to the HTML element (alternative to {{}} interpolation).
html
CopyEdit
<p ng-bind="name"></p>
● Same as {{name}}.
3. ng-init
Initializes application data.
html
CopyEdit
<div ng-init="count=0">
Count: {{count}}
</div>
● Sets the default value of count.
4. ng-repeat
Repeats HTML for each item in a collection.
html
CopyEdit
<ul>
<li ng-repeat="fruit in fruits">{{fruit}}</li>
</ul>
● Loops through a list like ['Apple', 'Banana', 'Mango'].
5. ng-if
Conditionally includes or removes an element in the DOM.
html
CopyEdit
<p ng-if="isLoggedIn">Welcome back!</p>
● Shows only if isLoggedIn is true.
6. ng-show / ng-hide
Shows or hides an element (using CSS display).
html
CopyEdit
<p ng-show="isVisible">You can see me!</p>
<p ng-hide="isHidden">You can't see me!</p>
7. ng-click
Binds an expression to a click event.
html
CopyEdit
<button ng-click="count = count + 1">Click Me</button>
<p>Count: {{count}}</p>
8. ng-controller
Defines a controller for the scope of an element.
html
CopyEdit
<div ng-controller="myCtrl">
<p>{{message}}</p>
</div>
<script>
function myCtrl($scope) {
$scope.message = "Hello from AngularJS!";
}
</script>
3.Illustrate with program AngularJS databinding expressions?
Ans:
Data binding in AngularJS connects the view (HTML) and the model (JavaScript). When the
model changes, the view updates automatically, and vice versa.
Types of Data Binding in AngularJS:
1. One-way Data Binding (from model to view):
Using {{ expression }} or ng-bind.
2. Two-way Data Binding (from model to view and view to model):
Using ng-model.
Program: AngularJS Data Binding Expressions
<!DOCTYPE html>
<html ng-app="">
<head>
<title>AngularJS Data Binding</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h2>AngularJS Data Binding Example</h2>
<!-- Two-way binding -->
<p>Enter your name:</p>
<input type="text" ng-model="name">
<p>Hello, {{name}}!</p>
<!-- Expression evaluation -->
<p>Enter a number: <input type="number" ng-model="num1"></p>
<p>Enter another number: <input type="number" ng-model="num2"></p>
<p>Sum: {{num1 + num2}}</p>
<!-- Using ng-bind -->
<p ng-bind="name"></p>
</body>
</html>
Output:
Enter your name: [John]
Hello, John!
Enter a number: [5]
Enter another number: [3]
Sum: 8
