2.8.5Django --11 Django的forms组件

最新推荐文章于 2020-03-06 16:02:43 发布

寒暄

最新推荐文章于 2020-03-06 16:02:43 发布

阅读量136

点赞数

分类专栏： # ---Django&Flask 文章标签： python django

本文链接：https://blog.csdn.net/qq_41106844/article/details/105553910

版权

---Django&Flask 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

Django目录：https://blog.csdn.net/qq_41106844/article/details/105554082

什么是forms组件

forms组件就是django内置的一个类，来弥补form表单的功能，例如提供校验数据，渲染表单，页面显示错误等功能。

接着我们就通过一个简单的登录注册例子来讲解forms组件。

简单例子

他需要完成四个功能：
1.校验数据
2.页面显示错误信息
3.渲染页面
4.重置输入

校验规则如下：
用户名不能低于五个字。
密码必须是纯数字。
邮箱必须符合邮箱格式。
错误返回给用户。

formsDemo.formsDemo.urls.py
---------------------------
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('register/',views.register)
]

formsDemo.app01.models.py
-------------------------
from django.db import models

# Create your models here.
class UserInfo(models.Model):
    name=models.CharField(max_length=32)
    pwd=models.IntegerField()
    email=models.EmailField()

formsDemo.app01.views.py
------------------------
from django.shortcuts import render,HttpResponse
from app01.models import UserInfo

#使用forms进行校验的话，必须设置一个forms的类用来定义规则。
from django import forms
class UserForm(forms.Form):
    #自定义报错信息
    msg={'required':'该字段不能为空'}
    #设置name长度不能超过5.
    name=forms.CharField(max_length=5,error_messages=msg)
    #设置密码只能是纯数字.
    pwd=forms.IntegerField()
    email=forms.EmailField(error_messages={"invalid":"邮箱格式不正确"})

def register(request):

    if request.method=="POST":
        form=UserForm(request.POST)
        # is_valid  用来校验数据是否合法
        if form.is_valid():
            print(form.cleaned_data)       # 所有干净的字段以及对应的值
            #将合法数据写入数据库
            UserInfo.objects.create(**form.cleaned_data)
            #返回ok
            return HttpResponse("OK")
        else:
            # cleaned_data输出不合法数据  errors输出字段错误信息
            print(form.cleaned_data)       #
            print(form.errors)             # ErrorDict : {"校验错误的字段":["错误信息",]}
            print(form.errors.get("name")) # ErrorList ["错误信息",]
            # 获取错误
            error = form.errors
            #将错误返回给模板
            return render(request, "register.html", locals())
    else:
        return render(request,'register.html')

formsDemo.templates.register.html
---------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color:red;
        }
    </style>
</head>
<body>

<form action="" method="post">
    {% csrf_token %}
    <div>
        <label for="user">用户名</label>
        <p><input type="text" name="name" id="name"></p><span class="error">{{ error.name.0 }}</span>
    </div>
    <div>
        <label for="pwd">密码</label>
        <p><input type="password" name="pwd" id="pwd"></p><span>{{ error.pwd.0 }}</span>
    </div>
     <div>
        <label for="email">邮箱</label>
        <p><input type="text" name="email" id="email"></p><span>{{ error.email.0 }}</span>
    </div>
    <input type="submit">
</form>

</body>
</html>

页面截图

校验规则1-1

校验规则1-2

校验规则2-1

校验规则2-2

校验规则3-1

校验规则3-2

一条正确的数据

提交成功的页面

现在我们的例子完成了 1 和 2 两个功能，还有渲染页面和重置数据没有完成。我么现在的页面有四个input标签，可以一个一个手打，但是如果有十个，二十个呢，我们怎么自己生产form表单，这就是渲染页面的功能。同时如果我们表单有一项填错了，后台会自动返回新的页面，我们刚才填的数据就没了，这就是很没有用户体验的事情。

渲染页面方式1

formsDemo.app01.views.py
------------------------
def register(request):  
    if request.method=="POST":
        form = UserForm(request.POST)
        # is_valid  用来校验数据是否合法
        if form.is_valid():
            print(form.cleaned_data)       # 所有干净的字段以及对应的值
            #将合法数据写入数据库
            UserInfo.objects.create(**form.cleaned_data)
            #返回ok
            return HttpResponse("OK")
        else:
            # cleaned_data输出不合法数据  errors输出字段错误信息
            print(form.cleaned_data)       #
            print(form.errors)             # ErrorDict : {"校验错误的字段":["错误信息",]}
            print(form.errors.get("name")) # ErrorList ["错误信息",]
            # 获取错误
            error = form.errors
            #将错误返回给模板
            return render(request, "register.html", locals())

    else:
        form = UserForm()
        return render(request,'register.html',locals())

formsDemo.templates.register.html
---------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="" method="post">
    {% csrf_token %}
    {{form.as_p}}
    <input type="submit">
</form>

</body>
</html>

渲染页面1

渲染代码

渲染页面方式2：

formsDemo.templates.register.html
---------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="" method="post">
    {% csrf_token %}
    <p>用户名 {{ form.name }}<span class="error">{{ error.name.0 }}</span></p>
    <p>密码 {{ form.pwd }}<span class="error">{{ error.pwd.0 }}</span></p>
    <p>邮箱 {{ form.email }}<span class="error">{{ error.email.0 }}</span></p>
    <input type="submit">
</form>

</body>
</html>

渲染页面

渲染代码

Django渲染标签报错，浏览器就会拦截。
不过后台该校验就校验。

小惊喜

取消前端校验

{#novalidate#}
<form action="" method="post" novalidate>
    {% csrf_token %}
    <p>用户名 {{ form.name }}<span class="error">{{ error.name.0 }}</span></p>
    <p>密码 {{ form.pwd }}<span class="error">{{ error.pwd.0 }}</span></p>
    <p>邮箱 {{ form.email }}<span class="error">{{ error.email.0 }}</span></p>
    <input type="submit">
</form>

取消校验

我们刚才输错信息会重置输入信息功能的功能也解决了。

真正的惊喜

这是因为，咱们的错误信息是使用form表单渲染的，而数据也是用form表单来渲染的。

渲染页面方式3：

formsDemo.app01.views.py
-----------------------
class UserForm(forms.Form):
    #自定义报错信息
    msg={'required':'该字段不能为空'}
    #设置name长度不能超过5.
    #label设置别名。
    name=forms.CharField(max_length=5,error_messages=msg,label='用户名')
    #设置密码只能是纯数字.
    pwd=forms.IntegerField(label='密码')
    email=forms.EmailField(error_messages={"invalid":"邮箱格式不正确"},label='邮箱')

formsDemo.templates.register.html
---------------------------------
<form action="" method="post" novalidate>
    {% csrf_token %}
    {% for field in form %}
        <div>
            <label for="">{{ field.label }}</label>
            {{ field }}<span class="error">{{ field.errors.0 }}</span>
        </div>
    {% endfor %}
    <input type="submit">
</form>

渲染页面

渲染代码

寒暄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2.8.5Django --11 Django的forms组件

Django目录：https://www.jianshu.com/p/dc36f62b3dc5什么是forms组件forms组件就是django内置的一个类，来弥补form表单的功能，例如提供校验数据，渲染表单，页面显示错误等功能。接着我们就通过一个简单的登录注册例子来讲解forms组件。简单例子他需要完成四个功能：1.校验数据2.页面显示错误信息3.渲染页面4....
复制链接

扫一扫