Настройка формы с помощью API Django FORM

В настоящее время я создаю форму регистрации/логина с помощью фреймворка Django, поскольку я новичок в этом фреймворке, я не очень много знаю об FORM API.

Я не использую FORM API, поскольку не знаю, можно ли его настроить. Есть ли способ использовать мой стиль с FORM API? На данный момент я просто создаю свой собственный, не используя API, но поскольку FORM API более безопасен и гораздо быстрее настраивается для создания пользователя, я хотел бы использовать его. Могу ли я просто внедрить API в мой html-код, не выставляя свои классы и стили?

Вот моя HTML форма:

{% if messages %}
<ul class="messages">
    {% for message in messages %}
    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}

    <div class="limiter">
        <div class="container-login100" style="background:black;">
            <div class="wrap-login100">
                <form class="login100-form validate-form"  method='POST' action="{% url 'users:register' %}" >
                    {% csrf_token %}
                    <span class="login100-form-logo">
                        <i class="zmdi zmdi-landscape"></i>
                    </span>
                    <span class="login100-form-title p-b-34 p-t-27">
                        Register
                    </span>
                    <div class="wrap-input100 validate-input" data-validate = "Enter username">
                        <input class="input100" type="text" name="username" placeholder="Username" required>
                        <span class="focus-input100" data-placeholder="&#xf207;"></span>
                    </div>
                    <div class="wrap-input100 validate-input" data-validate="Enter password">
                        <input class="input100" type="password" name="pass" placeholder="Password" required>
                        <span class="focus-input100" data-placeholder="&#xf191;"></span>
                    </div>
    
                    <div class="wrap-input100 validate-input" data-validate="Confirm password">
                        <input class="input100" type="password" name="pass-confirm" placeholder="Confirm Password" required>
                        <span class="focus-input100" data-placeholder="&#xf191;"></span>
                    </div>
    
                    <div class="wrap-input100 validate-input" data-validate="Enter Email">
                        <input class="input100" type="email" name="mail" placeholder="E-Mail" required>
                        <span class="focus-input100" data-placeholder="&#xf191;"></span>
                    </div>
    
                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn" type="submit" name="submit" value="submit">
                            Register
                        </button>
                    </div>
    
                    <div class="text-center p-t-90">
                        <a class="txt1" href="login">
                            Already registered?
                        </a>
                    </div>
    
                </form>
            </div>
        </div>
    </div>

Вот мой бэкенд views.py:

Вы можете использовать встроенный UserCreationForm[django-doc], который находится по пути from django.contrib.auth.forms import UserCreationForm.

Теперь, как в вашем текущем коде, вам не нужно использовать messages фреймворк, так как встроенный Form уже имеет множество валидаций, которые вы сделали.

В вашем коде вы можете реализовать следующим образом, просто сделайте это:

Я предоставляю только минимальный воспроизводимый пример, так как у вас много классов css в шаблонах, поэтому я только добавляю my_class к каждому полю, вы можете добавить свой собственный класс, вы можете увидеть его с Ctrl+U или page source.

urls.py

from django.urls import path
from . import views
app_name = 'users'
urlpatterns = [
    path('', views.register, name='home'),
    path('success/', views.success, name='success')
]

views.py

from django.http import HttpResponseRedirect
from django.shortcuts import render
from django.contrib.auth.models import User
from django.contrib.auth.hashers import make_password
from django.urls import reverse

from home.forms import MyUserCreationForm


def register(request):
    if request.method == 'POST':
        form = MyUserCreationForm(request.POST)
        if form.is_valid():
            username = form.cleaned_data['username']
            password1 = form.cleaned_data['password1']
            email = form.cleaned_data['email']
            user_data = User(username=username,
                             password=make_password(password1), email=email)

            user_data.save()
            return HttpResponseRedirect(reverse('users:success'))
    else:
        form = MyUserCreationForm()
    return render(request, 'users/register.html', {'form': form})


def success(request):
    return render(request, 'users/thanks.html')

forms.py

from django.contrib.auth.forms import UserCreationForm
from django import forms
from django.contrib.auth import password_validation

from django.utils.translation import gettext, gettext_lazy as _
from django.contrib.auth.models import User


class MyUserCreationForm(UserCreationForm):
    password1 = forms.CharField(
        label=_("Password"),
        strip=False,
        widget=forms.PasswordInput(
            attrs={'autocomplete': 'new-password', 'class': 'my_class', 'placeholder': 'password'}),
        help_text=password_validation.password_validators_help_text_html(),
        error_messages={'required': 'password is required'}
    )
    password2 = forms.CharField(
        label=_("Password confirmation"),
        widget=forms.PasswordInput(
            attrs={'autocomplete': 'new-password', 'class': 'my_class', 'placeholder': 'confirm password'}),
        strip=False,
        help_text=_("Enter the same password as before, for verification."),
        error_messages={'required': 'password confirm is required'}
    )
    email = forms.CharField(widget=forms.EmailInput(
        attrs={'class': 'my_class', 'placeholder': 'Email'}), error_messages={'required': 'Email is required'})

    class Meta:
        model = User
        fields = ['username', 'email']
        error_messages = {
            'username': {'required': 'Username is required'},
        }
        widgets = {
            'username': forms.TextInput(attrs={'class': 'myclass', 'placeholder': 'Username'}),
        }

Note: вы можете использовать любой класс в любом поле, вы можете изменить здесь для каждого поля attrs={'class': 'my_class'), я использовал my_class в каждом поле просто для примера, вы можете посмотреть это в исходнике страницы.

Note: Пример может быть немного сложным, так как я унаследовал и изменил встроенную форму django для добавления css classes.

register.html или файл шаблона

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color:red;
            font-size:1.15rem;
        }
    </style>
</head>
<body>
    {% if form %}
    <form method="POST" novalidate>
        {% csrf_token %}
        {% if form.non_field_errors %}
        {% for error in form.non_field_errors %}
        <div class="red">
            <p>{{error}}</p>
        </div>
        {% endfor %}
        {% endif %}

        {% for field in form %}
        <div>
            {{field.label_tag}} {{field}}
            <br>
            {% for error in field.errors  %}
                <div class="red">
                    <span>{{error}}</span>
                </div>
            {% endfor %}
        </div>
        {% endfor %}
        <input type="submit" value="Save">
    </form>
    {% else %}
    <p>There is some error, form does not come from view.</p>
    {% endif %}
</body>
</html>

thanks.html (который будет использоваться для перенаправления после успешного отправления формы)

<body>
    <h2>You are now a user! logged in !</h2>
</body>

В этом примере ваши данные успешно сохранены в базе данных, вы можете увидеть их, создав суперпользователя, через python manage.py createsuperuser и войдя в админку сайта, в таблице Users.

Вышеуказанная работа может стать более простой с использованием классов authentication views[django-doc].

Вернуться на верх