Form元件

panda/勇發表於2018-10-21

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})

<!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類時,主要涉及到`欄位`和`外掛`, 欄位用於對使用者請求資料的驗證,外掛用於自動生成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所有內建欄位

Field
    required=True,               是否允許為空
    widget=None,                 HTML外掛
    label=None,                  用於生成Label標籤或顯示內容
    initial=None,                初始值
    help_text=``,                幫助資訊(在標籤旁邊顯示)
    error_messages=None,         錯誤資訊 {`required`: `不能為空`, `invalid`: `格式錯誤`}
    validators=[],               自定義驗證規則
    localize=False,              是否支援本地化
    disabled=False,              是否可以編輯
    label_suffix=None            Label內容字尾
 
 
CharField(Field)
    max_length=None,             最大長度
    min_length=None,             最小長度
    strip=True                   是否移除使用者輸入空白
 
IntegerField(Field)
    max_value=None,              最大值
    min_value=None,              最小值
 
FloatField(IntegerField)
    ...
 
DecimalField(IntegerField)
    max_value=None,              最大值
    min_value=None,              最小值
    max_digits=None,             總長度
    decimal_places=None,         小數位長度
 
BaseTemporalField(Field)
    input_formats=None          時間格式化   
 
DateField(BaseTemporalField)    格式：2015-09-01
TimeField(BaseTemporalField)    格式：11:12
DateTimeField(BaseTemporalField)格式：2015-09-01 11:12
 
DurationField(Field)            時間間隔：%d %H:%M:%S.%f
    ...
 
RegexField(CharField)
    regex,                      自定製正規表示式
    max_length=None,            最大長度
    min_length=None,            最小長度
    error_message=None,         忽略，錯誤資訊使用 error_messages={`invalid`: `...`}
 
EmailField(CharField)      
    ...
 
FileField(Field)
    allow_empty_file=False     是否允許空檔案
 
ImageField(FileField)      
    ...
    注：需要PIL模組，pip3 install Pillow
    以上兩個字典使用時，需要注意兩點：
        - form表單中 enctype="multipart/form-data"
        - view函式中 obj = MyForm(request.POST, request.FILES)
 
URLField(Field)
    ...
 
 
BooleanField(Field)  
    ...
 
NullBooleanField(BooleanField)
    ...
 
ChoiceField(Field)
    ...
    choices=(),                選項，如：choices = ((0,`上海`),(1,`北京`),)
    required=True,             是否必填
    widget=None,               外掛，預設select外掛
    label=None,                Label內容
    initial=None,              初始值
    help_text=``,              幫助提示
 
 
ModelChoiceField(ChoiceField)
    ...                        django.forms.models.ModelChoiceField
    queryset,                  # 查詢資料庫中的資料
    empty_label="---------",   # 預設空顯示內容
    to_field_name=None,        # HTML中value的值對應的欄位
    limit_choices_to=None      # ModelForm中對queryset二次篩選
     
ModelMultipleChoiceField(ModelChoiceField)
    ...                        django.forms.models.ModelMultipleChoiceField
 
 
     
TypedChoiceField(ChoiceField)
    coerce = lambda val: val   對選中的值進行一次轉換
    empty_value= ``            空值的預設值
 
MultipleChoiceField(ChoiceField)
    ...
 
TypedMultipleChoiceField(MultipleChoiceField)
    coerce = lambda val: val   對選中的每一個值進行一次轉換
    empty_value= ``            空值的預設值
 
ComboField(Field)
    fields=()                  使用多個驗證，如下：即驗證最大長度20，又驗證郵箱格式
                               fields.ComboField(fields=[fields.CharField(max_length=20), fields.EmailField(),])
 
MultiValueField(Field)
    PS: 抽象類，子類中可以實現聚合多個字典去匹配一個值，要配合MultiWidget使用
 
SplitDateTimeField(MultiValueField)
    input_date_formats=None,   格式列表：[`%Y--%m--%d`, `%m%d/%Y`, `%m/%d/%y`]
    input_time_formats=None    格式列表：[`%H:%M:%S`, `%H:%M:%S.%f`, `%H:%M`]
 
FilePathField(ChoiceField)     檔案選項，目錄下檔案顯示在頁面中
    path,                      資料夾路徑
    match=None,                正則匹配
    recursive=False,           遞迴下面的資料夾
    allow_files=True,          允許檔案
    allow_folders=False,       允許資料夾
    required=True,
    widget=None,
    label=None,
    initial=None,
    help_text=``
 
GenericIPAddressField
    protocol=`both`,           both,ipv4,ipv6支援的IP格式
    unpack_ipv4=False          解析ipv4地址，如果是::ffff:192.0.2.1時候，可解析為192.0.2.1， PS：protocol必須為both才能啟用
 
SlugField(CharField)           數字，字母，下劃線，減號（連字元）
    ...
 
