ກວດເບິ່ງຄວາມເຂັ້ມຂອງລະຫັດຜ່ານດ້ວຍ JavaScript ຫຼື jQuery ແລະການສະແດງອອກແບບປົກກະຕິ (ດ້ວຍຕົວຢ່າງຂອງເຊີຟເວີ, ເຊັ່ນກັນ!)

ຂ້ອຍໄດ້ເຮັດການຄົ້ນຄວ້າບາງຢ່າງກ່ຽວກັບການຊອກຫາຕົວຢ່າງທີ່ດີຂອງຕົວກວດສອບຄວາມເຂັ້ມແຂງຂອງລະຫັດຜ່ານທີ່ໃຊ້ JavaScript ແລະ ສຳ ນວນປົກກະຕິ (regex). ໃນແອັບພລິເຄຊັນທີ່ເຮັດວຽກຂອງຂ້ອຍ, ພວກເຮົາຕອບຄືນເພື່ອຢືນຢັນຄວາມເຂັ້ມຂອງລະຫັດຜ່ານ ແລະມັນຂ້ອນຂ້າງບໍ່ສະດວກສໍາລັບຜູ້ໃຊ້ຂອງພວກເຮົາ.

Regex ແມ່ນຫຍັງ?

ສຳ ນວນປົກກະຕິແມ່ນ ລຳ ດັບຂອງຕົວອັກສອນທີ່ ກຳ ນົດຮູບແບບການຄົ້ນຫາ. ໂດຍປົກກະຕິແລ້ວ, ຮູບແບບດັ່ງກ່າວແມ່ນຖືກ ນຳ ໃຊ້ໂດຍການຄົ້ນຫາຊ່ອຍແນ່ ຊອກຫາ or ຊອກຫາແລະທົດແທນ ປະຕິບັດງານກ່ຽວກັບຊ່ອຍແນ່, ຫຼືສໍາລັບຄວາມຖືກຕ້ອງປ້ອນຂໍ້ມູນ. 

ບົດຂຽນນີ້ແນ່ນອນບໍ່ໄດ້ສອນໃຫ້ທ່ານສະແດງອອກເປັນປະ ຈຳ. ພຽງແຕ່ຮູ້ວ່າຄວາມສາມາດໃນການ ນຳ ໃຊ້ການສະແດງອອກແບບປົກກະຕິຈະເຮັດໃຫ້ການພັດທະນາຂອງທ່ານງ່າຍດາຍທີ່ສຸດເມື່ອທ່ານຄົ້ນຫາຮູບແບບຕ່າງໆໃນຂໍ້ຄວາມ. ມັນຍັງມີຄວາມ ສຳ ຄັນທີ່ຈະຕ້ອງລະວັງວ່າພາສາການພັດທະນາສ່ວນໃຫຍ່ໄດ້ເພີ່ມປະສິດທິພາບການ ນຳ ໃຊ້ການສະແດງອອກແບບປົກກະຕິ…ສະນັ້ນແທນທີ່ຈະແຍກແລະຄົ້ນຫາເບິ່ງແຕ່ລະບາດກ້າວ, Regex ມັກຈະໄວກວ່າທັງ server ແລະ client-side.

ຂ້ອຍໄດ້ຄົ້ນຫາເວບໄຊທ໌ຂ້ອນຂ້າງ ໜ້ອຍ ໜຶ່ງ ກ່ອນທີ່ຂ້ອຍຈະພົບ ເປັນຕົວຢ່າງ ບາງສ່ວນຂອງການສະແດງອອກປົກກະຕິທີ່ຍິ່ງໃຫຍ່ທີ່ຊອກຫາການປະສົມປະສານຂອງຄວາມຍາວ, ຕົວອັກສອນ, ແລະສັນຍາລັກ. ຢ່າງໃດກໍຕາມ, ລະຫັດແມ່ນຫຼາຍເກີນໄປສໍາລັບລົດຊາດຂອງຂ້ອຍແລະເຫມາະສົມກັບ .NET. ສະນັ້ນຂ້າພະເຈົ້າເຮັດໃຫ້ລະຫັດງ່າຍດາຍແລະໃສ່ໃນ JavaScript. ອັນນີ້ເຮັດໃຫ້ມັນກວດສອບຄວາມແຮງຂອງລະຫັດຜ່ານໃນເວລາຈິງໃນບຣາວເຊີຂອງລູກຄ້າກ່ອນທີ່ຈະໂພສມັນຄືນ... ແລະໃຫ້ຄຳຄິດເຫັນບາງຢ່າງໃຫ້ກັບຜູ້ໃຊ້ກ່ຽວກັບຄວາມແຮງຂອງລະຫັດຜ່ານ.

ພິມລະຫັດຜ່ານ

ດ້ວຍແປ້ນພິມແຕ່ລະເສັ້ນ, ລະຫັດຜ່ານຈະຖືກທົດສອບກັບການສະແດງອອກແບບປົກກະຕິແລະຫຼັງຈາກນັ້ນ ຄຳ ຕິຊົມຈະຖືກຕອບສະ ໜອງ ໃຫ້ຜູ້ໃຊ້ໃນຂອບເຂດດ້ານລຸ່ມຂອງມັນ.

