Django-crispy-forms的替代方案

5

我正在使用Django 2.1和Bootstrap 4开发应用程序,需要一个用户注册表格。在我看到的大多数示例中,只展示了单列表格的示例,这对于仅有少量字段的表格已经足够,但对于更复杂的表格来说,这样做会显得很丑陋,因为您必须浏览大量字段。因此,我想设计这种类型的表单服务器端

Form created with the grid system

调查一下,我发现这个 Django Crispy Forms高级表单渲染教程 使用了 Django Crispy Forms 并且可以得到想要的表单。但是我不想使用它,所以尝试手动完成并得到了这个结果。我认为它可以更好地改进,因为它不是很干净,但它是达到与使用Django Crispy Forms相同结果的替代方法。我认为可以使用ajax来完成这个,但到目前为止我从未使用过它。他还会问自己为什么要复杂化这个过程,如果已经有人做了,那么这是一种理解所有工作原理的方式,没有任何魔法。

views.py

def sign_up(request):
if 'code_user' in request.session:
    return redirect('home')
elif request.method == 'POST':
    form = SignupForm(request.POST)
    if form.is_valid():
        user = form.save()
        request.session['code_user'] = user.code
        request.session['username'] = user.username
        return redirect('home')
    else:
        for field in form:
            if field.errors:
                form.fields[field.name].widget.attrs['class'] = 'form-control is-invalid'
        return render(request, 'blog/signup.html', {'form': form})

else:
    form = SignupForm()
    return render(request, 'blog/signup.html', {'form': form})

为了指示哪些字段无效,您必须添加此类 'is-invalid',否则它将无法工作。

forms.py

class SignupForm(forms.ModelForm):

class Meta:
    model = User
    fields = ['username', 'email', 'password', 'first_name', 'last_name', 'age', 'gender', 'country']
    widgets = {
        'username': forms.TextInput(attrs={'class': 'form-control', }),
        'country': forms.Select(attrs={'class': 'form-control', }),
        'first_name': forms.TextInput(attrs={'class': 'form-control', }),
        'last_name': forms.TextInput(attrs={'class': 'form-control', }),
        'age': forms.DateInput(attrs={'class': 'form-control', 'type': 'date'}),
        'email': forms.EmailInput(attrs={'class': 'form-control', }),
        'password': forms.PasswordInput(attrs={'class': 'form-control', }),
        'gender': forms.Select(attrs={'class': 'form-control', }),
    }
    labels = {
        'username': _('Username'),
        'country': _('Country'),
        'first_name': _('First Name'),
        'last_name': _('Last Name'),
        'age': _('Birthdate'),
        'email': _('Email'),
        'password': _('Password'),
        'gender': _('Gender'),
    }
    error_messages = {
        'username': {
            'unique': _('The username is not available')
        },
        'first_name': {
            'required': _('The field can not be empty')
        },
        'last_name': {
            'required': _('The field can not be empty')
        },
        'password': {
            'required': _('The field can not be empty')
        }

    }

signup.html

    {% extends 'blog/base.html' %}

{% block content %}

 <div class="row justify-content-center" style="padding-top: 1rem">
     <div class="col-md-10">
         <div class="card">
             <div class="card-header text-center">Sign up</div>
             <div class="card-body">
                 <form method="POST">
                     {% csrf_token %}
                     <div class="form-row">
                         <div class="form-group col-md-4">
                             <label >{{ form.username.label }}</label>
                             {{ form.username }}
                             {% for error in form.username.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>

                         <div class="form-group col-md-4">
                             <label>{{ form.first_name.label }}</label>
                             {{ form.first_name }}
                             {% for error in form.first_name.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>

                         <div class="form-group col-md-4">
                             <label>{{ form.last_name.label }}</label>
                             {{ form.last_name }}
                             {% for error in form.last_name.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>
                     </div>

                     <div class="form-row">
                         <div class="form-group col-md-4">
                             <label >{{ form.age.label }}</label>
                             {{ form.age }}
                             {% for error in form.age.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>

                         <div class="form-group col-md-4">
                             <label >{{ form.gender.label }}</label>
                             {{ form.gender }}
                             {% for error in form.gender.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>

                         <div class="form-group col-md-4">
                             <label >{{ form.country.label }}</label>
                             {{ form.country}}
                             {% for error in form.country.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>
                     </div>

                     <div class="form-row">
                         <div class="form-group col-md-6">
                             <label >{{ form.email.label }}</label>
                             {{ form.email }}
                              {% for error in form.email.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>

                         <div class="form-group col-md-6">
                             <label >{{ form.password.label }}</label>
                             {{ form.password }}
                              {% for error in form.password.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>
                     </div>

                     <button type="submit" class="btn btn-primary">Sign in</button>
                 </form>
             </div>
         </div>
     </div>
 </div>

{% endblock %}

在模板中,我猜那就是一切不够简洁的地方,看到这么多循环让我感到不可承受,而且我认为这并不是最优的。
1个回答

0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接