JavaScript Form Validation - Password Strength

Password strength validation is an important part of web form security. It ensures that users create strong and secure passwords when registering or updating their accounts. In this guide, we'll explore how to implement password strength validation using JavaScript and provide examples to illustrate its usage.

Password Strength Criteria

Before implementing password strength validation, it's essential to define the criteria for a strong password. Common criteria include:

• At least 8 characters long.
• Contains both uppercase and lowercase letters.
• Includes at least one number (0-9).
• Contains special characters (e.g., !@#$%^&*).

Implementing Password Strength Validation

We'll implement a simple password strength validation function in JavaScript. Here's an example:

<script>
function validatePasswordStrength(password) {
    const lengthRegex = /.{8,}/;
    const uppercaseRegex = /[A-Z]/;
    const lowercaseRegex = /[a-z]/;
    const digitRegex = /[0-9]/;
    const specialCharRegex = /[!@#$%^&*]/;
    return (
        lengthRegex.test(password) &&
        uppercaseRegex.test(password) &&
        lowercaseRegex.test(password) &&
        digitRegex.test(password) &&
        specialCharRegex.test(password)
    );
}
const passwordInput = document.getElementById('password');
const strengthIndicator = document.getElementById('strength-indicator');
passwordInput.addEventListener('input', () => {
    const password = passwordInput.value;
    const isStrong = validatePasswordStrength(password);
    if (isStrong) {
        strengthIndicator.textContent = 'Strong';
        strengthIndicator.style.color = 'green';
    } else {
        strengthIndicator.textContent = 'Weak';
        strengthIndicator.style.color = 'red';
    }
});
</script>
    

In this example, the validatePasswordStrength function checks the password against the defined criteria using regular expressions. The function returns true if the password meets the criteria and false otherwise. The password strength is then displayed in real-time based on user input.

HTML Form Example

Here's an example of an HTML form with password strength validation:

<form>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    <div id="strength-indicator" class="password-strength">Weak</div>
</form>
    

The password input field has an event listener that checks the password strength and updates the indicator in real-time.

Conclusion

Password strength validation is crucial for enhancing the security of user accounts and protecting sensitive information. By implementing password strength criteria and using JavaScript to validate passwords in real-time, you can ensure that users create strong and secure passwords when interacting with your web forms.

Happy coding with password strength validation in JavaScript!