2. 程式人生 > >Django之form表單那點事

Django之form表單那點事

阿新 • • 發佈：2018-10-17
bootstrap msg 價格 code cap 愛好 ots exce 同時

Form介紹

我們之前在HTML頁面中利用form表單向後端提交數據時，都會寫一些獲取用戶輸入的標簽並且用form標簽把它們包起來。

與此同時我們在好多場景下都需要對用戶的輸入做校驗，比如校驗用戶是否輸入，輸入的長度和格式等正不正確。如果用戶輸入的內容有錯誤就需要在頁面上相應的位置顯示對應的錯誤信息.。

Django form組件就實現了上面所述的功能。

總結一下，其實form組件的主要功能如下:

  • 生成頁面可用的HTML標簽
  • 對用戶提交的數據進行校驗
  • 保留上次輸入內容

普通方式手寫註冊功能

views.py

# 註冊
def register(request):
    error_msg = ""
    if request.method == "POST":
        username = request.POST.get("name")
        pwd = request.POST.get("pwd")
        # 對註冊信息做校驗
        if len(username) < 6:
            # 用戶長度小於6位
            error_msg = "用戶名長度不能小於6位"
        else:
            # 將用戶名和密碼存到數據庫
            return HttpResponse("註冊成功")
    return render(request, "register.html", {"error_msg": error_msg})

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊頁面</title>
</head>
<body>
<form action="/reg/" method="post">
    {% csrf_token %}
    <p>
        用戶名:
        <input type="text" name="name">
    </p>
    <p>
        密碼：
        <input type="password" name="pwd">
    </p>
    <p>
        <input type="submit" value="註冊">
        <p style="color: red">{{ error_msg }}</p>
    </p>
</form>
</body>
</html>

使用form組件實現註冊功能

views.py

先定義好一個RegForm類：

from django import forms

# 按照Django form組件的要求自己寫一個類
class RegForm(forms.Form):
    name = forms.CharField(label="用戶名")
    pwd = forms.CharField(label="密碼")

再寫一個視圖函數：

# 使用form組件實現註冊方式
def register2(request):
    form_obj = RegForm()
    if request.method == "POST":
        # 實例化form對象的時候，把post提交過來的數據直接傳進去
        form_obj = RegForm(request.POST)
        # 調用form_obj校驗數據的方法
        if form_obj.is_valid():
            return HttpResponse("註冊成功")
    return render(request, "register2.html", {"form_obj": form_obj})

login2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊2</title>
</head>
<body>
    <form action="/reg2/" method="post" novalidate autocomplete="off">
        {% csrf_token %}
        <div>
            <label for="{{ form_obj.name.id_for_label }}">{{ form_obj.name.label }}</label>
            {{ form_obj.name }} {{ form_obj.name.errors.0 }}
        </div>
        <div>
            <label for="{{ form_obj.pwd.id_for_label }}">{{ form_obj.pwd.label }}</label>
            {{ form_obj.pwd }} {{ form_obj.pwd.errors.0 }}
        </div>
        <div>
            <input type="submit" class="btn btn-success" value="註冊">
        </div>
    </form>
</body>
</html>

看網頁效果發現 也驗證了form的功能：
• 前端頁面是form類的對象生成的 -->生成HTML標簽功能
• 當用戶名和密碼輸入為空或輸錯之後 頁面都會提示 -->用戶提交校驗功能
• 當用戶輸錯之後 再次輸入 上次的內容還保留在input框 -->保留上次輸入內容

Form那些事兒

常用字段與插件

創建Form類時，主要涉及到 【字段】 和 【插件】，字段用於對用戶請求數據的驗證，插件用於自動生成HTML;

initial

初始值，input框裏面的初始值。

class LoginForm(forms.Form):
    username = forms.CharField(
        min_length=8,
        label="用戶名",
        initial="張三"  # 設置默認值
    )
    pwd = forms.CharField(min_length=6, label="密碼")

error_messages

重寫錯誤信息。