ຟັງຊັນຄວາມເຂັ້ມແຂງລະຫັດຜ່ານ JavaScript

ໄດ້ ສຳ ນວນປົກກະຕິ ເຮັດວຽກທີ່ດີເລີດຂອງການຫຼຸດຜ່ອນຄວາມຍາວຂອງລະຫັດ. ຟັງຊັນ Javascript ນີ້ກວດເບິ່ງຄວາມແຂງແຮງຂອງລະຫັດຜ່ານແລະບໍ່ວ່າຈະເປັນ foiling ມັນງ່າຍ, ປານກາງ, ຍາກ, ຫຼືຍາກທີ່ສຸດທີ່ຈະຄາດເດົາ. ໃນຖານະເປັນຄົນປະເພດ, ມັນສະແດງຄໍາແນະນໍາກ່ຽວກັບການຊຸກຍູ້ໃຫ້ມັນເຂັ້ມແຂງ. ມັນກວດສອບລະຫັດຜ່ານໂດຍອີງໃສ່:

• ຄວາມຍາວ – ຖ້າ​ຫາກ​ວ່າ​ຄວາມ​ຍາວ​ແມ່ນ​ຫນ້ອຍ​ກວ່າ​ຫຼື​ຫຼາຍ​ກວ່າ 8 ຕົວ​ອັກ​ສອນ​.
• ກໍລະນີປະສົມ – ຖ້າລະຫັດຜ່ານມີທັງຕົວພິມໃຫຍ່ ແລະ ຕົວພິມນ້ອຍ.
• ຈໍານວນ – ຖ້າລະຫັດຜ່ານປະກອບມີຕົວເລກ.
• ຕົວລະຄອນພິເສດ – ຖ້າລະຫັດຜ່ານປະກອບມີຕົວອັກສອນພິເສດ.

ຟັງຊັນສະແດງຄວາມຫຍຸ້ງຍາກເຊັ່ນດຽວກັນກັບຄໍາແນະນໍາບາງຢ່າງກ່ຽວກັບການແຂງລະຫັດຜ່ານຕື່ມອີກ.

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;
  }
}

ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ຕ້ອງ​ການ​ປັບ​ປຸງ​ສີ​ຂອງ​ປາຍ​, ທ່ານ​ສາ​ມາດ​ເຮັດ​ໄດ້​ເຊັ່ນ​ດຽວ​ກັນ​ໂດຍ​ການ​ປັບ​ປຸງ​ລະ​ຫັດ​ຫຼັງ​ຈາກ // Return results ເສັ້ນ.

// 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";
  }

jQuery ຟັງຊັນຄວາມເຂັ້ມແຂງລະຫັດຜ່ານ

ດ້ວຍ jQuery, ພວກເຮົາບໍ່ຈໍາເປັນຕ້ອງຂຽນແບບຟອມດ້ວຍການອັບເດດ oninput:

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

ພວກເຮົາຍັງສາມາດແກ້ໄຂສີຂອງຂໍ້ຄວາມໄດ້ຖ້າພວກເຮົາຕ້ອງການ. 

$(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');
        }
    });
});

ການຮວບຮວມ ຄຳ ຂໍລະຫັດລັບຂອງທ່ານ

ມັນເປັນສິ່ງ ຈຳ ເປັນທີ່ທ່ານບໍ່ພຽງແຕ່ສ້າງລະຫັດຜ່ານທີ່ຖືກຕ້ອງພາຍໃນ Javascript ຂອງທ່ານເທົ່ານັ້ນ. ສິ່ງນີ້ຈະຊ່ວຍໃຫ້ທຸກຄົນທີ່ມີເຄື່ອງມືພັດທະນາໂປຣແກຣມທ່ອງເວັບສາມາດຂ້າມຜ່ານສະຄິບແລະໃຊ້ລະຫັດຜ່ານທີ່ພວກເຂົາຕ້ອງການ. ທ່ານຄວນ ນຳ ໃຊ້ການກວດສອບດ້ານເຊີຟເວີເພື່ອຢັ້ງຢືນຄວາມເຂັ້ມແຂງຂອງລະຫັດຜ່ານກ່ອນທີ່ຈະເກັບມັນໄວ້ໃນເວທີຂອງທ່ານ.

ຟັງຊັນ PHP ສໍາລັບຄວາມເຂັ້ມແຂງລະຫັດຜ່ານ

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";
  }
}

ຟັງຊັນ Python ສໍາລັບຄວາມເຂັ້ມແຂງລະຫັດຜ່ານ

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"

ຟັງຊັນ C# ສໍາລັບຄວາມເຂັ້ມຂອງລະຫັດຜ່ານ

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";
  }
}

ຟັງຊັນ Java ສໍາລັບຄວາມເຂັ້ມແຂງລະຫັດຜ່ານ

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";
  }
}

ແລະຖ້າທ່ານພຽງແຕ່ຊອກຫາເຄື່ອງສ້າງລະຫັດຜ່ານທີ່ດີ, ຂ້ອຍໄດ້ສ້າງເຄື່ອງມືອອນໄລນ໌ທີ່ສວຍງາມສໍາລັບສິ່ງນັ້ນ.

ລະຫັດຜ່ານ