Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
Resize_Quashai
/
Fusion
/
formulaire_bootstrap
:
DEV01.html
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!-- https://www.geeksforgeeks.org/create-a-password-validator-using-bootstrap-javascript/ --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Password Strength Checker</title> <!-- Bootstrap CSS --> <link href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"> <!-- Bootstrap JS and jQuery --> <script src= "https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script> <!-- Font Awesome --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script> </head> <body> <div class="container mt-5"> <div class="row justify-content-center"> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h2 class="mb-4"> Checking Password Strength in JavaScript </h2> <form class="form-horizontal" role="form" method="post" action="code01.php"> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="name" name="name" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" pattern="^[_A-z0-9]{1,}$" minlength="6" placeholder="First & Last Name" > <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> <?php echo "<p class='text-danger'>$errName</p>";?> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" placeholder="example@domain.com" > <?php echo "<p class='text-danger'>$errEmail</p>";?> </div> </div> </form> <div class="form-group"> <label for="password">Enter Password:</label> <div class="input-group"> <input type="password" class="form-control" id="password" oninput="validatePassword(this.value)"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button" id="togglePassword"> <i class="fas fa-eye"></i> </button> </div> </div> </div> <div class="form-group"> <ul> <li id="minLength"><i class="fas fa-times text-danger"></i> Minimum 8 characters</li> <li id="uppercase"><i class="fas fa-times text-danger"></i> At least one uppercase letter</li> <li id="lowercase"><i class="fas fa-times text-danger"></i> At least one lowercase letter</li> <li id="symbol"><i class="fas fa-times text-danger"></i> At least one symbol (@$!%*?&) </li> </ul> </div> <span id="errorMessage" class="font-weight-bold text-danger"></span> </div> </div> </div> </div> </div> <script> // Function to toggle password visibility document.getElementById('togglePassword').addEventListener('click', function () { const passwordInput = document.getElementById('password'); const icon = this.querySelector('i'); if (passwordInput.type === 'password') { passwordInput.type = 'text'; icon.classList.remove('fa-eye'); icon.classList.add('fa-eye-slash'); } else { passwordInput.type = 'password'; icon.classList.remove('fa-eye-slash'); icon.classList.add('fa-eye'); } }); function validatePassword(password) { const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; const errorMessage = document.getElementById('errorMessage'); // Check each condition and update the corresponding label document.getElementById('minLength').innerHTML = password.length >= 8 ? '<i class="fas fa-check text-success"></i> Minimum 8 characters' : '<i class="fas fa-times text-danger"></i> Minimum 8 characters'; document.getElementById('uppercase').innerHTML = /[A-Z]/.test(password) ? '<i class="fas fa-check text-success"></i> At least one uppercase letter' : '<i class="fas fa-times text-danger"></i> At least one uppercase letter'; document.getElementById('lowercase').innerHTML = /[a-z]/.test(password) ? '<i class="fas fa-check text-success"></i> At least one lowercase letter' : '<i class="fas fa-times text-danger"></i> At least one lowercase letter'; document.getElementById('symbol').innerHTML = /[@$!%*?&]/.test(password) ? '<i class="fas fa-check text-success"></i> At least one symbol (@$!%*?&)' : '<i class="fas fa-times text-danger"></i> At least one symbol (@$!%*?&)'; // Check overall validity and update the error message if (strongPasswordRegex.test(password)) { errorMessage.textContent = 'Strong Password'; errorMessage.classList.remove('text-danger'); errorMessage.classList.add('text-success'); } else { errorMessage.textContent = 'Weak Password'; errorMessage.classList.remove('text-success'); errorMessage.classList.add('text-danger'); } } </script> </body> </html>