Semak Kekuatan Kata Laluan dengan JavaScript atau jQuery dan Ungkapan Biasa (Dengan Contoh Sisi Pelayan, Juga!)

Saya melakukan kajian untuk mencari contoh yang baik dari Password Strength checker yang menggunakan JavaScript and Ekspresi Biasa (regex). Dalam aplikasi di tempat kerja saya, kami melakukan siaran kembali untuk mengesahkan kekuatan kata laluan dan ia agak menyusahkan pengguna kami.

Apa itu Regex?

Ungkapan biasa adalah urutan watak yang menentukan corak carian. Biasanya, corak seperti itu digunakan oleh algoritma pencarian rentetan untuk mencari or cari dan tukar operasi pada rentetan, atau untuk pengesahan input. 

Artikel ini pasti tidak mengajar anda ungkapan biasa. Ketahuilah bahawa kemampuan menggunakan Ungkapan Biasa akan mempermudah perkembangan anda semasa anda mencari corak dalam teks. Penting juga untuk diperhatikan bahawa kebanyakan bahasa pengembangan telah mengoptimumkan penggunaan ekspresi biasa… jadi daripada mengurai dan mencari rentetan langkah demi langkah, Regex biasanya jauh lebih pantas dari sisi pelayan dan pelanggan.

Saya mencari di web sedikit sebelum saya menjumpai contoh daripada beberapa Ungkapan Biasa yang hebat yang mencari gabungan panjang, aksara dan simbol. Walau bagaimanapun, kod itu agak berlebihan untuk citarasa saya dan disesuaikan untuk .NET. Jadi saya memudahkan kod dan meletakkannya dalam JavaScript. Ini menjadikannya mengesahkan kekuatan kata laluan dalam masa nyata pada penyemak imbas pelanggan sebelum menyiarkannya kembali… dan memberikan beberapa maklum balas kepada pengguna tentang kekuatan kata laluan.

Taip Kata Laluan

Dengan setiap papan kekunci, kata laluan diuji dengan ungkapan biasa dan kemudian maklum balas diberikan kepada pengguna dalam jangka masa di bawahnya.

Fungsi Kekuatan Kata Laluan JavaScript

. Ekspresi Biasa melakukan kerja yang hebat untuk meminimumkan panjang kod. Fungsi Javascript ini menyemak kekuatan kata laluan dan sama ada menggagalkannya adalah mudah, sederhana, sukar atau amat sukar untuk diteka. Semasa orang itu menaip, ia memaparkan petua untuk menggalakkannya menjadi lebih kuat. Ia mengesahkan kata laluan berdasarkan:

• Panjang – Jika panjangnya di bawah atau melebihi 8 aksara.
• Kes Campuran – Jika kata laluan mempunyai kedua-dua aksara besar dan kecil.
• nombor – Jika kata laluan termasuk nombor.
• Watak Khas – Jika kata laluan termasuk aksara khas.

Fungsi ini memaparkan kesukaran serta beberapa petua untuk mengeraskan kata laluan dengan lebih lanjut.

function checkPasswordStrength(password) {
  // Initialize variables
  var strength = 0;
  var tips = "";

  // Check password length
  if (password.length < 8) {
    tips += "Make the password longer. ";
  } else {
    strength += 1;
  }

  // Check for mixed case
  if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {
    strength += 1;
  } else {
    tips += "Use both lowercase and uppercase letters. ";
  }

  // Check for numbers
  if (password.match(/\d/)) {
    strength += 1;
  } else {
    tips += "Include at least one number. ";
  }

  // Check for special characters
  if (password.match(/[^a-zA-Z\d]/)) {
    strength += 1;
  } else {
    tips += "Include at least one special character. ";
  }

  // Return results
  if (strength < 2) {
    return "Easy to guess. " + tips;
  } else if (strength === 2) {
    return "Medium difficulty. " + tips;
  } else if (strength === 3) {
    return "Difficult. " + tips;
  } else {
    return "Extremely difficult. " + tips;
  }
}

Jika anda ingin mengemas kini warna petua, anda boleh melakukannya juga dengan mengemas kini kod selepas // Return results line.

// Get the paragraph element
  var strengthElement = document.getElementById("passwordStrength");

  // Return results
  if (strength < 2) {
    strengthElement.textContent = "Easy to guess. " + tips;
    strengthElement.style.color = "red";
  } else if (strength === 2) {
    strengthElement.textContent = "Medium difficulty. " + tips;
    strengthElement.style.color = "orange";
  } else if (strength === 3) {
    strengthElement.textContent = "Difficult. " + tips;
    strengthElement.style.color = "black";
  } else {
    strengthElement.textContent = "Extremely difficult. " + tips;
    strengthElement.style.color = "green";
  }

Fungsi Kekuatan Kata Laluan jQuery

Dengan jQuery, kita sebenarnya tidak perlu menulis borang dengan kemas kini oninput:

<form>
    <label for="password">Enter password:</label>
    <input type="password" id="password">
    <p id="password-strength"></p>
</form>

Kami juga boleh mengubah suai warna mesej jika kami mahu. 

$(document).ready(function() {
    $('#password').on('input', function() {
        var password = $(this).val();
        var strength = 0;
        var tips = "";
  
        // Check password length
        if (password.length < 8) {
            tips += "Make the password longer. ";
        } else {
            strength += 1;
        }
  
        // Check for mixed case
        if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {
            strength += 1;
        } else {
            tips += "Use both lowercase and uppercase letters. ";
        }
  
        // Check for numbers
        if (password.match(/\d/)) {
            strength += 1;
        } else {
            tips += "Include at least one number. ";
        }
  
        // Check for special characters
        if (password.match(/[^a-zA-Z\d]/)) {
            strength += 1;
        } else {
            tips += "Include at least one special character. ";
        }
  
        // Update the text and color based on the password strength
        var passwordStrengthElement = $('#password-strength');
        if (strength < 2) {
            passwordStrengthElement.text("Easy to guess. " + tips);
            passwordStrengthElement.css('color', 'red');
        } else if (strength === 2) {
            passwordStrengthElement.text("Medium difficulty. " + tips);
            passwordStrengthElement.css('color', 'orange');
        } else if (strength === 3) {
            passwordStrengthElement.text("Difficult. " + tips);
            passwordStrengthElement.css('color', 'black');
        } else {
            passwordStrengthElement.text("Extremely difficult. " + tips);
            passwordStrengthElement.css('color', 'green');
        }
    });
});

Mengeras Permintaan Kata Laluan Anda

Anda tidak perlu hanya mengesahkan pembinaan kata laluan dalam Javascript anda. Ini akan membolehkan sesiapa sahaja yang mempunyai alat pengembangan penyemak imbas memintas skrip dan menggunakan kata laluan apa pun yang mereka mahukan. Anda harus SELALU menggunakan pemeriksaan sisi pelayan untuk mengesahkan kekuatan kata laluan sebelum menyimpannya di platform anda.

Fungsi PHP Untuk Kekuatan Kata Laluan

function checkPasswordStrength($password) {
  // Initialize variables
  $strength = 0;

  // Check password length
  if (strlen($password) < 8) {
    return "Easy to guess";
  } else {
    $strength += 1;
  }

  // Check for mixed case
  if (preg_match("/[a-z]/", $password) && preg_match("/[A-Z]/", $password)) {
    $strength += 1;
  }

  // Check for numbers
  if (preg_match("/\d/", $password)) {
    $strength += 1;
  }

  // Check for special characters
  if (preg_match("/[^a-zA-Z\d]/", $password)) {
    $strength += 1;
  }

  // Return strength level
  if ($strength < 2) {
    return "Easy to guess";
  } else if ($strength === 2) {
    return "Medium difficulty";
  } else if ($strength === 3) {
    return "Difficult";
  } else {
    return "Extremely difficult";
  }
}

Fungsi Python Untuk Kekuatan Kata Laluan

def check_password_strength(password):
  # Initialize variables
  strength = 0

  # Check password length
  if len(password) < 8:
    return "Easy to guess"
  else:
    strength += 1

  # Check for mixed case
  if any(char.islower() for char in password) and any(char.isupper() for char in password):
    strength += 1

  # Check for numbers
  if any(char.isdigit() for char in password):
    strength += 1

  # Check for special characters
  if any(not char.isalnum() for char in password):
    strength += 1

  # Return strength level
  if strength < 2:
    return "Easy to guess"
  elif strength == 2:
    return "Medium difficulty"
  elif strength == 3:
    return "Difficult"
  else:
    return "Extremely difficult"

Fungsi C# Untuk Kekuatan Kata Laluan

public string CheckPasswordStrength(string password) {
  // Initialize variables
  int strength = 0;

  // Check password length
  if (password.Length < 8) {
    return "Easy to guess";
  } else {
    strength += 1;
  }

  // Check for mixed case
  if (password.Any(char.IsLower) && password.Any(char.IsUpper)) {
    strength += 1;
  }

  // Check for numbers
  if (password.Any(char.IsDigit)) {
    strength += 1;
  }

  // Check for special characters
  if (password.Any(ch => !char.IsLetterOrDigit(ch))) {
    strength += 1;
  }

  // Return strength level
  if (strength < 2) {
    return "Easy to guess";
  } else if (strength == 2) {
    return "Medium difficulty";
  } else if (strength == 3) {
    return "Difficult";
  } else {
    return "Extremely difficult";
  }
}

Fungsi Java Untuk Kekuatan Kata Laluan

public String checkPasswordStrength(String password) {
  // Initialize variables
  int strength = 0;

  // Check password length
  if (password.length() < 8) {
    return "Easy to guess";
  } else {
    strength += 1;
  }

  // Check for mixed case
  if (password.matches(".*[a-z].*") && password.matches(".*[A-Z].*")) {
    strength += 1;
  }

  // Check for numbers
  if (password.matches(".*\\d.*")) {
    strength += 1;
  }

  // Check for special characters
  if (password.matches(".*[^a-zA-Z\\d].*")) {
    strength += 1;
  }

  // Return strength level
  if (strength < 2) {
    return "Easy to guess";
  } else if (strength == 2) {
    return "Medium difficulty";
  } else if (strength == 3) {
    return "Difficult";
  } else {
    return "Extremely difficult";
  }
}

Dan jika anda hanya mencari penjana kata laluan yang hebat, saya telah membina alat dalam talian yang bagus untuk itu.

Penjana Kata Laluan