Cómo Formatear el RUT en Aplicaciones Web y Móviles

El formateo del RUT en aplicaciones web debe ser fluido y ayudar al usuario mientras escribe. Estas técnicas mejoran la experiencia de usuario en formularios con campo RUT.

Autoformateo mientras el usuario escribe

// Formatea el RUT a medida que el usuario escribe
function autoFormatRut(input) {
  let v = input.value.replace(/[^0-9kK]/gi, '').toUpperCase();
  
  if (v.length <= 1) {
    input.value = v;
    return;
  }
  
  const dv = v.slice(-1);
  const body = v.slice(0, -1);
  const formatted = body.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
  input.value = formatted + '-' + dv;
}

// Usar en el evento input
document.getElementById('rut').addEventListener('input', (e) => autoFormatRut(e.target));

Buenas prácticas de UX

• Muestra el placeholder con el formato esperado: "Ej: 12.345.678-9".
• Valida en tiempo real y muestra feedback visual (verde/rojo).
• Acepta tanto con puntos como sin puntos al pegar.
• Muestra mensaje de error claro: "RUT inválido" vs "Formato incorrecto".

Preguntas frecuentes

¿Debo validar el RUT en el frontend y el backend?

Sí. La validación del frontend mejora la UX, pero siempre valida también en el backend para seguridad, ya que el JS puede deshabilitarse o manipularse.