class LoginForm(forms.Form):
    username = forms.CharField(
        min_length=8,
        label="用戶名",
        initial="張三",
        error_messages={
            "required": "不能為空",
            "invalid": "格式錯誤",
            "min_length": "用戶名最短8位"
        }
    )
    pwd = forms.CharField(min_length=6, label="密碼")

password

class LoginForm(forms.Form):
    ...
    pwd = forms.CharField(
        min_length=6,
        label="密碼",
        widget=forms.widgets.PasswordInput(attrs={‘class‘: ‘c1‘}, render_value=True)
    )

radioSelect

單radio值為字符串

class LoginForm(forms.Form):
    username = forms.CharField(
        min_length=8,
        label="用戶名",
        initial="張三",
        error_messages={
            "required": "不能為空",
            "invalid": "格式錯誤",
            "min_length": "用戶名最短8位"
        }
    )
    pwd = forms.CharField(min_length=6, label="密碼")
    gender = forms.fields.ChoiceField(
        choices=((1, "男"), (2, "女"), (3, "保密")),
        label="性別",
        initial=3,
        widget=forms.widgets.RadioSelect()
    )

單選Select

class LoginForm(forms.Form):
    ...
    hobby = forms.fields.ChoiceField(
        choices=((1, "籃球"), (2, "足球"), (3, "雙色球"), ),
        label="愛好",
        initial=3,
        widget=forms.widgets.Select()
    )

多選Select

class LoginForm(forms.Form):
    ...
    hobby = forms.fields.MultipleChoiceField(
        choices=((1, "籃球"), (2, "足球"), (3, "雙色球"), ),
        label="愛好",
        initial=[1, 3],
        widget=forms.widgets.SelectMultiple()
    )

單選checkbox

class LoginForm(forms.Form):
    ...
    keep = forms.fields.ChoiceField(
        label="是否記住密碼",
        initial="checked",
        widget=forms.widgets.CheckboxInput()
    )

多選checkbox

class LoginForm(forms.Form):
    ...
    hobby = forms.fields.MultipleChoiceField(
        choices=((1, "籃球"), (2, "足球"), (3, "雙色球"),),
        label="愛好",
        initial=[1, 3],
        widget=forms.widgets.CheckboxSelectMultiple()
    )

關於choice的註意事項：

在使用選擇標簽時，需要註意choices的選項可以從數據庫中獲取，但是由於是靜態字段 ***獲取的值無法實時更新***，那麽需要自定義構造方法從而達到此目的。

方式一：

from django.forms import Form
from django.forms import widgets
from django.forms import fields

 
class MyForm(Form):
 
    user = fields.ChoiceField(
        # choices=((1, ‘上海‘), (2, ‘北京‘),),
        initial=2,
        widget=widgets.Select
    )
 
    def __init__(self, *args, **kwargs):
        super(MyForm,self).__init__(*args, **kwargs)
        # self.fields[‘user‘].choices = ((1, ‘上海‘), (2, ‘北京‘),)
        # 或
        self.fields[‘user‘].choices = models.Classes.objects.all().values_list(‘id‘,‘caption‘)

方式二：

from django import forms
from django.forms import fields
from django.forms import models as form_model

 
class FInfo(forms.Form):
    authors = form_model.ModelMultipleChoiceField(queryset=models.NNewType.objects.all())  # 多選
    # authors = form_model.ModelChoiceField(queryset=models.NNewType.objects.all())  # 單選

Django Form所有內置字段

技術分享圖片

校驗

方式一：

from django.forms import Form
from django.forms import widgets
from django.forms import fields
from django.core.validators import RegexValidator
 
class MyForm(Form):
    user = fields.CharField(
        validators=[RegexValidator(r‘^[0-9]+$‘, ‘請輸入數字‘), RegexValidator(r‘^159[0-9]+$‘, ‘數字必須以159開頭‘)],
    )

方式二：

