Thanh Đo Độ Mạnh Mật Khẩu

Đánh giá độ mạnh của mật khẩu theo thời gian thực và cung cấp phản hồi bằng màu sắc và văn bản của thanh.

Xem trước

Password

Too short

Mã triển khai (Implementation)

<div class="max-w-sm mx-auto p-6 bg-white dark:bg-zinc-900 rounded-xl shadow-sm border border-gray-100 dark:border-zinc-800">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
<input type="password" id="pwd-input" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-zinc-800 dark:border-zinc-700 dark:text-white" placeholder="Enter password" />
<div class="mt-3 flex h-1.5 gap-1">
  <div id="bar-1" class="flex-1 bg-gray-200 dark:bg-zinc-700 rounded-full transition-colors"></div>
  <div id="bar-2" class="flex-1 bg-gray-200 dark:bg-zinc-700 rounded-full transition-colors"></div>
  <div id="bar-3" class="flex-1 bg-gray-200 dark:bg-zinc-700 rounded-full transition-colors"></div>
  <div id="bar-4" class="flex-1 bg-gray-200 dark:bg-zinc-700 rounded-full transition-colors"></div>
</div>
<p id="pwd-text" class="mt-2 text-xs text-gray-500 text-right">Too short</p>
</div>
<script>
const input = document.getElementById('pwd-input');
const bars = [document.getElementById('bar-1'), document.getElementById('bar-2'), document.getElementById('bar-3'), document.getElementById('bar-4')];
const text = document.getElementById('pwd-text');
input.addEventListener('input', (e) => {
  const val = e.target.value;
  let strength = 0;
  if (val.length > 5) strength++;
  if (val.length > 8) strength++;
  if (/[A-Z]/.test(val) && /[0-9]/.test(val)) strength++;
  if (/[^A-Za-z0-9]/.test(val)) strength++;
  
  const colors = ['bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-green-500'];
  const labels = ['Weak', 'Fair', 'Good', 'Strong'];
  
  bars.forEach((bar, i) => {
    bar.className = 'flex-1 rounded-full transition-colors ' + (i < strength ? colors[strength-1] : 'bg-gray-200 dark:bg-zinc-700');
  });
  text.innerText = val.length === 0 ? 'Too short' : (strength === 0 ? 'Weak' : labels[strength-1]);
});
</script>