Django之form表單
1. 內容回顧
1. AJAX 1. AJAX是什麼？ 前端向後端發送請求的方式 前端向後端發送請求的方式： 1. 直接在瀏覽器地址欄輸入URL訪問 --> GET 2. 點擊a標籤跳轉到指定頁面 --> GET 3. form表單 --> GET/POST 4. AJAX --> GET/POST 2. AJAX 特色 1. 局部更新頁面 2. 異步發送請求 3. jQuery版AJAX 1. 語法格式： 1. 通常請求 $.ajax({ url: "/index/", // 往哪裏發送請求 type: "POST", // 請求的方法 data: {name:"張曌",age:16}, // 請求的數據 success:function(data){ // 請求被正常響應時自動執行的回調函數 console.log(data) } }) 2. 提交攜帶文件類型的數據 1. var formData = new FormData(); // 生成一個FormData對象 2. var fileObj = $("#f1")[0].files[0] // 獲得用戶選中的文件對象 3. formData.append("f1", fileObj) // 向formData對象中添加鍵值對數據 4. $.ajax({ url: "/index/", // 往哪裏發送請求 type: "POST", // 請求的方法 processData: false, // 不讓jQuery處理個人數據 contentType: false, // 不讓jQuery設置請求頭 data: formData, success:function(data){ // 請求被正常響應時自動執行的回調函數 console.log(data) } }) 3. AJAX處理CSRF_TOKEN 1. 手動把csrf_token的值取到，塞進請求的data中 data: { ... // 取到csrf_token的值 csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val() } 2. 從cookie中取csrf_token,塞進請求頭中 headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 從Cookie取csrf_token，並設置ajax請求頭 3. 在一個單獨的JS文件中，給$.ajax統一設置一下請求頭 // 自定義一個從cookie中獲取csrftoken的方法 function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie !== '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } var csrftoken = getCookie('csrftoken'); function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function (xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } }); 2. 注意事項 1.若是發送的data中，數據不是簡單的字符串或數字，須要用JSON.stringify()轉換成JSON字符串 2. JS版AJAX 瞭解便可 3. 序列化（serializer） 快速把ORM對象轉換成JSON格式的數據 4. sweetalert彈框使用 5. 做業講解 答案看上一篇博客
1. form組件
解決這些問題1. HTML文件本身寫 --> 只能生成獲取用戶信息的那些inptu標籤等css
2. 對提交過來的數據作校驗，返回錯誤提示信息html
3. 在頁面中保留用戶原來填寫的信息前端
Form介紹
咱們以前在HTML頁面中利用form表單向後端提交數據時，都會寫一些獲取用戶輸入的標籤而且用form標籤把它們包起來。jquery
與此同時咱們在好多場景下都須要對用戶的輸入作校驗，好比校驗用戶是否輸入，輸入的長度和格式等正不正確。若是用戶輸入的內容有錯誤就須要在頁面上相應的位置顯示對應的錯誤信息.。git
Django form組件就實現了上面所述的功能。ajax
總結一下，其實form組件的主要功能以下:正則表達式
- 生成頁面可用的HTML標籤
- 對用戶提交的數據進行校驗
- 保留上次輸入內容
簡單form提交數據庫
2. form組件的用法
1.自定義一個form類django
2. 生成一個form類的實例對象bootstrap
3. 在前端頁面
form_obj.as_p --> 用p標籤包裹我每個字段（提示性的文本、input標籤、響應的錯誤提示信息）
在後端
4. 在後端
form_obj.is_valid(request.POST) --> 對數據作有效性校驗
form_obj.cleaned_data --> 獲取全部通過校驗的數據
實例：views.py
先定義好一個LoginForm類。
class LoginForm(forms.Form): username = forms.CharField(min_length=8, label="用戶名") pwd = forms.CharField(min_length=6, label="密碼") def login2(request): error_msg = "" form_obj = LoginForm() if request.method == "POST": form_obj = LoginForm(request.POST) if form_obj.is_valid(): username = form_obj.cleaned_data.get("username") pwd = form_obj.cleaned_data.get("pwd") if username == "Q1mi" and pwd == "123456": return HttpResponse("OK") else: error_msg = "用戶名或密碼錯誤" return render(request, "login2.html", {"form_obj": form_obj, "error_msg": error_msg})
login2.html
<!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"> <title>login</title> <style> .error { color: red; } </style> </head> <body> <form action="/login2/" method="post" novalidate> {% csrf_token %} <p> {{ form_obj.username.label }} {{ form_obj.username }} <span class="error">{{ form_obj.username.errors.0 }}</span> </p> <p> {{ form_obj.pwd.label }} {{ form_obj.pwd }} <span class="error">{{ form_obj.pwd.errors.0 }}</span> </p> <p> <input type="submit"> <span class="error">{{ error_msg }}</span> </p> </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'].widget.choices = ((1, '上海'), (2, '北京'),) # 或 self.fields['user'].widget.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())
建立Form類時，主要涉及到 【字段】 和 【插件】，字段用於對用戶請求數據的驗證，插件用於自動生成HTML;
一、Django內置字段以下：
Field required=True, 是否容許爲空 widget=None, HTML插件 label=None, 用於生成Label標籤或顯示內容 initial=None, 初始值 help_text='', 幫助信息(在標籤旁邊顯示) error_messages=None, 錯誤信息 {'required': '不能爲空', 'invalid': '格式錯誤'} show_hidden_initial=False, 是否在當前插件後面再加一個隱藏的且具備默認值的插件（可用於檢驗兩次輸入是否一直） 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內置插件以下：
TextInput(Input)
NumberInput(TextInput)
EmailInput(TextInput)
URLInput(TextInput)
PasswordInput(TextInput)
HiddenInput(TextInput)
Textarea(Widget)
DateInput(DateTimeBaseInput)
DateTimeInput(DateTimeBaseInput)
TimeInput(DateTimeBaseInput)
CheckboxInput
Select
NullBooleanSelect
SelectMultiple
RadioSelect
CheckboxSelectMultiple
FileInput
ClearableFileInput
MultipleHiddenInput
SplitDateTimeWidget
SplitHiddenDateTimeWidget
SelectDateWidget
三、經常使用選擇插件
# 單radio，值爲字符串 # user = fields.CharField( # initial=2, # widget=widgets.RadioSelect(choices=((1,'上海'),(2,'北京'),)) # ) # 單radio，值爲字符串 # user = fields.ChoiceField( # choices=((1, '上海'), (2, '北京'),), # initial=2, # widget=widgets.RadioSelect # ) # 單select，值爲字符串 # user = fields.CharField( # initial=2, # widget=widgets.Select(choices=((1,'上海'),(2,'北京'),)) # ) # 單select，值爲字符串 # user = fields.ChoiceField( # choices=((1, '上海'), (2, '北京'),), # initial=2, # widget=widgets.Select # ) # 多選select，值爲列表 # user = fields.MultipleChoiceField( # choices=((1,'上海'),(2,'北京'),), # initial=[1,], # widget=widgets.SelectMultiple # ) # 單checkbox # user = fields.CharField( # widget=widgets.CheckboxInput() # ) # 多選checkbox,值爲列表 # user = fields.MultipleChoiceField( # initial=[2, ], # choices=((1, '上海'), (2, '北京'),), # widget=widgets.CheckboxSelectMultiple # )
4， 自定義校驗的方式
1. 正則
2. 本身寫函數，註冊到validations
3. 鉤子函數
self.errors ---> self._errors = {} --> 用來存放錯誤信息
self.cleaned_data = {} --> 用來存放經過校驗的數據
1. 局部鉤子
2. 全局鉤子
校驗
方式一：
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' })
相關文章
- 1. Django之Form表單
- 2. django之Form表單
- 3. django之form表單
- 4. Django之form表單
- 5. form 表單 Django form表單
- 6. django Form表單
- 7. Django Form表單
- 8. Django form表單
- 9. django form表單
- 10. Django-form表單
- 更多相關文章...
- • jQuery Mobile 表單 - jQuery Mobile 教程
- • Thymeleaf表單 - Thymeleaf 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Django之Form表單
- 2. django之Form表單
- 3. django之form表單
- 4. Django之form表單
- 5. form 表單 Django form表單
- 6. django Form表單
- 7. Django Form表單
- 8. Django form表單
- 9. django form表單
- 10. Django-form表單