一篇文章带你了解Django Form组件(入门篇)

开发 前端
本次咱们来get一个新技能,Form组件。Form组件,只适用于,前后端未分离的项目中,主要用于验证表单数据,所以,关键字是表单!!!

 [[375178]]

前言

Hey,大家好呀,我是码农,星期八。

本次咱们来get一个新技能,Form组件。

Form组件主要用于验证表单数据。

为什么需要Form组件

注:Form组件,只适用于,前后端未分离的项目中,主要用于验证表单数据,所以,关键字是表单!!!

比如像哔哩哔哩的注册界面。


我点击注册,它不仅仅可以知道我的注册昵称是否存在,密码是否小于6位,手机号格式错误

还会把错误信息一直留在上面,给我提示。

我们就以这个为雏形,来简单的写一个小小的注册界面。

普通版注册

代码

urls.py

from django.urls import path 
from web import views 
 
urlpatterns = [ 
    path('reg/', views.reg,), 

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

web/views.py

def reg(request): 
    if request.method == "GET"
        return render(request, "reg.html"
 
    nick = request.POST.get("nick"
    pwd = request.POST.get("pwd"
    phone = request.POST.get("phone"
 
    error = {} 
    if len(pwd) < 6: 
        error["pwd"] = "密码小于6位" 
    if len(phone) != 11: 
        error["phone"] = "手机号格式错误" 
 
    # error为空表示未触发异常 
    if not error: 
        print("写入数据库", nick, pwd, phone) 
        return HttpResponse("注册成功"
    else
        return render(request, "reg.html", {"error": error}) 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.

templates/reg.html

<!DOCTYPE html> 
<html lang="en"
<head> 
    <meta charset="UTF-8"
    <title>登录</title> 
</head> 
<body> 
<div style="width: 40%;margin: auto"
    <form action="" method="post"
        <div><input name="nick" type="text" placeholder="昵称"></div> 
        <div> 
            <input name="pwd" type="password" placeholder="密码"
            <span>{{ error.pwd }}</span> 
        </div> 
        <div> 
            <input name="phone" type="text" placeholder="手机号"
            <span>{{ error.phone }}</span> 
        </div> 
        <div><input type="submit"></div> 
    </form> 
</div> 
 
</body> 
</html> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.

实现效果

如果填写的信息正常。

填写信息

 

 

跳转之后


如果填写的信息错误。

填写信息


错误提示


小总结

但是你发现虽然能把错误信息显示出来。

但是我原来填写的东西没了啊!!!,因为html form表单提交是刷新页面提交的!

雾草,没了,这是少的,如果有十几个???,那不就气死了

好像我记得我上学时,好多网站都是这。。。好像我也骂了很久,直到前后端分离时,才好一点!

Form组件版注册

再使用之前,需要将Django项目的settings.py的LANGUAGE_CODE设置为zh-hans


代码

以下代码可能看不懂,大概理解就好!

urls.py

同上

web/views.py

from django.shortcuts import render, HttpResponse 
from django.forms import Form 
from django.forms import fields 
from django.forms import widgets 
 
 
Create your views here. 
class RegForm(Form): 
    name = fields.CharField( 
        widget=widgets.TextInput(attrs={"placeholder""昵称"}) 
    ) 
    pwd = fields.CharField( 
        min_length=6, 
        widget=widgets.TextInput(attrs={"placeholder""密码"}) 
    ) 
    phone = fields.CharField( 
        min_length=11, 
        max_length=11, 
        widget=widgets.TextInput(attrs={"placeholder""手机号"}) 
    ) 
 
 
def reg(request): 
    if request.method == "GET"
        form = RegForm() 
        return render(request, "reg.html", {"form": form}) 
    form = RegForm(request.POST, request.FILES) 
    # 验证表单数据 
    if form.is_valid(): 
        result = form.clean() 
        print(result) 
        return HttpResponse("登录"
    return render(request, "reg.html", {"form": form}) 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.

templates/reg.html

<!DOCTYPE html> 
<html lang="en"
<head> 
    <meta charset="UTF-8"
    <title>登录</title> 
</head> 
<body> 
<div style="width: 40%;margin: auto"
    <form action="" method="post" novalidate> 
        {% for foo in form %} 
            <div> 
                {{ foo }} 
                <span style="color: red">{{ foo.errors.0 }}</span> 
            </div> 
        {% endfor %} 
        <div><input type="submit"></div> 
    </form> 
</div> 
 
</body> 
</html> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.

实现效果

如果填写的信息正常。

同上

如果填写的信息错误。


小总结

这是我点击提交之后报错的结果!

可以发现,即使刷新页面提交,还是会把原来的数据保存下来,并且还有验证失败的信息!

Form总结

从上述示例可以发现。

Django Form组件最起码具有以下功能:

  • 生成HTML标签。
  • 验证提交的数据。
  • 保留提交之前的数据。

没错,它的主要功能其实也就是这。

如果使用Django进行开发,并且使没有前后端分离的,必用Form组件!

每一份发奋努力的背后,必定有巨大的赏赐。

 

责任编辑:姜华 来源: Python爬虫与数据挖掘
相关推荐

2020-12-29 09:05:48

基础DjangoORM

2021-01-05 09:07:30

Django ORMF查询Q查询

2021-01-14 09:04:27

Django FormForm组件开发

2021-01-01 09:20:20

操作DjangoORM

2023-05-12 08:19:12

Netty程序框架

2021-06-30 00:20:12

Hangfire.NET平台

2022-02-21 09:44:45

Git开源分布式

2021-06-04 09:56:01

JavaScript 前端switch

2021-02-02 18:39:05

JavaScript

2020-11-10 10:48:10

JavaScript属性对象

2021-01-29 18:41:16

JavaScript函数语法

2021-05-18 08:30:42

JavaScript 前端JavaScript时

2024-04-19 14:23:52

SwitchJavaScript开发

2024-01-30 13:47:45

2021-06-24 09:05:08

JavaScript日期前端

2021-01-26 23:46:32

JavaScript数据结构前端

2023-09-06 14:57:46

JavaScript编程语言

2023-05-08 08:21:15

JavaNIO编程

2023-07-30 15:18:54

JavaScript属性

2021-03-09 14:04:01

JavaScriptCookie数据
点赞
收藏

51CTO技术栈公众号