Django和Bootstrap模式

如何解决Django和Bootstrap模式

请帮助我进行项目。我是Django和Bootstrap的新手，目前正在从事一个项目。对于用户注册，我使用的是弹出模式。

我已经设置了以下内容：

带有模式的HTML文件

{% load static %}
<!-- Register Modal Starts -->
<div class="row mt25 tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  <div class="col-lg-6 col-xl-6">
    <div class="regstr_thumb">
      <img class="img-fluid w100" src="{% static 'images/resource/regstr.jpg' %}" alt="regstr.jpg">
    </div>
  </div>
  <div class="col-lg-6 col-xl-6">
  <div class="sign_up_form">
    <form action="{% url 'register' %}" method="POST" id="register-form">
      {% csrf_token %}
    <div class="heading">
      <h4>Register</h4>
    </div>
      <div class="row">
        <div class="col-lg-12">
          <button type="submit" class="btn btn-block btn-fb"><i class="fa fa-facebook float-left mt5"></i> Login with Facebook</button>
        </div>
        <div class="col-lg-12">
          <button type="submit" class="btn btn-block btn-googl"><i class="fa fa-google float-left mt5"></i> Login with Google</button>
        </div>
      </div>
      <hr>
      <div class="form-group ui_kit_select_search mb0">
        <select class="selectpicker" data-live-search="true" data-width="100%">
          <option data-tokens="SelectRole">Landlord</option>
          <option data-tokens="Agent/Agency">Property Manager</option>
          <option data-tokens="SingleUser">Homeowner</option>
        </select>
      </div>
      <div class="form-group input-group">
        <p>{{ form.errors.email}}</p>
        {{form.email}}
        <input type="email" class="form-control" id="exampleInputEmai" placeholder="Email">
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="fa fa-envelope-o"></i></div>
          </div>
      </div>
      <div class="form-group input-group">
        <p>{{ form.errors.password1 }}</p>
        {{ form.password1 }}
          <input type="password" name="password1" class="form-control" id="exampleInputPassword2" placeholder="Password">
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="flaticon-password"></i></div>
          </div>
      </div>
      <div class="form-group input-group">
        <p>{{ form.errors.password2 }}</p>
        {{ form.password2 }}
          <input type="password" name="password2" class="form-control" id="exampleInputPassword3" placeholder="Re-enter password">
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="flaticon-password"></i></div>
          </div>
      </div>
      <div class="form-group input-group">
        <p>{{ form.errors.country }}</p>
        {{ form.country }}
          <input type="country" name="country" class="form-control" id="exampleInputCountry" placeholder="Country">
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="flaticon-country"></i></div>
          </div>
      </div>
      <div class="form-group input-group">
        <p>{{ form.errors.city }}</p>
        {{ form.city }}
          <input type="city" name="city" class="form-control" id="exampleInputCity" placeholder="City">
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="flaticon-city"></i></div>
          </div>
      </div>
      <div class="form-group input-group">
        <p>{{ form.errors.phone_number }}</p>
        {{ form.phone_number }}
          <input type="phone" name="phone_number" class="form-control" id="exampleInputPhone" placeholder="Phone Number">
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="flaticon-phone"></i></div>
          </div>
      </div>
      <div class="form-group custom-control custom-checkBox">
        <input type="checkBox" class="custom-control-input" id="exampleCheck2">
        <label class="custom-control-label" for="exampleCheck2">I have read and accept the Terms and Privacy Policy?</label>
      </div>
      <button type="submit" class="btn btn-log btn-block btn-thm">Sign Up</button>
      <p class="text-center">Already have an account? <a class="text-thm" href="#">Log In</a></p>
    </form>
  </div>
  </div>
</div>

views.py文件：

from django.shortcuts import render,redirect
from .forms import UserAdminCreationForm
from django.contrib import messages


def login(request):
    return render(request,'login.html')


def register(request):
    form = UserAdminCreationForm()
    if request.method == 'POST':
        form = UserAdminCreationForm(request.POST)
        if form.is_valid():
            form.save()
            user = form.cleaned_data.get('email')
            messages.success(request,'Account was created for ' + user)
            return redirect('index')

    return render(request,'accounts/register.html',{'form': form})

urls.py文件

from django.urls import path,include
from . import views

urlpatterns = [
    path('accounts/',include('django.contrib.auth.urls')),path('register',views.register,name='register'),path('logout',views.logout,name='logout'),path('dashboard',views.dashboard,name='dashboard'),]

forms.py文件：

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