import re
from django.forms import Form
from django.forms import widgets
from django.forms import fields
from django.core.exceptions import ValidationError
 
 
# 自定義驗證規則
def mobile_validate(value):
    mobile_re = re.compile(r‘^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$‘)
    if not mobile_re.match(value):
        raise ValidationError(‘手機號碼格式錯誤‘)
 
 
class PublishForm(Form):
 
 
    title = fields.CharField(max_length=20,
                            min_length=5,
                            error_messages={‘required‘: ‘標題不能為空‘,
                                            ‘min_length‘: ‘標題最少為5個字符‘,
                                            ‘max_length‘: ‘標題最多為20個字符‘},
                            widget=widgets.TextInput(attrs={‘class‘: "form-control",
                                                          ‘placeholder‘: ‘標題5-20個字符‘}))
 
 
    # 使用自定義驗證規則
    phone = fields.CharField(validators=[mobile_validate, ],
                            error_messages={‘required‘: ‘手機不能為空‘},
                            widget=widgets.TextInput(attrs={‘class‘: "form-control",
                                                          ‘placeholder‘: u‘手機號碼‘}))
 
    email = fields.EmailField(required=False,
                            error_messages={‘required‘: u‘郵箱不能為空‘,‘invalid‘: u‘郵箱格式錯誤‘},
                            widget=widgets.TextInput(attrs={‘class‘: "form-control", ‘placeholder‘: u‘郵箱‘}))
技術分享圖片

補充進階

應用Bootstrap樣式

技術分享圖片 Django form應用Bootstrap樣式簡單示例

批量添加樣式

可通過重寫form類的init方法來實現。

技術分享圖片 批量添加樣式

ModelForm

form與model的終極結合。

class BookForm(forms.ModelForm):

    class Meta:
        model = models.Book
        fields = "__all__"
        labels = {
            "title": "書名",
            "price": "價格"
        }
        widgets = {
            "password": forms.widgets.PasswordInput(attrs={"class": "c1"}),
        }

class Meta:下常用參數：

model = models.Student  # 對應的Model中的類
fields = "__all__"  # 字段，如果是__all__,就是表示列出所有的字段
exclude = None  # 排除的字段
labels = None  # 提示信息
help_texts = None  # 幫助提示信息
widgets = None  # 自定義插件
error_messages = None  # 自定義錯誤信息

Django之form表單那點事

相關推薦

Django之form表單那點事

bootstrap msg 價格 code cap 愛好 ots exce 同時 Form介紹 我們之前在HTML頁面中利用form表單向後端提交數據時，都會寫一些獲取用戶輸入的標簽並且用form標簽把它們包起來。 與此同時我們在好多場景下都需要對用戶的輸入做校驗，比

71、Django之form表單

protoc valid init title except Go doc 列表 ima Form介紹 我們之前在HTML頁面中利用form表單向後端提交數據時，都會寫一些獲取用戶輸入的標簽並且用form標簽把它們包起來。 與此同時我們在好多場景下都需要對用戶的輸入做校驗

Django 之 form表單

its html rom ida cal 從數據 disable ger orm Django中的Form表單 　　1、背景 　　　　平時我們在書寫form表單時，經常都是手動的去寫一些input標簽，讓用戶輸入一些功能，進行一些校驗的判斷，等等。Django中的for

Django之form表單

所有 install rip mod 由於 合格 NPU enc 多選框 Form介紹 總結，form組件的主要功能如下： 　　生成頁面可用的HTML標簽 　　對用戶提交的數據進行校驗 　　保留上次輸入內容 　　提示錯誤信息 普通方式手寫註冊功能 views.

Django之form表單詳解

構建一個表單 假設你想在你的網站上建立一個簡單的表單，以獲得使用者的名字。你需要類似這樣的模板： <form action="/your-name/" method="post"> <label for="your_name">Your name: </labe

django之form表單驗證

lds nbsp sub att hasattr () form表單 con data form組件的校驗功能 views.py from django.shortcuts import render, HttpResponse # Create your views

