EgoValeo Mini Tutorial Javascript

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Validazione Email</title>
</head>
<body>
  
  <!-- Form con un campo input per l'email e un pulsante per la validazione -->
  <form id="emailForm">
    <label for="email">Inserisci la tua email:</label>
    <input type="text" id="email" name="email">
    <button type="button" onclick="checkEmail()">Verifica Email</button>
  </form>

  <!-- Messaggio che sarà mostrato per indicare la validità dell'email -->
  <p id="message"></p>

</body>
</html>

JavaScript

// Definizione della funzione isValidEmail che accetta un parametro email
function isValidEmail(email) {
  // Controllo se la stringa email è vuota
  if (email === "") {
    return false; // Se è vuota, restituisco false
  }

  // Ricerca della posizione del simbolo '@' all'interno della stringa email
  const atSymbolIndex = email.indexOf("@");
  // Controllo se '@' è presente, e se non è né il primo né l'ultimo carattere
  if (atSymbolIndex === -1 || atSymbolIndex === 0 || atSymbolIndex === email.length - 1) {
    return false; // Se una di queste condizioni è vera, restituisco false
  }

  // Ricerca della posizione dell'ultimo punto '.' all'interno della stringa email
  const dotIndex = email.lastIndexOf(".");
  // Controllo se il punto è presente, se viene dopo '@', e se non è l'ultimo carattere
  if (dotIndex === -1 || dotIndex <= atSymbolIndex || dotIndex === email.length - 1) {
    return false; // Se una di queste condizioni è vera, restituisco false
  }

  // Se tutte le condizioni sono state superate, l'email è considerata valida
  return true;
}

    // Funzione checkEmail che utilizza isValidEmail per verificare l'indirizzo email inserito
    function checkEmail() {
      const email = document.getElementById("email").value; // Preleva l'email dal campo input
      const message = document.getElementById("message"); // Preleva l'elemento dove verrà mostrato il messaggio
      if (isValidEmail(email)) {
        message.textContent = "L'indirizzo email è valido."; // Mostra un messaggio di successo
        message.style.color = "green"; // Imposta il colore del testo a verde
      } else {
        message.textContent = "L'indirizzo email non è valido."; // Mostra un messaggio di errore
        message.style.color = "red"; // Imposta il colore del testo a rosso
      }
    }