前言
Hey,大家好呀,我是碼農,星期八。
本次咱們來get一個新技能,Form組件。
Form組件主要用於驗證表單數據。
為什麼需要Form組件
注:Form組件,只適用於,前後端未分離的項目中,主要用於驗證表單數據,所以,關鍵字是表單!!!
比如像嗶哩嗶哩的註冊界面。
我點擊註冊,它不僅僅可以知道我的註冊暱稱是否存在,密碼是否小於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為空表示未觸發異常 if not error: print("寫入資料庫", 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>
實現效果
如果填寫的信息正常。
填寫信息
跳轉之後
如果填寫的信息錯誤。
填寫信息
錯誤提示
小總結
但是你發現雖然能把錯誤信息顯示出來。
但是我原來填寫的東西沒了啊!!!,因為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})
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>
實現效果
如果填寫的信息正常。
同上
如果填寫的信息錯誤。
小總結
這是我點擊提交之後報錯的結果!
可以發現,即使刷新頁面提交,還是會把原來的數據保存下來,並且還有驗證失敗的信息!
Form總結
從上述示例可以發現。
Django Form組件最起碼具有以下功能：
生成HTML標籤。 驗證提交的數據。 保留提交之前的數據。沒錯,它的主要功能其實也就是這。
如果使用Django進行開發,並且使沒有前後端分離的,必用Form組件!
每一份發奮努力的背後，必定有巨大的賞賜。
【編輯推薦】
【責任編輯：
姜華TEL：（010）68476606】