└── Validation ├── 3d-casual-life-young-people-discussing-team-project-at-a-laptop (1).png ├── SignUp.js ├── SignUp.html └── SignUp.css /Validation/3d-casual-life-young-people-discussing-team-project-at-a-laptop (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kavinkumar1510/User-Validation/HEAD/Validation/3d-casual-life-young-people-discussing-team-project-at-a-laptop (1).png -------------------------------------------------------------------------------- /Validation/SignUp.js: -------------------------------------------------------------------------------- 1 | function valid() { 2 | let name = document.getElementById("name").value.trim(); 3 | let email = document.getElementById("email").value; 4 | let pass1 = document.getElementById("pass1").value; 5 | let pass2 = document.getElementById("pass2").value; 6 | let num = document.getElementById("num").value; 7 | 8 | const phn = /^\d{10}$/; 9 | const em = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 10 | 11 | if (name === "" || name<=65 || name>=122 || name.length<5) { 12 | alert("Invalid Username"); 13 | return false; 14 | } 15 | 16 | if (num === "" || !phn.test(num)) { 17 | alert("Enter a valid PhoneNumber"); 18 | return false; 19 | } 20 | 21 | if (email === "" || !em.test(email)) { 22 | alert("Enter a valid email"); 23 | return false; 24 | } 25 | 26 | if (pass1.length < 8) { 27 | alert("The password length should be 8 or more than 8"); 28 | return false; 29 | } 30 | 31 | if (pass1 !== pass2) { 32 | alert("The password doesn't match"); 33 | return false; 34 | } 35 | 36 | alert("SignedUp Successfully"); 37 | return true; 38 | } 39 | -------------------------------------------------------------------------------- /Validation/SignUp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | SignUp 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

17 |

18 |

19 |

SignUp

20 |
21 | 22 | 23 | 24 | 25 |

26 | 27 | 28 | 29 | 30 | 31 |

32 | 33 | 34 | 35 | 36 | 37 | 39 | 40 |

Already have an account SignIn

41 |

42 | --------------- Or Continue With -------------- 43 |

44 |

45 |

46 |

48 |

49 | 50 |

51 |

52 | 53 | 54 | -------------------------------------------------------------------------------- /Validation/SignUp.css: -------------------------------------------------------------------------------- 1 | .box 2 | { 3 | 4 | width: 80%; 5 | background-color: #ebe6e8; 6 | font-size: 14px; 7 | font-family: inherit; 8 | display: flex; 9 | flex-direction: row; 10 | gap: 20px; 11 | box-sizing: border-box; 12 | border-radius: 10px; 13 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168); 14 | margin-top: 3%; 15 | margin-left: 10%; 16 | } 17 | 18 | .input__email { 19 | width: 75%; 20 | padding: 10px; 21 | margin: 8px; 22 | font-size: 16px; 23 | font-family: inherit; 24 | box-shadow: 0 0 0 1px #f8bfbf; 25 | border: none; 26 | border-radius: 25px; 27 | background-color: #fff5f5; 28 | transition: all .3s; 29 | } 30 | 31 | .input__email::placeholder { 32 | color: #ce9797; 33 | font-size: 14px; 34 | } 35 | 36 | .input__email:focus { 37 | outline: none; 38 | box-shadow: 0 0 10px 1px #ee8c8c; 39 | border: none; 40 | transition: all .3s; 41 | } 42 | .cnt 43 | { 44 | margin-left: 190px; 45 | 46 | } 47 | .ico{ 48 | margin-left: 49%; 49 | padding: 1px; 50 | 51 | } 52 | 53 | button { 54 | cursor: pointer; 55 | --color: #ee8c8c; 56 | font-family: inherit; 57 | display: inline-block; 58 | width: 8em; 59 | height: 2.2em; 60 | 61 | margin: 20px; 62 | position: relative; 63 | overflow: hidden; 64 | border: 2px solid var(--color); 65 | transition: color .5s; 66 | z-index: 1; 67 | font-size: 17px; 68 | border-radius: 9px; 69 | font-weight: 500; 70 | color: var(--color); 71 | } 72 | 73 | button:before { 74 | content: ""; 75 | position: absolute; 76 | z-index: -1; 77 | background: var(--color); 78 | height: 150px; 79 | width: 200px; 80 | border-radius: 50%; 81 | } 82 | 83 | button:hover { 84 | color: #fff; 85 | } 86 | 87 | button:before { 88 | top: 100%; 89 | left: 100%; 90 | transition: all .7s; 91 | } 92 | 93 | button:hover:before { 94 | top: -30px; 95 | left: -30px; 96 | } 97 | 98 | button:active:before { 99 | background: #dda2a5; 100 | transition: background 0s; 101 | } 102 | 103 | a{ 104 | text-decoration-line: none; 105 | } --------------------------------------------------------------------------------