-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathPassValidation.html
More file actions
79 lines (73 loc) · 3.88 KB
/
PassValidation.html
File metadata and controls
79 lines (73 loc) · 3.88 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" /> -->
<style>
.passValidator {
height: 100dvh;
width: 100%;
}
</style>
</head>
<body>
<h1 class="text-2xl md:text-3xl lg:text-4xl text-center font-medium text-black py-8 mb-6 bg-blue-200">
Completed Password Validation in <span class="text-indigo-600">JavaScript Course</span>
<a href="https://github.com/deepk2891/Javascript/tree/main/projects/PassValidation.html" target="_blank" class="absolute right-6 top-0 text-sm">view code</a>
</h1>
<div class="m-auto w-full md:w-3/4 lg:w-3/5 xl:w-2/5 p-2 md:p-5 border shadow-2xl">
<h1 class="text-xl pb-3">Enter Password :</h1>
<ul class="ps-5 mb-5">
<li id="passCheck1"><i class="fa-solid fa-circle-xmark text-red-600 pe-3"></i>password should be minimum 8 characters (1234Abcd)</li>
<li id="passCheck2"><i class="fa-solid fa-circle-xmark text-red-600 pe-3"></i>password must contain minimum 1 Upper case character (ABCD)</li>
<li id="passCheck3"><i class="fa-solid fa-circle-xmark text-red-600 pe-3"></i>password must contain numbers (1-9)</li>
</ul>
<input
class="block w-full text-centermb-5 p-2 mb-5 border border-gray-500 rounded-none focus:ring focus:ring-indigo-300 focus:outline-none"
type="text"
placeholder="Enter password"
id="password"
oninput="checkPasswordStrength()"
/>
<button class="text-indigo-600 w-full border border-indigo-600 p-2 mb-3 text-xl" onclick="checkPassword()">Check Password</button>
<p id="result" class="text-green-600"></p>
</div>
<script>
function checkPasswordStrength() {
let password = document.getElementById("password").value
let isStrongPassword = password.length >= 8
let hasUpperCase = /[A-Z]/.test(password)
let hasDigit = /\d/.test(password)
document.getElementById("passCheck1").innerHTML = '<i class="fa-solid fa-circle-xmark text-red-600 pe-3"></i>password should be minimum 8 characters (1234Abcd)'
document.getElementById("passCheck2").innerHTML = '<i class="fa-solid fa-circle-xmark text-red-600 pe-3"></i>password must contain minimum 1 Upper case character (ABCD)'
document.getElementById("passCheck3").innerHTML = '<i class="fa-solid fa-circle-xmark text-red-600 pe-3"></i>password must contain numbers (1-9)'
if (isStrongPassword) {
document.getElementById("passCheck1").innerHTML = '<i class="fa-solid fa-circle-check text-green-600 pe-3"></i>password should be minimum 8 characters (1234Abcd)'
}
if (hasUpperCase) {
document.getElementById("passCheck2").innerHTML = '<i class="fa-solid fa-circle-check text-green-600 pe-3"></i>password must contain minimum 1 Upper case character (ABCD)'
}
if (hasDigit) {
document.getElementById("passCheck3").innerHTML = '<i class="fa-solid fa-circle-check text-green-600 pe-3"></i>password must contain numbers (1-9)'
}
}
function checkPassword() {
let password = document.getElementById("password").value
let isStrongPassword = password.length >= 8
let hasUpperCase = /[A-Z]/.test(password)
let hasDigit = /\d/.test(password)
if (isStrongPassword && hasUpperCase && hasDigit) {
document.getElementById("result").innerHTML = "Signup successfull ...!!!"
alert("Welcome sir ...!!!")
} else {
document.getElementById("result").innerHTML = '<p class="text-red-500">Password is not strong please make sure you fullfilled the requirements...!!!</p>'
alert("Password is not strong please make sure you fullfilled the requirements...!!!")
}
}
</script>
</body>
</html>