Usare validator.js nel browser: guida pratica

Usare validator.js nel browser: guida pratica

validator.js è una libreria leggera e collaudata per validare stringhe (email, URL, UUID, numeri di carta, ecc.). Anche se nasce in ambiente Node.js, si può usare comodamente in browser via import ESM oppure tramite bundler.

Opzione 1 — Import ESM da CDN (senza build)

Importa il modulo in uno script ES Module e usa le API. Qui sotto un esempio che valida email e URL e aggiorna elementi esistenti sulla pagina.

// Import ESM (es. in <script type="module">)
import validator from "https://esm.sh/validator@latest";

// Helper per selezionare elementi già presenti nel DOM
const $ = (sel) => document.querySelector(sel);

// Supponiamo di avere input con id "email" e "url" e un output con id "out"
const email = $("#email");
const url = $("#url");
const out = $("#out");
const checkBtn = $("#check");

// Logica di validazione
checkBtn.addEventListener("click", () => {
  const isEmail = validator.isEmail(email.value.trim());
  const isURL = validator.isURL(url.value.trim(), { require_protocol: true });

  const messages = [];
  messages.push(isEmail ? "Email valida" : "Email non valida");
  messages.push(isURL ? "URL valido" : "URL non valido (serve lo schema, es. https://)");

  out.textContent = messages.join(" · ");
});

Note utili per l’import da CDN

  • Usa @latest per ottenere l’ultima versione, oppure blocca una versione specifica (es. @13.12.0).
  • Il pacchetto esporta di default l’oggetto validator con tutti i metodi (es. validator.isEmail).
  • In ambienti CSP restrittivi, assicurati che il dominio del CDN sia consentito.

Opzione 2 — Bundler (Vite/Webpack) con installazione via npm

Se stai già usando un tool di build, importa la libreria nel tuo entry file e usa le API come segue.

// src/main.js
import validator from "validator";

export function validateForm(values) {
  return {
    email: validator.isEmail(values.email ?? ""),
    url: validator.isURL(values.url ?? "", { require_protocol: true }),
    uuid: validator.isUUID(values.uuid ?? "", 4),
  };
}

// Esempio d’uso lato UI (assumendo elementi già presenti nel DOM)
const form = document.querySelector("#signup");
const msg = document.querySelector("#msg");

form?.addEventListener("submit", (e) => {
  e.preventDefault();
  const fd = new FormData(form);
  const email = String(fd.get("email") || "").trim();
  const password = String(fd.get("password") || "");

  const okEmail = validator.isEmail(email);
  const okPassword = validator.isLength(password, { min: 8 }) && validator.matches(password, /[0-9]/);

  msg.textContent = okEmail && okPassword ? "Dati validi. Procedo con l’invio…"
: [
  okEmail ? null : "Email non valida.",
  okPassword ? null : "La password non rispetta i requisiti."
  ].filter(Boolean).join(" ");
});

Pattern comuni

Email

import validator from "https://esm.sh/validator@latest";
validator.isEmail("nome@dominio.tld"); // true/false

URL

import validator from "https://esm.sh/validator@latest";
validator.isURL("https://esempio.com", {
  require_protocol: true,
  allow_underscores: false,
});

Stringhe e numeri

import validator from "https://esm.sh/validator@latest";

validator.isInt("42");          // true
validator.isFloat("3.14");      // true
validator.isBoolean("true");    // true
validator.isNumeric("１２３");   // false per default (cifre full-width)

// Consenti numeri latini soltanto:
validator.isNumeric("123", { no_symbols: true });

Identificatori

import validator from "https://esm.sh/validator@latest";

validator.isUUID("550e8400-e29b-41d4-a716-446655440000", 4); // true
validator.isMongoId("507f1f77bcf86cd799439011");              // true

Sanitizzazione

validator include molte funzioni di normalizzazione e sanificazione.

import validator from "https://esm.sh/validator@latest";

validator.escape('"x"'); // <span>"x"</span>
validator.trim("  testo  ");            // "testo"
validator.blacklist("a_b-c", "_-");     // "abc"
validator.whitelist("a_b-c", "a-z");    // "abc"

Esempio: validazione di un form

Questo esempio impedisce l’invio finché i campi non risultano validi. Presuppone l’esistenza di un form con id signup e di un elemento messaggio con id msg.

import validator from "https://esm.sh/validator@latest";

const form = document.getElementById("signup");
const msg = document.getElementById("msg");

form?.addEventListener("submit", (e) => {
  e.preventDefault();

  const fd = new FormData(form);
  const email = String(fd.get("email") || "").trim();
  const password = String(fd.get("password") || "");

  const okEmail = validator.isEmail(email);
  const okPassword = validator.isLength(password, { min: 8 }) && validator.matches(password, /[0-9]/);

  if (okEmail && okPassword) {
    msg.textContent = "Dati validi. Procedo con l’invio…";
    // invia con fetch() se necessario
  } else {
    msg.textContent = [
     okEmail ? null : "Email non valida.",
     okPassword ? null : "La password non rispetta i requisiti."
   ].filter(Boolean).join(" ");
}
});

Consigli pratici

  • Convalida anche lato server: la validazione client-side migliora l’esperienza, ma non sostituisce i controlli server-side.
  • Configura le opzioni: molte funzioni accettano parametri (es. isURL) per adattarsi ai tuoi casi d’uso.
  • Normalizza prima, valida poi: trim, normalizeEmail e simili riducono i falsi negativi.
  • Blocca la versione in produzione per evitare cambiamenti improvvisi: es. https://esm.sh/validator@13.12.0.

Troubleshooting

  1. “Failed to load module”: verifica che il browser supporti i moduli ES e che il CDN sia raggiungibile.
  2. “validator is not a function”: usa l’import default (import validator from "validator") e non le named exports.
  3. RegEx troppo permissivi: preferisci le API di validator ai regex personalizzati quando possibile.

Conclusione

Con un semplice import ESM o tramite il tuo bundler, validator.js offre un set completo e affidabile di controlli per i form e per la validazione dei dati direttamente nel browser.