El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

WTForms és una biblioteca de Python que facilita la creació i validació de formularis web. En aquest tema, aprendrem com integrar WTForms amb Flask per gestionar la validació de formularis de manera eficient i segura.

Objectius

Entendre què és WTForms i per què és útil.
Aprendre a crear formularis amb WTForms.
Implementar la validació de formularis.
Gestionar errors de validació i proporcionar retroalimentació a l'usuari.

Què és WTForms?

WTForms és una biblioteca que permet definir formularis com a classes de Python. Això facilita la gestió de la lògica de validació i la generació de formularis HTML. Alguns avantatges de WTForms són:

Separació clara de la lògica de validació i la presentació.
Suport per a múltiples tipus de camps i validacions.
Integració fàcil amb Flask mitjançant l'extensió Flask-WTF.

Instal·lació

Per començar a utilitzar WTForms amb Flask, primer hem d'instal·lar l'extensió Flask-WTF:

pip install Flask-WTF

Creació d'un Formulari amb WTForms

Definició del Formulari

Comencem definint un formulari simple amb WTForms. Crearem un formulari de registre d'usuari amb camps per al nom d'usuari, correu electrònic i contrasenya.

# forms.py
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email, Length

class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(min=2, max=20)])
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired(), Length(min=6)])
    submit = SubmitField('Sign Up')

Explicació del Codi

FlaskForm: Classe base per a tots els formularis de WTForms en Flask.
StringField, PasswordField, SubmitField: Tipus de camps de formulari.
validators: Llista de validacions aplicades a cada camp. En aquest cas, utilitzem DataRequired, Email i Length.

Integració del Formulari en una Vista de Flask

Ara integrem el formulari en una vista de Flask i gestionem la seva validació.

# app.py
from flask import Flask, render_template, flash, redirect, url_for
from forms import RegistrationForm

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'

@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        flash(f'Account created for {form.username.data}!', 'success')
        return redirect(url_for('home'))
    return render_template('register.html', form=form)

if __name__ == '__main__':
    app.run(debug=True)

Explicació del Codi

SECRET_KEY: Clau secreta necessària per a la protecció de formularis contra CSRF (Cross-Site Request Forgery).
validate_on_submit(): Mètode que valida el formulari quan es fa una sol·licitud POST.
flash(): Funció per mostrar missatges flash a l'usuari.

Plantilla HTML

Finalment, creem una plantilla HTML per renderitzar el formulari.

<!-- templates/register.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
</head>
<body>
    <h1>Register</h1>
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.email.label }}<br>
            {{ form.email(size=32) }}<br>
            {% for error in form.email.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>

Explicació del Codi

form.hidden_tag(): Genera un camp ocult per a la protecció CSRF.
form.username, form.email, form.password: Renderitza els camps del formulari.
form.username.errors, form.email.errors, form.password.errors: Mostra els errors de validació.

Exercici Pràctic

Exercici

Crea un formulari de login amb camps per al correu electrònic i la contrasenya. Implementa la validació per assegurar-te que els camps no estiguin buits i que el correu electrònic tingui un format vàlid.

Solució

# forms.py
class LoginForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Login')

# app.py
@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        flash(f'Logged in as {form.email.data}!', 'success')
        return redirect(url_for('home'))
    return render_template('login.html', form=form)

# templates/login.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <h1>Login</h1>
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <p>
            {{ form.email.label }}<br>
            {{ form.email(size=32) }}<br>
            {% for error in form.email.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>

Conclusió

En aquest tema, hem après a utilitzar WTForms per crear i validar formularis en una aplicació Flask. Hem vist com definir formularis, integrar-los en vistes de Flask i proporcionar retroalimentació d'errors als usuaris. La validació de formularis és una part crucial de qualsevol aplicació web, i WTForms facilita aquesta tasca de manera eficient i segura.

Validació de Formularis amb WTForms

Introducció

Objectius

Què és WTForms?

Instal·lació

Creació d'un Formulari amb WTForms

Definició del Formulari

Explicació del Codi

Integració del Formulari en una Vista de Flask

Explicació del Codi

Plantilla HTML

Explicació del Codi

Exercici Pràctic

Exercici

Solució

Conclusió

Curs de Desenvolupament Web amb Flask

Mòdul 1: Introducció a Flask

Mòdul 2: Conceptes Bàsics de Flask

Mòdul 3: Formularis i Entrada d'Usuari

Mòdul 4: Integració de Bases de Dades

Mòdul 5: Autenticació d'Usuaris

Mòdul 6: Conceptes Avançats de Flask

Mòdul 7: APIs RESTful amb Flask

Mòdul 8: Desplegament i Producció

Mòdul 9: Proves i Millors Pràctiques

Mòdul 10: Extensions i Ecosistema de Flask