註冊頁面-使用form模塊搭建

来源:https://www.cnblogs.com/yebax/archive/2019/08/31/11437729.html
-Advertisement-
Play Games

基於Django的form模塊,快速的搭建註冊頁面,每個限制條件,都放在form模塊裡面,不單獨對每一項編寫標簽,使用模版的 for 迴圈來渲染。 首先設置form模塊 在blogs模塊下創建一個blogs_form.py文件 註意一點,需要引用django模塊下的forms模塊,還有widgets ...


基於Django的form模塊,快速的搭建註冊頁面,每個限制條件,都放在form模塊裡面,不單獨對每一項編寫標簽,使用模版的 for 迴圈來渲染。

 

  • 首先設置form模塊

在blogs模塊下創建一個blogs_form.py文件

註意一點,需要引用django模塊下的forms模塊,還有widgets模塊,widget是設置input的類型,比如TextInput文本框,PasswordInput密碼框,EmailInput郵箱框等等,這些好處就不用對其做判斷,是否符合郵箱的匹配條件,forms模塊就幫忙做了。

attrs:添加input的屬性和屬性值,key-value 形式,我想在class添加form-control(Bootstrap的樣式),使用 attrs={"class","form-control"} 

 1 from django import forms
 2 from django.forms import widgets
 3 
 4 class UserForm(forms.Form):
 5     user = forms.CharField(max_length=32,
 6                            label="用戶名",
 7                            widget=widgets.TextInput(attrs={"class": "form-control"}))
 8     pwd = forms.CharField(max_length=32,
 9                           label="密碼",
10                           widget=widgets.PasswordInput(attrs={"class": "form-control"}))
11     re_pwd = forms.CharField(max_length=32,
12                              label="確認密碼",
13                              widget=widgets.PasswordInput(attrs={"class": "form-control"}))
14     email = forms.EmailField(max_length=32,
15                              label="郵箱",
16                              widget=widgets.EmailInput(attrs={"class": "form-control"}))

 

  • view視圖添加註冊

創建forms對象,直接返回。

記得引入剛剛寫的UserForm到view中。

from .blog_form import UserForm

def register(request):
    form = UserForm()
    return render(request, "register.html", locals())

  

  • urls路由中添加路徑

添加路徑,將url路徑和view中的register函數,關聯起來。

path("register/", views.register)

  

  • 重頭戲,寫register.html

首先,使用Bootstrap將佈局搭建好,把<form>標簽中的位置空出來

記得在form標簽中,寫 csrf_token 解決跨站問題

迴圈 UserForm對象, 每次拿到一個filed對象

filed.name:對象的label名

filed.label:對象的label

filed: input標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/js/jquery-3.4.1.js" type="text/javascript"></script>
    <style type="text/css">
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-offset-3">
            <h3>註冊頁面</h3>
            <form>
                {% csrf_token %}

                {% for filed in form %}
                    <div class="form-group">
                        <label for="id_{{ filed.name }}">{{ filed.label }}</label>
                        {{ filed }}
                    </div>
                {% endfor %}
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
</script>
</body>
</html>

  

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 註釋標簽:對代碼進行說明 常用格式標簽 標題標簽 列表標簽 無序列表: 有序列表: 自定義列表:圖文混排 CSS樣式   內嵌樣式:放在``標簽之間 語法: 所有標簽( ) 文本屬性 字體標簽及屬性 背景相關的屬性 超鏈接: 郵件超鏈接 圖片標簽 錨點鏈接 圖片滾動 分隔視窗 塊 ...
  • v3傳送門 v3文檔其實思考了很久, 還是放棄了v3, 因為開發v3的時候很粗暴, 按照編程角度來看就是硬擼, 也怪自己實力有限, 所以反思了一下, 嘗試著繼續前行... 2、交流學習 QQ號: 707200833 QQ群: 769620939 重要的事情說三遍, 看文檔, 看文檔, 看文檔, 文檔 ...
  • 大多數野生程式員最棘手的問題就是如何依靠技術解決溫飽,通俗來講就是技術折現的問題。 如果是單純出於興趣,或者只是為了突擊某一階段或者某一項目技術壁壘,不跟就業掛鉤的自學倒也是無關痛癢。但是當上崗成為自學的終極目標和結果時,一切都就另當別論了。 前端自學者存在的學習誤區: 1、所學東西可能已過時 奉為 ...
  • 摘要: 玩轉JS字元串。 原文: "JS 前20個常用字元串方法及使用方式" 譯者:前端小智 "Fundebug" 經授權轉載,版權歸原作者所有。 本文主要介紹一些最常用的 字元串函數。 1. charAt(x) 返回字元串中 位置的字元,下標從 開始。 2. charCodeAt(x) js 返回 ...
  • 0830總結 Vue CLI 項目中相關操作 一.前臺路由的基本工作流程 目錄結構 App.vue:根組件 Nav.vue:小組件 PageFirst.vue:頁面組件 PageSecond.vue:頁面組件 router.js:路由配置 二.配置全局樣式文件 目錄結構 global.css mai ...
  • 1、單一職責原則(SRP) 定義 :就一個類而言,應該僅有一個引起它變化的原因 為什麼需要單一職責呢?如果一個類承擔的職責過多,就等於把這些職責耦合在一起了,一個職責的變化可能會引起其它職責的變化,當變化發生時,設計會遭到意想不到的變化。 我們看看下麵簡單的類圖,UserDiscount類具有兩個方 ...
  • ORM
    瞭解orm,先瞭解以下概念: 什麼是“持久化” 持久(Persistence),即把數據(如記憶體中的對象)保存到可永久保存的存儲設備中(如磁碟)。持久化的主要應用是將記憶體中的數據存儲在關係型的資料庫中,當然也可以存儲在磁碟文件中、XML數據文件中等等。 什麼是 “持久層” 持久層(Persisten ...
  • Django ORM 高性能查詢優化 一、QuerySet 1、可切片 使用Python 的切片語法來限制 記錄的數目 。它等同於SQL 的 和 子句。 不支持負的索引(例如 )。通常, 的切片返回一個新的 —— 它不會執行查詢。 2、可迭代 3、惰性查詢 是惰性執行的 —— 創建 不會帶來任何數據 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...