forms元件

Formerly0^0發表於2024-03-28
ORM元件

forms元件

1.form介紹

  • form元件的主要功能如下:
    • 生成頁面可用的HTML標籤
    • 對使用者提交的資料進行校驗
    • 保留上次輸入內容

2.需求案例

  • 寫一個註冊功能
    • 獲取使用者名稱和密碼，利用form表單提交資料
    • 在後端判斷使用者名稱和密碼是否符合一定的條件
      • 使用者名稱中不能包含啦啦啦
      • 密碼不能少於三位
    • 如果符合條件需要你將提示資訊展示到前端頁面

3.需求案例分析

3.1 手動渲染錯誤資訊

  • 後端
def register(request):
  	# 自己定義的字典渲染到前端
    error_msg_dict = {}
    if request.method == 'POST':
        data = request.POST
        print(data)
        username = data.get("username")
        password = data.get("password")
        if username != 'serein':
            error = f"當前使用者名稱{username}錯誤"
            error_msg_dict["username_error"] = error
        if password != '123':
            error = f"當前密碼{password}錯誤"
            error_msg_dict["password_error"] = error
    return render(request, 'register.html', locals())
  • 前端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <p>
        username:<input type="text" name="username">
        <span style="color: red">{{ error_msg_dict.username_error }}</span>
    </p>
    <p>
        password:<input type="text" name="password">
        <span style="color: red">{{ error_msg_dict.password_error }}</span>
    </p>
    <p>
        <input type="submit">
    </p>
</form>
</body>
</html>

3.2 form元件如何校驗資料

3.2.1 編寫表單類
  • 我們可以透過Django提供的Form類來自用生成上面的表單，不再需要手動在HTML中編寫
  • 在你當前app內新建一個forms資料夾，在資料夾下面建立一個forms.py檔案
  • 書寫form表單類
# 匯入模組
from django import forms

# 按照Django form元件的要求自己寫一個類 MyForm
class UserForm(forms.Form):
    # username : 字串型別  最小三位，最大八位
    username = forms.CharField(max_length=8, min_length=3)
    # # username : 字串型別  最小三位，最大八位 : 字串型別  最小三位，最大八位
    password = forms.CharField(max_length=8, min_length=3)
    # email : 必須符合郵箱格式  xxx@xx.com
    email = forms.EmailField()
  • 注意事項
    • 提前匯入forms模組
    • 所有的表單類都要繼承forms.Form類
    • 每個表單欄位都有自己的欄位型別比如CharField，它們分別對應一種HTML語言中的<form>元素中的表單元素。這一點和Django模型系統的設計非常相似。
    • 例子中的label用於設定說明標籤
    • max_length限制最大長度為8。它同時起到兩個作用，一是在瀏覽器頁面限制使用者輸入不可超過8個字元，二是在後端伺服器驗證使用者輸入的長度不可超過8。

3.3 基於form元件校驗資料

  • 後端，需要匯入form類

  • from app01.Formcontrol.UserForm import UserForm

def register(request):
    error_msg_dict = {}
    form_obj = UserForm()
    if request.method == 'POST':
        data = request.POST
        username = data.get("username")
        password = data.get("password")
        email = data.get("email")
        # 生成form物件
        form_obj = UserForm({"username": username, "password": password, "email": email})
        # 校驗資料是否合法,is_valid
        form_obj.is_valid()
        # 檢視合法的資料，cleaned_data
        print(f"合法資料{form_obj.cleaned_data}")
        # 檢視不合法的資料,errors
        print(f"不合法資料{form_obj.errors}")

    return render(request, 'register.html', locals())
  • 前端
<form>  
		{{ form_obj }}
    <p>
        <input type="submit">
    </p>
</form>

4. FORM元件常用欄位引數

4.1 建立Form類時
  • 主要涉及到 【欄位】 和 【外掛】
  • 欄位用於對使用者請求資料的驗證
  • 外掛用於自動生成HTML;
4.2 initial

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

