替代 django-crispy-forms

Posted 2023-02-24

【中文标题】替代 django-crispy-forms

【英文标题】：alternative to django-crispy-forms

【发布时间】：2019-07-31 01:21:15

【问题描述】：

我正在 django 2.1 中开发一个应用程序并使用 bootstrap 4 这需要用户注册表格。在我看到的大多数示例中，都显示了单列表单的示例，这对于具有少量字段的表单来说已经足够了，但是对于更复杂的表单来说，它会很丑陋，因为您必须滚动浏览字段的数量。我想为此设计一个这种类型的表单Server side

调查了一下，我发现了这个教程Advanced Form Rendering with 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】：

也许下面的帖子有帮助，它展示了如何使用 django-floppyforms 来更好地组织前端文件

Better usage of JS & CSS inside Django