Django元件之Form表單
阿新 • • 發佈：2018-11-15
一、Django中的Form表單介紹 我們之前在HTML頁面中利用form表單向後端提交資料時，都會寫一些獲取使用者輸入的標籤並且用form標籤把它們包起來。 與此同時我們在好多場景下都需要對使用者的輸入做校驗，比如校驗使用者是否輸入，輸入的長度和格式等正不正確。如果使用者輸入的內容有錯誤就需要在頁面上相應的位置顯示對應的錯誤資訊.。 Django form元件就實現了上面所述的功能： 生成頁面可用的HTML標籤 對使用者提交的資料進行校驗 保留上次輸入內容 二、普通方式的form表單註冊 1、views.py def register(request): error_msg= "" if request.method == "POST": username = request.POST.get("username") pwd = request.POST.get("pwd") # 對註冊資訊做校驗 if len(username) < 6: # 使用者長度小於6位 error_msg = "使用者名稱長度不能小於6位" else: # 將使用者名稱和密碼存到資料庫 UserInfo.objects.create(username='username', password='pwd') return redirect("/login/") return render(request, "register.html", {"error_msg": error_msg}) 2、regirest.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-type" charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>註冊頁面</title> </head> <body> <form action="/register/" method="post"> {% csrf_token %} <p> <label for="t1"></label>使用者名稱 <input type="text" name="username" id="t1"> </p> <p> <label for="p1"></label>密碼 <input type="password" name="pwd" id="p1"> </p> <p> <input type="submit" value="註冊"> <p style="color: red">{{ error_msg }}</p> </p> </form> </body> </html> 三、使用form元件實現註冊功能 資料庫 class UserInfo(models.Model): username = models.CharField(max_length=12) password = models.CharField(max_length=20) 1、views.py 1.先定義好一個RegForm類 from django import forms # 按照Django form元件的要求自己寫一個類 class RegForm(forms.Form): name = forms.CharField(max_length=12, label="使用者名稱") pwd = forms.CharField(min_length=6, max_length=18, label="密碼") 2.再寫一個檢視函式 # 使用form元件實現註冊方式 def register(request): form_obj = RegForm() if request.method == "POST": # 例項化form物件的時候，把post提交過來的資料直接傳進去 form_obj = RegForm(request.POST) # 呼叫form_obj校驗資料的方法is_valid if form_obj.is_valid(): username = form_obj.cleaned_data.get('name') # cleaned_data會自動把form提交的資料提取出來形成一個字典 pwd = form_obj.cleaned_data.get('pwd') UserInfo.objects.create(username=username, password=pwd) return redirect("/login/") else: # 如果資料有問題 return render(request, "register.html", {'form_obj': form_obj}) return render(request, "register.html", {"form_obj": form_obj}) 2、regirest.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-type" charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>註冊頁面</title> <body> <form action="/register/" method="post" novalidate autocomplete="off"> {% csrf_token %} <div> <label for="{{ form_obj.name.id_for_label }}">{{ form_obj.name.label }}</label> {{ form_obj.name }} <span>{{ form_obj.name.errors.0 }}</span> </div> <div> <label for="{{ form_obj.pwd.id_for_label }}">{{ form_obj.pwd.label }}</label> {{ form_obj.pwd }} <span>{{ form_obj.pwd.errors.0 }}</span> </div> <div> <input type="submit" class="btn btn-success" value="註冊"> </div> </form> </body> </html> 3、分析 form的功能： 前端頁面是使用Django模板語言和form類的物件生成的 -->生成HTML標籤功能 當用戶名和密碼輸入為空或輸錯form元件會預設為我們設定錯誤資訊 -->使用者提交校驗功能 當用戶輸錯之後仍保留著上次輸入的內容在input框 -->保留上次輸入內容 簡析： {{ form_obj.name }} 自動生成一個input框，屬性就是我們在views.py裡面設定的form類的屬性 {{ form_obj.name.id_for_label }} 關聯自動生成的input框 {{ form_obj.name.label }} form物件的name的label屬性的值 {{ form_obj.name.errors.0 }} 錯誤資訊 四、Form常用欄位與外掛 建立Form類時，主要涉及到 【欄位】 和 【外掛】，欄位用於對使用者請求資料的驗證，外掛用於自動生成HTML; 0、require 設定這個欄位必須要填，預設也是True必填的 class LoginForm(forms.Form): username = forms.CharField( min_length=8, label="使用者名稱", required=False # 設定成不是必須要填 ) pwd = forms.CharField(min_length=6, label="密碼") 1、initial 設定input框裡面的初始值。 class LoginForm(forms.Form): username = forms.CharField( min_length=8, label="使用者名稱", initial="張三" # 設定預設值 ) pwd = forms.CharField(min_length=6, label="密碼") 2、error_messages 1.區域性重寫錯誤資訊，哪個欄位需要重寫錯誤資訊就在哪個欄位設定 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="密碼") 2.設定全域性錯誤資訊(把預設的錯誤資訊由英文改成中文) 在settings.py裡面設定 # LANGUAGE_CODE = 'en-us' LANGUAGE_CODE = 'zh-hans' # 把語言改成中文(漢字) # TIME_ZONE = 'UTC' TIME_ZONE = 'Asia/Shanghai' # 時區改成亞洲上海 3、widget 設定input框的type型別，預設型別是text，密碼框的type應該設定為password 還可以設定input框的屬性，比如class的樣式 class LoginForm(forms.Form): ... pwd = forms.CharField( min_length=6, label="密碼", # 把密碼框設定為password型別，並指定class為c1和c2的樣式類 # 當出現出錯時，其他型別的input框預設是保留你寫的內容，只有密碼框不會儲存 # 想要密碼框錯誤時也保留內容，就設定render_value=True widget=forms.widgets.PasswordInput(attrs={'class': 'c1 c2'}, render_value=True) ) 4、radioSelect 選擇框都是使用forms.fields.ChoiceField 也可以寫成forms.ChoiceField 單選框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() ) 5、單選Select class LoginForm(forms.Form): ... hobby = forms.fields.ChoiceField( choices=((1, "籃球"), (2, "足球"), (3, "雙色球"), ), label="愛好", initial=3, widget=forms.widgets.Select() ) 6、多選Select class LoginForm(forms.Form): ... hobby = forms.fields.MultipleChoiceField( choices=((1, "籃球"), (2, "足球"), (3, "雙色球"), ), label="愛好", initial=[1, 3], widget=forms.widgets.SelectMultiple() ) 7、單選checkbox class LoginForm(forms.Form): ... keep = forms.fields.ChoiceField( label="是否記住密碼", initial="checked", widget=forms.widgets.CheckboxInput() ) 8、多選checkbox class LoginForm(forms.Form): ... hobby = forms.fields.MultipleChoiceField( choices=((1, "籃球"), (2, "足球"), (3, "雙色球"),), label="愛好", initial=[1, 3], widget=forms.widgets.CheckboxSelectMultiple() )