CRM dan Platform DataPemasaran E-mel & Automasi Pemasaran E-mel

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

Douglas Karr

Douglas Karr adalah pengasas Martech Zone dan pakar yang diiktiraf dalam transformasi digital. Douglas telah membantu memulakan beberapa permulaan MarTech yang berjaya, telah membantu dalam usaha wajar lebih $5 bilion dalam pemerolehan dan pelaburan Martech, dan terus melancarkan platform dan perkhidmatannya sendiri. Beliau adalah pengasas bersama Highbridge, firma perunding transformasi digital. Douglas juga merupakan pengarang buku panduan Dummie dan buku kepimpinan perniagaan yang diterbitkan.

Artikel yang berkaitan

33 Komen

  1. TERIMA KASIH! TERIMA KASIH! TERIMA KASIH! Saya telah bermain-main selama 2 minggu dengan kod kekuatan kata laluan terkutuk dari tapak web lain dan menarik rambut saya. Milik anda pendek, berfungsi seperti yang saya mahukan dan yang paling penting, mudah untuk orang baru javascript mengubah suai! Saya ingin menangkap keputusan kekuatan dan tidak membenarkan borang menyiarkan benar-benar mengemas kini kata laluan pengguna melainkan ia memenuhi ujian kekuatan. Kod orang lain terlalu rumit atau tidak berfungsi dengan betul atau sesuatu yang lain. saya sayang awak! XXXXX

  2. Hai, pertama sekali terima kasih atas usaha anda, saya cuba menggunakannya dengan Asp.net tetapi tidak berjaya, saya menggunakan

    bukannya tag, dan ia tidak berfungsi, ada cadangan?!

  3. Kepada Nisreen: kod dalam kotak yang diserlahkan tidak berfungsi dengan cut'n'paste. Petikan tunggal kacau. Kod pautan demonstrasi adalah baik walaupun.

  4. "P @ s $ w0rD" menunjukkan dengan kuat, walaupun akan cepat retak dengan serangan diksi ...
    Untuk menggunakan ciri seperti ini pada penyelesaian profesional, saya percaya penting untuk menggabungkan algoritma ini dengan pemeriksaan diksi.

  5. Terima kasih untuk kod kecil ini sekarang saya dapat menggunakannya untuk menguji kekuatan kata laluan saya semasa pelawat saya. Memasukkan kata laluan mereka,

  6. ada yang tahu, mengapa ia tidak berfungsi ..

    saya menyalin semua kod tersebut, dan tampalkannya ke notepad ++, tetapi sama sekali tidak berfungsi?
    tolong saya..

  7. Jenis "pemeriksa kekuatan" ini membawa orang ke jalan yang sangat berbahaya. Ia menghargai kepelbagaian watak sepanjang panjang frasa laluan, menjadikannya menilai kata laluan yang lebih pendek dan lebih beragam yang lebih kuat daripada kata laluan yang lebih panjang dan kurang berbeza. Itu adalah kesalahan yang akan membuat pengguna anda mendapat masalah sekiranya mereka menghadapi ancaman penggodaman yang serius.

    1. Saya tidak setuju, Jordan! Contohnya hanya dikemukakan sebagai contoh skrip. Cadangan saya untuk orang ramai adalah menggunakan alat pengurusan kata laluan untuk membuat frasa laluan bebas untuk mana-mana laman web yang unik untuknya. Terima kasih!

  8. Saya menghargai anda berkongsi! Telah mencari untuk meningkatkan kekuatan kata laluan di laman web kami dan ini berfungsi seperti yang saya mahukan. Terima kasih banyak-banyak!

  9. Anda adalah penjimat langsung! Saya sedang menguraikan rentetan kiri kanan dan tengah dan fikir ada cara yang lebih baik dan menemui kod anda menggunakan Regex. Mampu memperbaikinya untuk laman web saya ... Anda tidak tahu sejauh mana ini membantu. Terima kasih banyak Douglas !!

Apa yang anda fikir?

Laman web ini menggunakan Akismet untuk mengurangkan spam. Ketahui bagaimana data komen anda diproses.