class UserAdminCreationForm(UserCreationForm):
    """A Custom form for creating new users."""
    email = forms.EmailField(label="",widget=forms.EmailInput(attrs={'class': 'form-control','placeholder': 'Email Address'}),)
    password1 = forms.CharField(label="",widget=forms.PasswordInput(attrs={'class': 'form-control','placeholder': 'Password'}))
    password2 = forms.CharField(label="",'placeholder': 'Repeat Password'}))
    country = forms.CharField(label="",max_length=50,widget=forms.TextInput(attrs={'class': 'form-control','placeholder': 'Country'}))
    city = forms.CharField(label="",'placeholder': 'City'}))
    phone_number = forms.CharField(label="",max_length=20,'placeholder': 'Phone Number'}))

    class Meta:
        model = get_user_model()
        fields = ['user_types','email','password1','password2','country','city','phone_number']

当打开带有注册表单的弹出模式并单击“注册”时，我已经设置了一个新的页面帐户/注册页面以进行测试。但是我不想要此页面，我想填写上面的表格并在数据库中添加用户。我该如何配置？

我无法解决的问题是：

1. 当我填写弹出式注册（在模式中）并按SignUp将用户添加到没有帐户/注册页面的数据库中时，怎么办？

请帮助！谢谢您的时间！

解决方法

使用form。{field name}更改输入字段，并添加{{form.errors。{fieldname}}} 这是您的代码：

    <!-- Login/Register Starts -->
    <!-- Modal -->
    <div class="sign_up_modal modal fade" tabindex="-1" role="dialog" aria-hidden="true" id=bd-example-modal-lg>
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body container pb20">
                    <div class="row">
                        <div class="col-lg-12">
                            <ul class="sign_up_tab nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Login</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Register</a>
                                </li>
                            </ul>
                        </div>
                    </div>

<!-- Register Modal Starts -->
<div class="row mt25 tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  <div class="col-lg-6 col-xl-6">
    <div class="regstr_thumb">
      <img class="img-fluid w100" src="{% static 'images/resource/regstr.jpg' %}" alt="regstr.jpg">
    </div>
  </div>
  <div class="col-lg-6 col-xl-6">
  <div class="sign_up_form">
    <form action="{% url 'register' %}" method="POST" id="register-form">
      {% csrf_token %}
      {{form.as_p}}
    <div class="heading">
      <h4>Register</h4>
    </div>
      <div class="row">
        <div class="col-lg-12">
          <button type="submit" class="btn btn-block btn-fb"><i class="fa fa-facebook float-left mt5"></i> Login with Facebook</button>
        </div>
        <div class="col-lg-12">
          <button type="submit" class="btn btn-block btn-googl"><i class="fa fa-google float-left mt5"></i> Login with Google</button>
        </div>
      </div>
      <hr>
      <div class="form-group ui_kit_select_search mb0">
        <select class="selectpicker" data-live-search="true" data-width="100%">
          <option data-tokens="SelectRole">Landlord</option>
          <option data-tokens="Agent/Agency">Property Manager</option>
          <option data-tokens="SingleUser">Homeowner</option>
        </select>
      </div>

      <div class="form-group input-group">
           <p>{{ form.errors.email}}</p>
          {{ form.email }}
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="fa fa-envelope-o"></i></div>
          </div>
      </div>
      <div class="form-group input-group">
           <p>{{ form.errors.password1  }}</p>
          {{ form.password1  }}
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="flaticon-password"></i></div>
          </div>
      </div>
      <div class="form-group input-group">
        {{ form.password2  }}
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="flaticon-password"></i></div>
          </div>
      </div>
      <div class="form-group input-group">
           <p>{{ form.errors.country  }}</p>
          {{ form.country  }}
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="flaticon-country"></i></div>
          </div>
      </div>
      <div class="form-group input-group">
            <p>{{ form.errors.city }}</p>
          {{ form.city }}
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="flaticon-city"></i></div>
          </div>
      </div>
      <div class="form-group input-group">
            <p>{{ form.phone_number  }}</p>
          {{ form.phone_number  }}
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="flaticon-phone"></i></div>
          </div>
      </div>
      <div class="form-group custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="exampleCheck2">
        <label class="custom-control-label" for="exampleCheck2">I have read and accept the Terms and Privacy Policy?</label>
      </div>
      <button type="submit" class="btn btn-log btn-block btn-thm">Sign Up</button>
      <p class="text-center">Already have an account? <a class="text-thm" href="#">Log In</a></p>
    </form>
  </div>
  </div>
</div>