一篇文章帶你了解Django Form組件（入門篇）
前言
Hey,大家好呀,我是碼農(nóng),星期八。
本次咱們來get一個新技能,Form組件。
Form組件主要用于驗證表單數(shù)據(jù)。
為什么需要Form組件
注:Form組件,只適用于,前后端未分離的項目中,主要用于驗證表單數(shù)據(jù),所以,關(guān)鍵字是表單!!!
比如像嗶哩嗶哩的注冊界面。
我點擊注冊,它不僅僅可以知道我的注冊昵稱是否存在,密碼是否小于6位,手機號格式錯誤。
還會把錯誤信息一直留在上面,給我提示。
我們就以這個為雛形,來簡單的寫一個小小的注冊界面。
普通版注冊
代碼
urls.py
- from django.urls import path
- from web import views
- urlpatterns = [
- path('reg/', views.reg,),
- ]
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為空表示未觸發(fā)異常
- if not error:
- print("寫入數(shù)據(jù)庫", nick, pwd, phone)
- return HttpResponse("注冊成功")
- else:
- return render(request, "reg.html", {"error": error})
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>
實現(xiàn)效果
如果填寫的信息正常。
填寫信息
跳轉(zhuǎn)之后
如果填寫的信息錯誤。
填寫信息
錯誤提示
小總結(jié)
但是你發(fā)現(xiàn)雖然能把錯誤信息顯示出來。
但是我原來填寫的東西沒了啊!!!,因為html form表單提交是刷新頁面提交的!
霧草,沒了,這是少的,如果有十幾個???，那不就氣死了
好像我記得我上學(xué)時,好多網(wǎng)站都是這。。。好像我也罵了很久,直到前后端分離時,才好一點!
Form組件版注冊
再使用之前,需要將Django項目的settings.py的LANGUAGE_CODE設(shè)置為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)
- # 驗證表單數(shù)據(jù)
- if form.is_valid():
- result = form.clean()
- print(result)
- return HttpResponse("登錄")
- return render(request, "reg.html", {"form": form})
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>
實現(xiàn)效果
如果填寫的信息正常。
同上
如果填寫的信息錯誤。
小總結(jié)
這是我點擊提交之后報錯的結(jié)果!
可以發(fā)現(xiàn),即使刷新頁面提交,還是會把原來的數(shù)據(jù)保存下來,并且還有驗證失敗的信息!
Form總結(jié)
從上述示例可以發(fā)現(xiàn)。
Django Form組件最起碼具有以下功能：
- 生成HTML標簽。
- 驗證提交的數(shù)據(jù)。
- 保留提交之前的數(shù)據(jù)。
沒錯,它的主要功能其實也就是這。
如果使用Django進行開發(fā),并且使沒有前后端分離的,必用Form組件!
每一份發(fā)奮努力的背后，必定有巨大的賞賜。