Django框架 之 Form表單和Ajax上傳文件

不可 _for render ren files AS AD 什麽 OS 瀏覽目錄 Form表單上傳文件 Ajax上傳文件 偽造Ajax上傳文件 Form表單上傳文件 html <h3>form表單上傳文件&

Django元件之Form表單

一、Django中的Form表單介紹 我們之前在HTML頁面中利用form表單向後端提交資料時，都會寫一些獲取使用者輸入的標籤並且用form標籤把它們包起來。 與此同時我們在好多場景下都需要對使用者的輸入做校驗，比如校驗使用者是否輸入，輸入的長度和格式等正不正確。如果使用者輸入的內容有錯誤就需要

Django基礎之form表單的補充進階

1. 應用Bootstrap樣式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" conte

知識總結之form表單屬性及H5新增特性

bsp ron mit 驗證 pick -s value 地址欄 屬性 一、form的幾大屬性 　　1.method屬性 　　　　規定用於發送 form-data 的 HTTP 方法，即請求的方式；主要用來提交參數與後臺數據進行交互。 　　　　分為GET和POST兩種方式，

初學servlet之form表單

exce cat eth col country values nts author ons 使用doget向頁面寫表單,使用dopost讀取表單內容,包括了單選按鈕,復選框,下拉列表等等的讀取方法,form的action屬性不寫,默認表單會被提交給請求他時用的相同的URL

Django--分頁器（paginator）、Django的用戶認證、Django的FORM表單

modelform 從數據 submit fields 個人 select method rtc 無法使用 分頁器（paginator） >>> from django.core.paginator import Paginator >>&g

Django-Django的form表單

valid blog pos ges 驗證 錯誤 form表單 技術分享 orm 註冊頁面如果用ajax來做，視圖views裏面判斷會很復雜，需要判斷各種字段，我們用form來做 form_obj，實例化form_post(form_obj)對象，一定要加上(reque

Django 使用form表單提交數據報錯： Forbidden (403)

運行 ges info auth 技術 sage ons 提交數據 smi Issue: 使用from表單submit之後報錯入下： Action: 把django工程文件的setting.py中的django.middleware.csrf.CsrfViewMi

Django的form表單

編輯 pty form表單 get required this 長度 wrapper -- 一.構建一個表單 假設你想在你的網站上創建一個簡單的表單，以獲得用戶的名字。你需要類似這樣的模板： 1 2 3 4 5 <form action="/you

Django框架form表單的那些事兒

Form那些事兒 建立Form類時，主要涉及到 【欄位】 和 【外掛】，欄位用於對使用者請求資料的驗證，外掛用於自動生成HTML;   1:initial 初始值，input框裡面的初始值。 class LoginForm(forms.Form): username = fo

form表單下點選button按鈕提交後頁面重新整理問題解決

button,input type=button按鈕在IE和w3c，firefox瀏覽器區別 當在IE瀏覽器下面時，button標籤按鈕，input標籤type屬性為button的按鈕是一樣的功能，不會對錶單進行任何操作。 但是在W3C瀏覽器，如Firefox下就需要注意了，button標籤按鈕會提

react+antd系列之Form表單(2)：格式限制驗證

格式限制 antd中表單的功能很多，下面就為大家整理了一下antd中常用的幾種表單輸入格式驗證： 1. 輸入框不能為空限制，如下： {getFieldDecorator('name', { rules: [{ require

react+antd系列之Form表單(1)：新增與刪除

在用antd的時候，我們如果要對錶單進行新增和刪除該怎麼弄呢，如下： import { connect } from 'dva'; import { Form, Input, Button } from 'antd'; import styles from './eg1.css';

Jquery之Form表單儲存位元組流圖片

最終效果，點選文字框後彈出檔案瀏覽框，選擇圖片檔案（會驗證），上傳伺服器成功（這裡用的MongoDB）後會返回一個路徑值，自動填入文字框中 部分JSP頁面  <form id="companyForm" method="post"> <input i