class LoginForm(forms.Form):
    username = forms.CharField(
        min_length=8,
        label="使用者名稱",
        initial="張三"  # 設定預設值
    )
    pwd = forms.CharField(min_length=6, label="密碼")
4.3 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="密碼")
4.4 password
class LoginForm(forms.Form):
    ...
    pwd = forms.CharField(
        min_length=6,
        label="密碼",
        widget=forms.widgets.PasswordInput(attrs={'class': 'c1'}, render_value=True)
    )
4.5 radioSelect

單選按鈕

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()
    )
4.6 單選Select
class LoginForm(forms.Form):
    ...
    hobby = forms.ChoiceField(
        choices=((1, "籃球"), (2, "足球"), (3, "雙色球"), ),
        label="愛好",
        initial=3,
        widget=forms.widgets.Select()
    )
4.7 多選Select
class LoginForm(forms.Form):
    ...
    hobby = forms.MultipleChoiceField(
        choices=((1, "籃球"), (2, "足球"), (3, "雙色球"), ),
        label="愛好",
        initial=[1, 3],
        widget=forms.widgets.SelectMultiple()
    )
4.8 單選框checkbox
class LoginForm(forms.Form):
    ...
    keep = forms.ChoiceField(
        label="是否記住密碼",
        initial="checked",
        widget=forms.widgets.CheckboxInput()
    )
4.9 多選框checkbox
class LoginForm(forms.Form):
    ...
    hobby = forms.MultipleChoiceField(
        choices=((1, "籃球"), (2, "足球"), (3, "雙色球"),),
        label="愛好",
        initial=[1, 3],
        widget=forms.widgets.CheckboxSelectMultiple()
    )
4.10 required 欄位必填
class LoginForm(forms.Form):
    ...
    hobby = forms.MultipleChoiceField(
        choices=((1, "籃球"), (2, "足球"), (3, "雙色球"),),
        label="愛好",
      	required = True
        initial=[1, 3],
        widget=forms.widgets.CheckboxSelectMultiple()
    )
4.11 choice欄位注意事項
  • 在使用選擇標籤時
    • 需要注意choices的選項可以配置從資料庫中獲取
  • 但是由於是靜態欄位
    • 獲取的值無法實時更新
    • 需要重寫構造方法從而實現choice實時更新。
（1）方式一
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')
（2）方式二
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())  # 單選

5. 自定義欄位校驗

5.1 RegexValidator驗證器

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開頭')],
    )

5.2 自定義驗證函式

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'郵箱'}))

【補充】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型別

6. Form元件渲染HTML程式碼

  • forms元件只會幫我們渲染使用者輸入的標籤(input/select...)

6.1 渲染方式一

（1）路由
# forms 元件渲染html標籤
path(r'index/',views.index),
（2）後端程式碼
from django import forms


# 定義form類
class MyForm(forms.Form):
    # username : 字串型別  最小三位，最大八位
    username = forms.CharField(max_length=8, min_length=3)
    # # username : 字串型別  最小三位，最大八位 : 字串型別  最小三位，最大八位
    password = forms.CharField(max_length=8, min_length=3)
    # email : 必須符合郵箱格式  xxx@xx.com
    email = forms.EmailField()


def index(request):
    # （1）產生一個空物件
    form_obj = MyForm()
    # （2） 直接將空物件傳遞給前端頁面
    return render(request,'index.html',locals())
（3）前端頁面
<form action="" method="post">
    <p>第一種渲染方式</p>
    {{ form_obj }}
</form>
（4）渲染出的效果
  • 頁面上會出現對應的HTML程式碼，但是是一開始沒有的
<form action="" method="post">
    <p>第一種渲染方式</p>
    <label for="id_username">Username:</label><input type="text" name="username" maxlength="8" minlength="3"
                                                     required="" id="id_username">
    <label for="id_password">Password:</label><input type="text" name="password" maxlength="8" minlength="3"
                                                     required="" id="id_password">
    <label for="id_email">Email:</label><input type="email" name="email" required="" id="id_email">
