Enlace de datos y validación

En Un formulario que hace algo cada campo se leía y se revisaba a mano. Aquí los controles hacen ese trabajo solos: cada uno está enlazado a un campo de los datos del formulario, lleva sus propias reglas y muestra su propio mensaje de error. El Python que queda por escribir es un solo if.

Objetivo	Tiempo	Nivel	Necesitas
Un formulario de registro que se valida solo	25 minutos	Intermedio · un poco de Python	Un formulario que hace algo

Qué vas a aprender

• Enlazar un campo a una clave de form.data (en los dos sentidos: muestra el valor y guarda lo que escribe el usuario).
• Mostrar una expresión en vivo en una etiqueta (f"Nice to meet you, {name}!").
• Añadir reglas: obligatorio, un patrón, una longitud mínima, un número mínimo, tu propio mensaje.
• Validarlo todo con form.validate(), y leer form.data y form.errors.

Cada control revisa sus propias reglas y muestra el mensaje debajo de sí.

Pasos

1. Dibuja el formulario. Un formulario nuevo llamado signup con un Título, una Etiqueta de texto llamada greeting, tres Cuadros de texto (your_name, email, password, este último con Contraseña activado), un Número (Number box) llamado age, una Casilla (Check box) llamada terms (texto I accept the terms), una etiqueta pequeña summary, una etiqueta status y un Botón llamado create.

2. Enlaza los campos. Selecciona your_name y, en la sección Datos (Data) de Propiedades, escribe name en Enlazar a (Bind to). Haz lo mismo con los demás:

   Control	Enlazar a	Reglas (sección Datos)
   your_name	name	Obligatorio
   email	email	Obligatorio, Patrón [^@\s]+@[^@\s]+\.[a-z]{2,}, Mensaje Enter a valid email
   password	password	Obligatorio, Longitud mínima 8
   age	age	Mínimo 13, Mensaje You must be 13 or older
   terms	terms	Obligatorio (una casilla solo pasa si está marcada), Mensaje Please accept the terms

   

   La sección Datos: el campo al que está enlazado el control y sus reglas.

3. Muestra una expresión en vivo. Un control de solo lectura (etiqueta, título, insignia…) puede enlazarse a una expresión de Python sobre los datos, que se recalcula en cada redibujado. Selecciona greeting y pon en Enlazar a:

   f"Nice to meet you, {name}!" if name else "Fill in the form below."

   Y en summary:

   f"{len(password)} characters in your password"

4. Ejecútalo (F5) y escribe. El saludo sigue a tu nombre letra a letra, y cada campo revisa sus reglas mientras escribes: un borde rojo y una burbuja con el mensaje debajo.

5. Valida al hacer clic. Haz doble clic en create y escribe el manejador:

   def create_click(form, event):
       if not form.validate():          # revisa cada regla y muestra cada mensaje
           form.status.color = "error"
           form.status.text = f"{len(form.errors)} field(s) need your attention."
           return
       data = form.data                 # {"name": ..., "email": ..., "age": 18, "terms": True, ...}
       form.status.color = "success"
       form.status.text = f"Welcome aboard, {data['name']}!"

   form.data es un dict normal que llenan los controles enlazados. Guárdalo, envíalo a una API o pásalo a otro formulario.

Cargar datos existentes

Para editar un registro en lugar de crear uno, asígnalo: form.data = {"name": "Ada", "email": "ada@example.com"} en el manejador load del formulario llena cada control enlazado. Otro formulario también puede pasarlo: form.open("signup", data=customer).

Errores del servidor

Las reglas atrapan errores de tipeo. Para comprobaciones que solo puede hacer un servidor (“ese correo ya existe”), pon el mensaje tú: form.email.error = "Already registered". None lo borra.

Código completo

signup.pzform guarda el diseño, los enlaces y las reglas; signup.py, solo el botón:

examples/tutorial/designer/signup.py

"""Event handlers for the sign-up form (tutorial: Data binding and validation).

    pyzed run examples/tutorial/designer/signup.pzform

The controls are bound to fields of ``form.data`` (Properties → Data → Bind to) and carry their
validation rules, so the handler only has to call ``form.validate()`` and read ``form.data``.
"""


def create_click(form, event):
    """Runs when create is clicked."""
    if not form.validate():  # checks every rule and shows the messages under the controls
        form.status.color = "error"
        form.status.text = f"{len(form.errors)} field(s) need your attention."
        return
    data = form.data  # {"name": ..., "email": ..., "password": ..., "age": ..., "terms": True}
    print("New account:", {k: v for k, v in data.items() if k != "password"})
    form.status.color = "success"
    form.status.text = f"Welcome aboard, {data['name']}!"

uv

Windows, macOS y Linux

uv run --with pyzed-ui pyzed run examples/tutorial/designer/signup.pzform

pip

macOS / Linux

python3 -m venv .venv
source .venv/bin/activate
python -m pip install pyzed-ui
pyzed run examples/tutorial/designer/signup.pzform

Windows (PowerShell)

py -m venv .venv
.venv\Scripts\Activate.ps1
python -m pip install pyzed-ui
pyzed run examples\tutorial\designer\signup.pzform

python

macOS / Linux (con Pyzed ya instalado)

python3 -m pyzed run examples/tutorial/designer/signup.pzform

Windows (con Pyzed ya instalado)

py -m pyzed run examples\tutorial\designer\signup.pzform

La validación en el ejemplo de inicio de sesión: un email incorrecto se marca al escribir y se limpia al corregirlo.

Eventos de este tutorial

Los controles enlazados casi no necesitan eventos: cada cambio va solo a form.data. El formulario tiene un handler, create_click, que llama a form.validate() y lee form.data.

Prueba más eventos

def form_load(form, event):                 # empieza en la primera caja
    return form.name.focus()


def terms_change(form, event):              # una casilla: event.value es True o False
    form.create.enabled = event.value


def email_change(form, event):              # comprueba un campo mientras se escribe
    form.email.validate()                   # muestra (o quita) su mensaje al momento

Siguiente

• Enlace de datos y validación en el manual del diseñador: rutas anidadas (customer.address.city), tablas, traducciones con @claves y vista previa en otros idiomas.
• Errores de validación de Pydantic, Django o FastAPI.
• Una app con varias vistas.