UUIDField(CharField)           uuid型別

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樣式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  <title>login</title>
</head>
<body>
<div class="container">
  <div class="row">
    <form action="/login2/" method="post" novalidate class="form-horizontal">
      {% csrf_token %}
      <div class="form-group">
        <label for="{{ form_obj.username.id_for_label }}"
               class="col-md-2 control-label">{{ form_obj.username.label }}</label>
        <div class="col-md-10">
          {{ form_obj.username }}
          <span class="help-block">{{ form_obj.username.errors.0 }}</span>
        </div>
      </div>
      <div class="form-group">
        <label for="{{ form_obj.pwd.id_for_label }}" class="col-md-2 control-label">{{ form_obj.pwd.label }}</label>
        <div class="col-md-10">
          {{ form_obj.pwd }}
          <span class="help-block">{{ form_obj.pwd.errors.0 }}</span>
        </div>
      </div>
      <div class="form-group">
      <label class="col-md-2 control-label">{{ form_obj.gender.label }}</label>
        <div class="col-md-10">
          <div class="radio">
            {% for radio in form_obj.gender %}
              <label for="{{ radio.id_for_label }}">
                {{ radio.tag }}{{ radio.choice_label }}
              </label>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
          <button type="submit" class="btn btn-default">註冊</button>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

批量新增　　可以通過重寫form類的init方法來實現

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

    def __init__(self, *args, **kwargs):
        super(LoginForm, self).__init__(*args, **kwargs)
        for field in iter(self.fields):
            self.fields[field].widget.attrs.update({
                `class`: `form-control`
            })

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元件
2022-03-09
DjangoORM元件
Android Form元件
2018-07-24
AndroidORM元件
小而美的 React Form 元件
2017-09-09
ReactORM元件
django Form元件校驗流程
2024-09-03
DjangoORM元件
Ant Design 元件 —— Form表單（一）
2018-12-03
元件ORM
使用form-create生成表單元件
2024-06-03
ORM元件
antd Form元件方法getFieldsValue獲取自定義元件的值
2019-03-28
ORM元件
封裝react antd的form表單元件
2020-08-13
封裝ReactORM元件
封裝Vue Element的form表單元件
2020-08-21
封裝VueORM元件
使用 async-validator 編寫 Form 元件
2019-03-04
ORM元件
使用form-create動態生成vue元件
2019-01-18
ORMVue元件
Laravel-Admin Form 元件自定義提交路由
2019-07-19
LaravelORM元件路由
是時候放棄 el-form 元件了
2021-07-12
ORM元件
Flutter Form表單控制元件超全總結
2020-03-14
FlutterORM控制元件
我們或許不需要 React 的 Form 元件
2019-04-22
ReactORM元件
Form開發中元件控制的幾個常用方法
2010-12-08
ORM元件
React 實現一個簡單實用的 Form 元件
2019-02-24
ReactORM元件
拜讀及分析Element原始碼-form表單元件篇
2018-09-13
原始碼ORM元件
使用 antd 的 form 元件來自定義提交的資料格式
2021-09-02
ORM元件
SAP UI5 Form 控制元件的 ColumnLayout 佈局特性
2022-09-17
UIORM控制元件
Flutter 基礎控制元件篇-->輸入框(TextField)、表單(Form)
2019-10-06
Flutter控制元件ORM
基於Vue構造器建立Form元件的通用解決方案
2018-11-02
VueORM元件
form-create-designer中怎麼擴充套件自定義元件
2024-05-21
ORM套件元件
jquery 中$("form :input") $("form input") 區別
2014-04-13
jQueryORM
Laravel-admin form 元件驗證多欄位唯一性
2019-07-12
LaravelORM元件
vue使用iview Form元件驗證（適用於後臺管理系統）
2018-07-19
VueViewORM元件
ExtJs備忘錄（1）——Form表單（一）[控制元件使用](1)
2017-11-14
JSORM控制元件
bootstrap – form
2016-09-06
bootORM
FORM Export
2009-12-28
ORMExport
Angular Form (響應式Form) 學習筆記
2021-11-07
AngularORM筆記
HTML form 元素
2018-12-08
HTMLORM
Form的onsubmit
2015-02-05
ORMMIT
Form1
2024-06-09
ORM
SAP UI5 Simple Form 控制元件的使用方法介紹試讀版
2022-09-17
UIORM控制元件
form編碼方式application/x-www-form-urlencoded和multipart/form-data的區別
2017-08-03
ORMAPP
Oracle Form 控制form工具欄按鈕是否可點選
2018-01-12
OracleORM
javax.faces.FacesException: Nested form found on the page. The form action eleme
2011-01-02
JavaExceptionORM
form-data與x-www-form-urlcoded區別
2024-08-29
ORM

Form元件

相關文章