Django form表單

來源:互聯網
上載者:User

標籤:設定   res   構造方法   無法   request   網頁   oat   href   djang   

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 >{{ 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 Formfrom django.forms import widgetsfrom 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 formsfrom django.forms import fieldsfrom 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-01TimeField(BaseTemporalField)    格式:11:12DateTimeField(BaseTemporalField)格式:2015-09-01 11:12 DurationField(Field)            時間間隔:%d %H:%M:%S.%f    ... RegexField(CharField)    regex,                      自定製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類型
校正

方式一:

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

方式二:

import refrom django.forms import Formfrom django.forms import widgetsfrom django.forms import fieldsfrom 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"}),        }

 

Django form表單

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.