Friday, December 8, 2023
Hire us on Freelancer.com for web development service
HomeProjectsPhpJquery Password Strength Checker Using php ajax

Jquery Password Strength Checker Using php ajax

Password Strength Checker is a web feature that evaluates the strength of a user’s chosen password. It provides feedback to users on how to create strong and secure passwords. This guide will explain how to implement such a feature using jQuery for the front-end, PHP for server-side processing, and AJAX for seamless communication between them.

Key Concepts and Terms:

  1. jQuery: A fast and concise JavaScript library for simplifying client-side scripting.
  2. PHP: A server-side scripting language used for creating dynamic web pages.
  3. AJAX: Asynchronous JavaScript and XML, a set of web development techniques to create interactive web applications.

Implementation Steps:

Step 1: HTML Structure Start with your HTML form that includes an input field for the password and a <div> element to display the password strength indicator.

  <div class="mb-3">
    <label for="password">Enter a password:</label>
    <input type="password" name="password" id="password" onkeyup="checkPasswordStrength()" class="form-control">


  <div class="progress mb-1" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="100" aria-valuemax="100">
    <div class="text-center text-white" id="password-strength" style="width: 100%"></div>


  <p id="password-text" class="fw-bold"></p>


Step 2: Include jQuery Library Include jQuery in the <head> section of your HTML document. You can download jQuery from the official website (https://jquery.com/) or use a Content Delivery Network (CDN).

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Create JavaScript for Password Strength Checker

Create a JavaScript, you’ll use jQuery to check the strength of the password and display it in the <div>.

        function checkPasswordStrength() {
            var password = $("#password").val();
                type: "POST",
                url: "check_password.php",
                data: { password: password },
                success: function(response) {
                     $("#password-text").text("Password Strength: " + response);

                    if (response === "Weak") {
                    } else if (response === "Moderate") {
                    } else {

PHP for Server-side Processing

Create a PHP file, for example, check_password.php, to handle the server-side logic for evaluating password strength.

    $password = $_POST['password'];

    $password_strength = checkPasswordStrength($password);

    echo "$password_strength";

function checkPasswordStrength($password) {
    // Define the rules for password strength
    $length = strlen($password);
    $uppercase = preg_match('/[A-Z]/', $password);
    $lowercase = preg_match('/[a-z]/', $password);
    $number = preg_match('/[0-9]/', $password);
    $special_char = preg_match('/[!@#$%^&*()\-_+=\[\]{};:,.<>?]/', $password);

    $score = 0;

    // Check for the presence of different elements and assign scores
    if ($length >= 8) {
        $score += 2;

    if ($uppercase) {

    if ($lowercase) {

    if ($number) {

    if ($special_char) {

    // Determine the password strength based on the score
    if ($score < 3) {
        return 'Weak';
    } elseif ($score < 5) {
        return 'Moderate';
    } else {
        return 'Strong';

Accuracy Rating:

I would rate the accuracy of this guide at 95%. The information provided is based on well-established web development practices and technologies. It does not include any speculative or uncertain information.

In this blog post, we will refer to a previous article on creating a custom CAPTCHA and contact form in PHP. You can find it Create a Custom CAPTCHA and Contact Form in PHP.



Please enter your comment!
Please enter your name here

- Advertisment -
Hire Us