</form>
（5）特點
  • 程式碼書寫極少，封裝程度太高，不便於後期擴充
  • 一般情況下用於本地測試使用

6.2 渲染方式二

（1）前端
<form action="" method="post">
    <p>第二種渲染方式</p>
    {{ form_obj.as_ul }}
</form>
（2）渲染到頁面的效果
<form action="" method="post">
    <p>第二種渲染方式</p>
    <li><label for="id_username">Username:</label> <input type="text" name="username" maxlength="8" minlength="3"
                                                          required="" id="id_username"></li>
    <li><label for="id_password">Password:</label> <input type="text" name="password" maxlength="8" minlength="3"
                                                          required="" id="id_password"></li>
    <li><label for="id_email">Email:</label> <input type="email" name="email" required="" id="id_email"></li>
</form>
  • 該方法可以修改後端傳入的屬性值
# 定義form類
class MyForm(forms.Form):
    # username : 字串型別  最小三位，最大八位
    username = forms.CharField(max_length=8, min_length=3, label="使用者名稱")
    # # username : 字串型別  最小三位，最大八位 : 字串型別  最小三位，最大八位
    password = forms.CharField(max_length=8, min_length=3)
    # email : 必須符合郵箱格式  xxx@xx.com
    email = forms.EmailField()


def index(request):
    # （1）產生一個空物件
    form_obj = MyForm()
    # （2） 直接將空物件傳遞給前端頁面
    return render(request, 'index.html', locals())
  • 前端
<form action="" method="post">
    <p>第二種渲染方式</p>
    {#  物件點屬性取到對應的屬性值  #}
    {{ form_obj.username.label }} {{ form_obj.username }}

</form>
  • 前端頁面展示效果
<form action="" method="post">


    <p>第二種渲染方式</p>


    使用者名稱 <input type="text" name="username" maxlength="8" minlength="3" required="" id="id_username">

</form>
  • 特點
    • 可擴充套件性非常強
    • 但是需要書寫複雜的程式碼
    • 一般情況下不用

6.3 渲染方式三(推薦使用)

  • 前端
<form action="" method="post">

    <p>推介使用第三種</p>
    {% for form in form_obj %}
        <p> {{ form.label }} : {{ form }}</p>
    {% endfor %}

</form>
  • 頁面展示
<form action="" method="post">


    <p>推介使用第三種</p>

    <p> 使用者名稱 : <input type="text" name="username" maxlength="8" minlength="3" required="" id="id_username"></p>

    <p> Password : <input type="text" name="password" maxlength="8" minlength="3" required="" id="id_password"></p>

    <p> Email : <input type="email" name="email" required="" id="id_email"></p>


</form>

7. 鉤子函式

from django import forms


class UserForm(forms.Form):
    username = forms.CharField(
        max_length=6,
        min_length=3,
        required=True,
        label="使用者名稱",
        error_messages={
            "max_length": "不能超過 6 位的最大長度",
            "min_length": "不能小於 3 位的最小長度"
        }
    )
    password = forms.CharField(
        max_length=4,
        min_length=2,
        label="密碼",
    )

    # 先定義一個函式，函式名開頭必須是clean_欄位名，區域性鉤子
    def clean_username(self):
        print(f"這是在form的區域性鉤子中")
        print(self.cleaned_data)  # {'username': 'dd2'}
        # 先把需要校驗的區域性欄位勾出來
        username = self.cleaned_data.get("username")
        # 進行欄位的校驗
        if "666" in username:
            self.add_error("username", "當前使用者名稱不能包含 666 !")
        # 把校驗後的資料扔回去
        return username
		
    # 全域性鉤子
    def clean(self):
        print(f"全域性鉤子")
        print(self.cleaned_data)
        username = self.cleaned_data.get("username")
        password = self.cleaned_data.get("password")
        # if len(username) == 4:
        #     self.add_error("username", "使用者名稱不能是4位!")
        # if len(password) == 3:
        #     self.add_error("password", "密碼不能是 3 位")
        return self.cleaned_data

相關文章