تحقق من قوة كلمة المرور باستخدام JavaScript أو jQuery والتعبيرات العادية (مع أمثلة من جانب الخادم ، أيضًا!)
كنت أقوم ببعض الأبحاث حول العثور على مثال جيد لمدقق قوة كلمة المرور الذي يستخدم جافا سكريبت و التعبيرات العادية (رجإكس). في التطبيق الذي أقوم به في عملي ، نقوم بإعادة نشر للتحقق من قوة كلمة المرور وهذا غير مريح تمامًا لمستخدمينا.
ما هو Regex؟
التعبير العادي هو سلسلة من الأحرف التي تحدد نمط البحث. عادة ، يتم استخدام هذه الأنماط عن طريق خوارزميات البحث عن السلسلة جد or إيجاد واستبدال عمليات على السلاسل ، أو للتحقق من صحة الإدخال.
هذه المقالة بالتأكيد ليست لتعليمك التعبيرات العادية. فقط اعلم أن القدرة على استخدام التعبيرات العادية ستعمل على تبسيط تطورك تمامًا أثناء البحث عن أنماط في النص. من المهم أيضًا ملاحظة أن معظم لغات التطوير قد حسنت استخدام التعبير العادي ... لذا بدلاً من تحليل السلاسل والبحث فيها خطوة بخطوة ، فإن Regex عادةً ما يكون أسرع بكثير من جانب الخادم والعميل.
لقد بحثت في الويب قليلاً قبل أن أجد مثال لبعض التعبيرات العادية الرائعة التي تبحث عن مجموعة من الطول والأحرف والرموز. ومع ذلك ، كان الرمز مبالغًا فيه قليلاً بالنسبة لذوقي ومصمم خصيصًا لـ .NET. لذلك قمت بتبسيط الكود ووضعه في JavaScript. هذا يجعله يتحقق من قوة كلمة المرور في الوقت الفعلي على متصفح العميل قبل إعادة نشرها ... ويقدم بعض الملاحظات للمستخدم حول قوة كلمة المرور.
اكتب كلمة السر
مع كل ضغطة على لوحة المفاتيح ، يتم اختبار كلمة المرور مقابل التعبير العادي ثم يتم تقديم الملاحظات للمستخدم في فترة تحتها.
وظيفة قوة كلمة مرور جافا سكريبت
• التعبيرات العادية قم بعمل رائع في تقليل طول الكود. تتحقق وظيفة JavaScript هذه من قوة كلمة المرور وما إذا كان إحباطها سهلاً أم متوسطًا أم صعبًا أم يصعب تخمينه للغاية. أثناء قيام الشخص بالكتابة، فإنه يعرض نصائح حول تشجيعه على أن يكون أقوى. يتم التحقق من صحة كلمة المرور بناءً على:
- الطول - إذا كان الطول أقل من 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');
}
});
});
تشديد طلب كلمة المرور الخاصة بك
من الضروري ألا تقوم فقط بالتحقق من صحة إنشاء كلمة المرور داخل جافا سكريبت الخاص بك. وهذا من شأنه أن يمكّن أي شخص لديه أدوات تطوير المتصفح من تجاوز البرنامج النصي واستخدام كلمة المرور التي يريدها. يجب عليك دائمًا استخدام الفحص من جانب الخادم للتحقق من صحة كلمة المرور قبل تخزينها في النظام الأساسي الخاص بك.
وظيفة 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";
}
}
وظيفة جافا لقوة كلمة المرور
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";
}
}
وإذا كنت تبحث فقط عن مولد كلمات مرور رائع ، فقد صممت أداة صغيرة لطيفة على الإنترنت لذلك.