├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # password-validation with Javascript 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Password Validation 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Password Validation

17 | 19 |
20 |
21 |
Length : 0
22 | 23 |
24 |
25 | Length more than 5. 26 |
27 |
28 | Length less than 10. 29 |
30 |
31 | Contains numerical character. 32 |
33 |
34 | Contains special character. 35 |
36 |
37 | Shouldn't contain spaces. 38 |
39 |
40 | 41 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var is_visible = false; 2 | 3 | function see() 4 | { 5 | var input = document.getElementById("password"); 6 | var see = document.getElementById("see"); 7 | 8 | if(is_visible) 9 | { 10 | input.type = 'password'; 11 | is_visible = false; 12 | see.style.color='gray'; 13 | } 14 | else 15 | { 16 | input.type = 'text'; 17 | is_visible = true; 18 | see.style.color='#262626'; 19 | } 20 | 21 | } 22 | 23 | function check() 24 | { 25 | var input = document.getElementById("password").value; 26 | 27 | input=input.trim(); 28 | document.getElementById("password").value=input; 29 | document.getElementById("count").innerText="Length : " + input.length; 30 | if(input.length>=5) 31 | { 32 | document.getElementById("check0").style.color="green"; 33 | } 34 | else 35 | { 36 | document.getElementById("check0").style.color="red"; 37 | } 38 | 39 | if(input.length<=10) 40 | { 41 | document.getElementById("check1").style.color="green"; 42 | } 43 | else 44 | { 45 | document.getElementById("check1").style.color="red"; 46 | } 47 | 48 | if(input.match(/[0-9]/i)) 49 | { 50 | document.getElementById("check2").style.color="green"; 51 | } 52 | else 53 | { 54 | document.getElementById("check2").style.color="red"; 55 | } 56 | 57 | if(input.match(/[^A-Za-z0-9-' ']/i)) 58 | { 59 | document.getElementById("check3").style.color="green"; 60 | } 61 | else 62 | { 63 | document.getElementById("check3").style.color="red"; 64 | } 65 | 66 | if(input.match(' ')) 67 | { 68 | document.getElementById("check4").style.color="red"; 69 | } 70 | else 71 | { 72 | document.getElementById("check4").style.color="green"; 73 | } 74 | 75 | } 76 | 77 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | body { 5 | background:linear-gradient(to right, #6441a5, #2a0845); 6 | display: flex; 7 | font-family: monospace; 8 | flex-direction: column; 9 | align-items: center; 10 | justify-content: center; 11 | min-height: 100vh; 12 | overflow: hidden; 13 | white-space: nowrap; 14 | } 15 | .container { 16 | background-color: white; 17 | box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2); 18 | padding: 10px; 19 | width: 400px; 20 | border-radius: 10px; 21 | } 22 | h2 { 23 | margin: 10px 0px 0px 0px; 24 | text-align: center; 25 | font-size: 25px; 26 | color: #6441a5; 27 | font-weight: bold; 28 | } 29 | #set 30 | { 31 | display:block ; 32 | position:relative; 33 | margin:auto; 34 | } 35 | #count 36 | { 37 | display:inline-block; 38 | position:relative ; 39 | margin:4%; margin-bottom:2%; 40 | color:#000; font-size:18px; 41 | text-indent:40px; 42 | font-weight:bolder; 43 | 44 | } 45 | #see 46 | { 47 | display:inline-block; 48 | color:gray; 49 | margin:auto; 50 | float: right; 51 | margin-right:40px; 52 | margin-top:10px; 53 | cursor:pointer; 54 | transition-duration:0.2s; 55 | } 56 | input[id='password'] 57 | { 58 | padding: 10px; 59 | border:none; 60 | width:80%; 61 | outline:none; 62 | border-bottom: 5px solid #2a0845; 63 | display:block; 64 | position:relative; 65 | font-size:27px; 66 | text-align:center; 67 | top:50px; 68 | margin-top: -20px; 69 | margin-left:35px; 70 | margin-bottom:40px; 71 | user-select:auto; 72 | font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 73 | transition-duration:600ms; 74 | } 75 | i 76 | { 77 | font-size:23px; 78 | transition-duration:600ms; 79 | } 80 | #check0,#check1,#check2,#check3,#check4 81 | { 82 | display:block; 83 | position:relative; 84 | margin:4%; 85 | color:red; font-size:18px; 86 | width:92% ; 87 | 88 | } 89 | span 90 | { 91 | margin:10px; 92 | font-weight: bold; 93 | } 94 | input:hover 95 | { 96 | border-bottom:5px solid #6441a5; 97 | } --------------------------------------------------------------------------------