Walidacja na żywo przy wpisywaniu

Wyjątki i walidacja - JavaScript od podstaw: konsola (HTML/CSS/JS)

Zdarzenie `input` zachodzi przy każdym wpisanym znaku, więc strona może oceniać hasło na bieżąco. Każda reguła to obiekt z opisem i funkcją sprawdzającą; lista reguł na stronie powstaje z tablicy i przy każdej zmianie dostaje znak ✓ albo ✗. Przycisk jest wyłączony (`disabled`), dopóki wszystkie reguły nie są spełnione.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Hasło</title>
  <style>
    body { font-family: sans-serif; max-width: 34em; }
    label { display: block; margin-top: 0.6em; }
    input, button { font: inherit; padding: 0.2em 0.5em; }
    input.invalid { border: 2px solid #dc2626; }
    .error { color: #dc2626; font-size: 0.9em; margin-left: 0.5em; }
    .ok { color: #15803d; }
  </style>
</head>
<body>
  <h1>Nowe hasło</h1>
  <input id="secret" type="text" placeholder="Hasło">
  <ul id="rules"></ul>
  <button id="save" disabled>Zapisz</button>
  <script>
    const rules = [
      { text: 'co najmniej 8 znaków', test: p => p.length >= 8 },
      { text: 'cyfra', test: p => [...p].some(c => c >= '0' && c <= '9') },
      { text: 'wielka litera', test: p => [...p].some(c => c !== c.toLowerCase()) },
    ];

    const list = document.getElementById('rules');
    const items = rules.map(rule => {
      const li = document.createElement('li');
      list.appendChild(li);
      return li;
    });

    function update() {
      const text = document.getElementById('secret').value;
      let passed = 0;
      rules.forEach((rule, i) => {
        const ok = rule.test(text);
        if (ok) passed++;
        items[i].textContent = (ok ? '✓ ' : '✗ ') + rule.text;
        items[i].className = ok ? 'ok' : 'error';
      });
      document.getElementById('save').disabled = passed < rules.length;
    }

    document.getElementById('secret').addEventListener('input', update);
    update();
  </script>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu JavaScript od podstaw: konsola·Zaloguj się, aby zapisać postęp na koncie.