使用Django表单替代html表单

使用Django表单替代html表单

1.根目录下创建forms模型

from django import forms   #导入forms模块


class UserForm(forms.Form):   #所有表单类都需要继承forms.Form
    '''
这里一个字段定义的是一个input标签（里面设置属性）
label相当于label标签，max_length为设置该变量可以输入的最大字符
widget为设置input的类型，这里的passwordinput为type='password',添加属性使用attrs={}以字典键值对的形式，这里增加了class和placeholder属性
'''
    username=forms.CharField(label='用户名',max_length=128,widget=forms.TextInput(attrs={'class':'form-control','placeholder':'用户名'}))
    password=forms.CharField(label='密码',max_length=512,widget=forms.PasswordInput(attrs={'class':'form-control','placeholder':'密码'}))

2.修改view.py文件

def login(request):

    if request.method=="POST":   #提交表单后，满足请求为post就执行下面的内容
        message = '所有字段都必须填写'
        login_form=forms.UserForm(request.POST)    #获取每个input标签
        # username = request.POST.get('username')       #获取表单中输入的用户名和密码
        # password = request.POST.get('password')
        # print(username,password)
        # if username and password :    #用户名和密码都不为空
        #     username=username.strip()  #清除用户名前后的空格
        if login_form.is_valid():     #这个就是用于验证输入表单内容的合法性
            username=login_form.cleaned_data['username']      #cleaned_data会将input标签中的变量和值作为以字典的一个元素形式表现出来
            password=login_form.cleaned_data['password']
        # user = User(username, password)         #添加到User表中
        # user.save()                             #存储到数据库中
            #查询数据库中是否存在该用户名和密码
            t_username=User.objects.filter(name=username)
            t_password=User.objects.filter(password=password)
            if t_username and t_password:
                return redirect('/index/')
            elif not t_username:
                # return HttpResponse('用户名不存在')
                message='用户名不存在'
            elif not t_password:
                # return HttpResponse('密码不存在')
                message='密码不存在'
        return render(request,'login/login.html',{"message":message,"login_form":login_form})   #将message信息通过模板传递到网页
    login_form=forms.UserForm()         #保留输入的错误字段
    return render(request,'login/login.html',{"login_form":login_form})

3.修改login.html文件

{% extends 'base.html' %}  <!--继承base网页模板内容,可以浏览网页查看效果-->
{% load staticfiles %}   <!--载入静态方法，用于加载static中的文件-->
{% block title %}登陆{%  endblock %}  <!--设置title，默认使用base模板中的-->
{% block css %}<link href="{% static 'css/login.css'%}" rel="stylesheet" />{% endblock %} <!--使用自定义的css登陆样式，不用base中的-->

{% block content %}   <!--该模板语言用于定义主体内容，和模板中的结合使用-->
    <div class="container">
        <div class="col-md-4 col-md-offset-4">
          <form class='form-login' action="/login/" method="POST">
              {% if message %}      <!--类似if语句-->
                  <div class="alert alert-warning">{{ message }}</div>  <!--使用bootstrap的警示传递message信息-->
              {% endif %}
              {% csrf_token %}
              <h2 class="text-center">欢迎登录</h2>
                <div class="form-group">
                  {{ login_form.username.label_tag }}
                  {{ login_form.username}}
                </div>
                <div class="form-group">
                  {{ login_form.password.label_tag }}
                  {{ login_form.password }}
                </div>
{#              <div class="form-group">#}
{#                <label for="id_username">用户名：</label>#}
{#                <input type="text" name='username' class="form-control" id="id_username" placeholder="Username" autofocus required>#}
{#              </div>#}
{#              <div class="form-group">#}
{#                <label for="id_password">密码：</label>#}
{#                <input type="password" name='password' class="form-control" id="id_password" placeholder="Password" required>#}
{#              </div>#}
              <button type="reset" class="btn btn-default pull-left">重置</button>
              <button type="submit" class="btn btn-primary pull-right">提交</button>
          </form>
        </div>
    </div> <!-- /container -->
{% endblock %}