django框架之form組件
內容回顧：
1. 內容回顧
1. 復習JSON
1. JSON是什麽？
一種數據格式，和語言無關的數據格式。
2. Python裏面轉換
1. Python對象 --> 字符串
import json
字符串 = json.dumps(對象)
2. 字符串 --> Python對象
對象 = json.loads(字符串)
3. 註意事項：
Python中的字典要用雙引號。
3. JS裏面轉換
1. JS對象 --> 字符串
var s1 = JSON.stringify(對象)
2. 字符串 --> JS對象
var obj = JSON.parse(字符串)
3. 註意事項：
1. JS裏面不支持被JSON序列化的
1. undefined
2. 時間對象
3. 函數
4. 十六進制
2. AJAX
1. 瀏覽器往服務端發請求的方式
1. 瀏覽器地址欄輸入網址直接回車 --> GET
2. form表單 --> GET/POST
- form表單中必須要有submit按鈕
- action屬性控制著往哪裏提交請求
- method屬性控制著發送請求的方法（類型）
- 如果要上傳文件需要設置enctype="multipart/form-data"
3. a標簽 --> GET
4. ajax --> GET/POST
1. JS的技術，向服務端發送異步請求的技術
2. jQuery封裝的發送ajax的方法：
$.ajax({
url: ‘‘,
type: ‘post‘,
data: {"name": "alex", "hobby": JSON.stringify(["吃飯", "睡覺", "打豆豆"])},
success:function(res){
// res就是後端給我返回的響應內容
console.log(res)
}
})
3. Django項目中 ajax如何配置csrf_token
1. 自己找csrf_token那個input標簽，把數據拼接到ajax的data中
2. jquery.cookie.js的插件，從cookie中取csrf_token值
3. 自己寫一個從cookie中取值的方法，從cookie中取csrf_token值
4. 自己寫一個setAjax的js插件，每次都引用一下，
本質上是從cookie中取到csrf_token的值，設置到了ajax的請求頭上
4. ajax上傳文件
var obj = new FormData();
obj.append("file", document.getElementById(‘id值‘).files[0])
obj.append("name", "alex")
$.ajax({
url: ‘‘,
type: ‘post‘,
data: obj,
processData: false, // 不讓jQuery處理我的數據
contentType: false, // 不讓jQuery處理我請求內容的類型
success:function(res){
// res就是後端給我返回的響應內容
console.log(res)
}
})
3. 補充：sweetalert的用法
今日內容：
Form介紹：
我們之前在HTML頁面中利用form表單向後端提交數據時，都會寫一些獲取用戶輸入的標簽並且用form標簽把它們包起來。
與此同時我們在好多場景下都需要對用戶的輸入做校驗，比如校驗用戶是否輸入，輸入的長度和格式等正不正確。如果用戶輸入的內容有錯誤就需要在頁面上相應的位置顯示對應的錯誤信息.。
Django form組件就實現了上面所述的功能。
總結一下，其實form組件的主要功能如下:
- 生成頁面可用的HTML標簽
- 對用戶提交的數據進行校驗
- 保留上次輸入內容
普通方式手寫註冊功能：
views.py
def register2(request): err_msg= ‘‘ username = ‘‘ pwd = ‘‘ if request.method == ‘POST‘: username = request.POST.get(‘username‘) pwd = request.POST.get(‘password‘) if len(username)<6: err_msg = ‘用戶名不能少於6位‘ else: err_msg = ‘用戶名可以使用‘ return render(request,‘register2.html‘,{‘err_msg‘:err_msg,‘username‘:username,‘pwd‘:pwd})
html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" method="post"> {% csrf_token %} <div>用戶名： <input type="text" name="username" value="{{ username }}"> </div> <div>密 碼： <input type="password" name="password" value="{{ pwd }}"> </div> <div> <button type="submit">註冊</button> <span>{{ err_msg }}</span> </div> </form> </body> </html>
使用form組件實現註冊功能:
views.py:
先定義好一個RegForm類：
from django import forms
class RegForm(forms.Form): name = forms.CharField(min_length=6) pwd = forms.CharField()
再寫一個視圖函數：
def register(request): form_obj = RegForm() return render(request,‘register.html‘,{‘form_obj‘:form_obj})
html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" method="post" novalidate autocomplete="off"> # novalidate是將瀏覽器的驗證關掉，autocomplete="off"是將瀏覽器的自動提示關掉 {% csrf_token %} #{{ form_obj.as_p}} input標簽被p標簽包裹
{{ form_obj}} <div> <p> <input type="submit" value="註冊"> </p> </div> </form> </body> </html>
這就是一個最簡單的django中的form組件實現的一個認證。我們html代碼中並沒有寫用戶名和密碼的標簽，但是我們在類中定義了這兩個字段，在試圖函數中，我們實例化了一個空的Regform類，django中的form組件自動為我們加上了這兩個input標簽。
如果我們需要在用戶名小於6位 的時候有報錯提示，就需要在視圖中加上form_obj.is_valid()
views.py代碼：
def register(request): form_obj = RegForm() if request.method == ‘POST‘:
# 實例化對象的時候把post提交過來的數據直接傳進去 在html中就可以直接調用對象的屬性 form_obj = RegForm(request.POST) username = request.POST.get(‘name‘) password = request.POST.get(‘pwd‘) if form_obj.is_valid(): # 調用form_obj校驗數據的方法 對類中的某一個字段進行校驗 return HttpResponse(‘註冊成功‘) return render(request,‘register.html‘,{‘form_obj‘:form_obj})
html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" method="post" novalidate autocomplete="off"> {% csrf_token %} {# {{ form_obj.as_p}}#} <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> <p> <input type="submit" value="註冊" class="btn btn-success"> </p> </form> </body> </html>
這樣就可以了。
但他顯示的是英文，接下來我們就介紹一些常用的字段與插件。讓他加上更多的校驗條件。
常用字段與插件：
initial：
初始值，input框裏面的初始值。
class RegForm(forms.Form): name = forms.CharField(min_length=6,label=‘用戶名‘,initial=‘張三‘,) pwd = forms.CharField(label=‘密碼‘,min_length=8,)
error_messages：重寫錯誤信息。
class RegForm(forms.Form): name = forms.CharField(min_length=6,label=‘用戶名‘, initial=‘張三‘, error_messages={ ‘min_length‘:‘用戶名最少6位‘, ‘required‘:‘不能為空‘, ‘invalid‘:‘格式錯誤‘, }) pwd = forms.CharField(label=‘密碼‘,min_length=8,)
password：
class RegForm(forms.Form): 。。。。。 pwd = forms.CharField(label=‘密碼‘, min_length=8, widget=forms.widgets.PasswordInput(attrs={‘class‘:‘c1‘},render_value=True) )
PasswordInput是將密碼設置成暗文的。widget就是插件的意思。attr就是給標簽加上自定義的屬性render_value=True是密碼在點擊提交之後，仍然保存在頁面。
radioSelect：單radio值為字符串
class RegForm(forms.Form): name = forms.CharField(min_length=6,label=‘用戶名‘, initial=‘張三‘, error_messages={ ‘min_length‘:‘用戶名最少6位‘, ‘required‘:‘不能為空‘, ‘invalid‘:‘格式錯誤‘, }) pwd = forms.CharField(label=‘密碼‘, min_length=8, widget=forms.widgets.PasswordInput(attrs={‘class‘:‘c1‘},render_value=True) ) gender = forms.ChoiceField( choices=((1,‘男‘),(2,‘女‘),(3,‘保密‘)), label=‘性別‘, initial=3, widget=forms.widgets.RadioSelect() )
單選Select：
class LoginForm(forms.Form): ... hobby = forms.ChoiceField( choices=((1, "籃球"), (2, "足球"), (3, "雙色球"), ), label="愛好", initial=3, widget=forms.widgets.Select() )
多選Select：
hobby = forms.MultipleChoiceField( choices=((1,‘籃球‘),(2,‘足球‘),(3,‘球球‘)), initial=[1,2], label=‘愛好‘, widget=forms.widgets.SelectMultiple() )
單選checkbox：
remember = forms.ChoiceField( label=‘是否記住密碼‘, initial=‘checked‘, widget=forms.widgets.CheckboxInput() )
多選checkbox：
class LoginForm(forms.Form): ... hobby = forms.MultipleChoiceField( choices=((1, "籃球"), (2, "足球"), (3, "雙色球"),), label="愛好", initial=[1, 3], widget=forms.widgets.CheckboxSelectMultiple() )
文本框輸入：
memo = forms.CharField( label=‘個人簡介‘, widget=forms.widgets.Textarea() )
這就是常用的字段和插件。
我們應該把這個RegForm的類單獨放在一個文件裏，views裏應該只放我們的試圖函數。
比如說我們現在有這樣一個字段：
class LoginForm(forms.Form): ... job = forms.ChoiceField( choices=((1, "碼農"), (2, "騎士"), (3, "碼畜"), ), label="工作", initial=3, widget=forms.widgets.Select() )
但是我們的選項想要設置成動態的，選項是可以根據我們數據庫中的值動態變化的，應該怎麽寫：
我們需要在數據庫中創建一個job表,在表中添加一些數據。
models.py中寫：
class Job(models.Model): name = models.Charfield(max_lenth=12)
我們認為是這樣寫的：
class LoginForm(forms.Form): ... job = forms.ChoiceField( choices=models.Job.object.all（）.value_list(‘id‘,‘name‘) label="工作", initial=3, widget=forms.widgets.Select() )
這樣確實可以拿到數據庫中的值，但是當數據庫中的值發生改變時，這樣就不行了。因為他會為了實現頁面加載速度的盡快響應,他就將我的第一次請求緩存起來了，所以當數據庫的值發生變化時，他給我返回的是緩存的數據，並不是數據庫改變後的數據。
這是我們需要他必須從數據庫裏查數據，就要額外的做一些配置，重寫__init__。
class LoginForm(forms.Form): ... job = forms.ChoiceField( choices=models.Job.object.all（）.value_list(‘id‘,‘name‘) label="工作", initial=3, widget=forms.widgets.Select() )
def __init__(self, *args, **kwargs):
super(RegForm,self).__init__(*args, **kwargs)
self.fields[‘job‘].choices = models.Job.object.all（）.value_list(‘id‘,‘name‘)
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類型
校驗
form表單裏面也需要校驗的，比如說手機號必須是11位，而且也是通過正則表達式校驗的:
from django.core.validators import RegexValidator # 導入Django內置的正則校驗規則 class RegForm(forms.Form): phone = forms.CharField( label="手機", validators=[RegexValidator(r‘^1[3|4|5|6|7|8|9]\d{9}$‘, "手機號碼格式不正確！"), ] )
我們也可以自定義一個校驗規則：
from django.core.exceptions import ValidationError # 導入Django內置的校驗異常的類
自定義校驗方法： def name_check(value): if ‘阿瑟東‘ in value: raise ValidationError(‘不符合你的名字‘) else: return value class RegForm(forms.Form): name = forms.CharField(min_length=6,label=‘用戶名‘, initial=‘張三‘, error_messages={ ‘min_length‘:‘用戶名最少6位‘, ‘required‘:‘不能為空‘, ‘invalid‘:‘格式錯誤‘, }, validators=[name_check,] )
鉤子函數：is_valid（）用來判斷是否通過校驗
局部鉤子：def clean_字段名():
def clean_name （self）：form表單裏面的某個字段內置的校驗的校驗方法完了之後，會調用此方法，用來校驗name字段。
全局鉤子：def clean():
def clean（self）：重寫父類的clean方法，該clean方法在每個字段校驗通過之後才調用。比如說password和re_password字段是否相等。
class RegForm(forms.Form): name = forms.CharField(min_length=6,label=‘用戶名‘, initial=‘張三‘, error_messages={ ‘min_length‘:‘用戶名最少6位‘, ‘required‘:‘不能為空‘, ‘invalid‘:‘格式錯誤‘, }, # validators=[name_check,] ) pwd = forms.CharField(label=‘密碼‘, min_length=8, widget=forms.widgets.PasswordInput(render_value=True) ) re_pwd = forms.CharField(label=‘密碼‘, min_length=8, widget=forms.widgets.PasswordInput( render_value=True) )
def clean_name(self):
value = self.cleaned_data.get(‘name‘)
if ‘阿瑟東‘ in value:
raise ValidationError(‘名字輸入有非法字符‘)
else:
return value
def clean(self):
pwd = self.cleaned_data.get(‘pwd‘)
re_pwd = self.cleaned_data.get(‘rpwd‘)
if re_pwd and re_pwd == pwd:
return self.cleaned_data
else:
self.add_error(‘re_pwd‘,‘兩次密碼不一致‘)
django框架之form組件