django的form組件可以減少后台在進行一些重復性的驗證工作,極大降低開發效率。
最近遇到一個問題:
當使用form表單提交數據后,如果數據格式不符合后台定義的規則,需要重新在前端頁面填寫數據。
分析問題:
由於form的POST 請求發出去后會刷新整個頁面,自然無法保留上次輸入的內容。
解決問題:
采用ajax的方式發出請求,避免刷新整個頁面。
ajax是腦海里第一個冒出的想法,但經過了解form組件內部的更多參數以及原理,發現其實也可以在form發出
POST請求時保留上次輸入的內容。這里面有個關鍵是: 可以使用form組件在前端頁面中生成html標簽。
下面貼下代碼:
1.先在后台創建基於Form的類,在類中創建字段以此定義規則。
from django.forms import Form,fields class RegisterForm(Form): user = fields.CharField( min_length=6, max_length=16, error_messages={'min_length':'太短了','max_length':'太長了'}, label='用戶名', ) password = fields.CharField( min_length=6, max_length=16, error_messages={'min_length':'太短了','max_length':'太長了'}, label='密碼', ) email = fields.EmailField( label='郵箱', )
2.前端頁面代碼
代碼中obj是從后台傳過來的,代表的是Form類的對象。在Django中,可以將obj傳到前端。
通過obj點出類中的字段名稱。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="POST" action="/register/" novalidate> <p> {{ obj.user.label }}{{ obj.user }} {{ obj.errors.user.0 }} </p> <p> {{ obj.password.label }} {{ obj.password }} {{ obj.errors.password.0 }} </p> <p> {{ obj.email.label }} {{ obj.email }} {{obj.errors.email.0 }} </p> <input type="submit"/> </form> </body> </html>
3.后台邏輯代碼
def register(request): if request.method=='GET': obj = RegisterForm() #當通過get請求來到注冊頁面時,沒有攜帶數據,obj生成的html標簽就自然沒有values值 return render(request,'register.html',{'obj':obj}) else: obj=RegisterForm(request.POST)#post請求發來了數據,此時obj中有values v = obj.is_valid()#驗證 if v: print(obj.cleaned_data)#驗證正確時在后台輸出數據 return redirect('http://www.baidu.com') else: print(obj.errors) #錯誤信息 print(obj['user']) #obj其實打印出來是一串html形式的字符串 此句得到的結果是 <input type="text" name="user" maxlength="16" minlength="6" required id="id_user"> return render(request,'register.html',{'obj':obj})#傳回前端的obj,包含數據
print(obj)后得出的結果
<tr><th><label for="id_user">用戶名:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="text" name="user" maxlength="16" minlength="6" required id="id_user"></td></tr>
<tr><th><label for="id_password">密碼:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="text" name="password" maxlength="16" minlength="6" required id="id_password"></td></tr>
<tr><th><label for="id_email">郵箱:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="email" name="email" required id="id_email"></td></tr>
