django 使用form組件提交數據之form表單提交


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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM