https://www.cnblogs.com/liwenzhou/p/8747872.html 2. 今日內容 1. form組件 1. 需求分析 1. 要有form標籤 ---> form組件能夠生成HTML標籤 2. 對用戶填寫的數據作校驗 1. 前端作校驗(能作就作) 2. 後端作校驗(必備) ---> form組件能夠幫咱們作校驗 3. 校驗失敗要保留以前填寫那一些內容 --> 保留以前填寫的值 優勢: 1.form 標籤 2.作校驗 3.保留錯誤信息 2. 校驗功能 <ul class="errorlist"> <li>username <ul class="errorlist"> <li>This field is required.</li> </ul> </li> <li>pwd <ul class="errorlist"> <li>This field is required.</li> </ul> </li> </ul> 3. 源碼剖析 1. form_obj.is_valid() self.fields = {"username": username的校驗規則, "pwd": pwd的校驗規則...} self._errors = ErrorDict() # 用來放錯誤信息 self.cleaned_data = {} # 用來放校驗經過的數據 2. 打斷點!!! 3. hooks 鉤子函數...
1. 內容回顧 1. form組件 1. 生成HTML標籤 2. 校驗 ***** 3. 保存上一次輸入的內容
咱們以前在HTML頁面中利用form表單向後端提交數據時,都會寫一些獲取用戶輸入的標籤而且用form標籤把它們包起來。css
與此同時咱們在好多場景下都須要對用戶的輸入作校驗,好比校驗用戶是否輸入,輸入的長度和格式等正不正確。若是用戶輸入的內容有錯誤就須要在頁面上相應的位置顯示顯示對應的錯誤信息.。html
Django form組件就實現了上面所述的功能。前端
總結一下,其實form組件的主要功能以下:jquery
普通的登陸git
views.pyajax
def login(request): error_msg = "" if request.method == "POST": username = request.POST.get("username") pwd = request.POST.get("pwd") if username == "Q1mi" and pwd == "123456": return HttpResponse("OK") else: error_msg = "用戶名或密碼錯誤" return render(request, "login.html", {"error_msg": error_msg})
login.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="/login/" method="post"> {% csrf_token %} <p> <label for="username">用戶名</label> <input type="text" name="username" id="username"> </p> <p> <label for="pwd">密碼</label> <input type="password" name="pwd" id="pwd"> <span class="error"></span> </p> <p> <input type="submit"> <span class="error">{{ error_msg }}</span> </p> </form> </body> </html>
使用form組件數據庫
views.pydjango
先定義好一個LoginForm類。bootstrap
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類時,主要涉及到 【字段】 和 【插件】,字段用於對用戶請求數據的驗證,插件用於自動生成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())
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類型
方式一:
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'郵箱'}))
方式三:
# 看源碼的結果 鉤子函數 def clean_username(self): username = self.cleaned_data.get('username') if '666' in username: raise ValidationError('只含666學不會') else: return username
應用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' })
urls.py
from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('register/', views.register), path('register2/', views.register2), ]
models.py
from django.db import models # Create your models here. class Hobby(models.Model): name = models.CharField(max_length=32) class UserInfo(models.Model): name = models.CharField(max_length=32) pwd = models.CharField(max_length=32) gender = models.IntegerField()
views.py
from django.shortcuts import render,HttpResponse from django import forms from django.forms import Form,fields,widgets from django.core.validators import RegexValidator,ValidationError from app01 import models # 定義一個form 類 class RegisterForm(Form): # 默認不爲空 # text username = fields.CharField( label='用戶名', min_length=6, max_length=12, initial= '張三', error_messages={ "required": "不能爲空", # "invalid": "格式錯誤", # 校驗失敗顯示 的提示信息 "min_length": "用戶名最短6位", "max_length":"用戶名最長24位" }, widget = forms.widgets.TextInput( attrs={'class':'c2'} ), label_suffix='', # label 後綴位空 validators=[RegexValidator(r'^[^666]','用戶不能以666開頭')] # 不能以666 開頭 正則 # 寫函數 ) # password pwd = fields.CharField( label='密碼', widget=widgets.PasswordInput( attrs={'class': 'c1 c2'}, # 添加類屬性 render_value=True # 校驗值 回不回填 到 html 頁面中 ) ) # 單選的radio gender = forms.fields.ChoiceField( choices=((1, "男"), (2, "女"), (3, "保密")), label="性別", initial=3, widget=forms.widgets.RadioSelect # 設置生成標籤的type 類型 ) # 單選的select hobby1 = forms.fields.ChoiceField( choices=((1, "籃球"), (2, "足球"), (3, "雙色球"), ), label="愛好", initial=3, widget=forms.widgets.Select ) # 多選的select hobby2 = forms.fields.MultipleChoiceField( choices=((1, "籃球"), (2, "足球"), (3, "雙色球"), ), label="愛好", initial=[1, 3], widget=forms.widgets.SelectMultiple ) # 單選的checkbox keep = forms.fields.ChoiceField( label="是否記住密碼", initial="checked", widget=forms.widgets.CheckboxInput ) # 多選的checkbox hobby = forms.fields.MultipleChoiceField( # choices=((1, "籃球"), (2, "足球"), (3, "雙色球"),), # choices=models.Hobby.objects.all().values_list('id','name'), label="愛好", initial=[1, 3], widget=forms.widgets.CheckboxSelectMultiple ) # 能夠不用重啓 刷新就有新的 數據 def __init__(self, *args, **kwargs): super(RegisterForm,self).__init__(*args, **kwargs) self.fields['hobby'].widget.choices = models.Hobby.objects.all().values_list('id','name') # 看源碼的結果 鉤子函數 def clean_username(self): username = self.cleaned_data.get('username') if '666' in username: raise ValidationError('只含666學不會') else: return username def register(request): if request.method == 'POST': username = request.POST.get('username') pwd = request.POST.get('pwd') if len(username) < 6: return render(request, 'register.html', {'username_error': '用戶名不能小於6位'}) # return render(request,'register.html') form_obj = RegisterForm() return render(request, 'register.html', {'form_obj': form_obj}) # # def register2(request): # if request.method == 'POST': # username = request.POST.get('username') # pwd = request.POST.get('pwd') # # form_obj2 = RegisterForm(request.POST) # 把post請求的數據 傳到RegisterForm # if form_obj2.is_valid(): # # 校驗經過 # return HttpResponse('校驗成功') # else: # # 校驗失敗 # print(form_obj2.errors) # return render(request, 'register.html', {'form_obj': form_obj2}) # # # # 實例化一個RegisterForm對象 # form_obj = RegisterForm() # return render(request, 'register.html', {'form_obj': form_obj}) # 優化 def register2(request): form_obj = RegisterForm() if request.method == 'POST': # username = request.POST.get('username') # pwd = request.POST.get('pwd') form_obj = RegisterForm(request.POST) # 把post請求的數據 傳到RegisterForm if form_obj.is_valid(): # 執行校驗規則 # 從校驗好的數據中取須要的字段值 username = form_obj.cleaned_data.get('username') pwd = form_obj.cleaned_data.get('pwd') models.UserInfo.objects.create() return HttpResponse('註冊成功') return render(request, 'register2.html', {'form_obj': form_obj})
init_ajax.js
// 從cooikie 取 csft token 的值 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'); // 將csrftoken 設置到ajax 請求頭中,後續的ajax請求就會自動攜帶這個csrf token 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); } } });
register.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>register</title> </head> <body> <form action="/register/" method="post"> {% csrf_token %} <p> <label for="">用戶名</label> <input type="text" name="username" id="username"> <span>{{ username_error }}</span> </p> <p> <label for="">密碼</label> <input type="password" name="pwd" id="pwd"> </p> <p> <input type="submit" value="註冊"> </p> </form> <hr> <hr> {# novalidate 瀏覽器不幫咱們作校驗 #} <form action="/register2/" method="post" novalidate> {% csrf_token %} {{ form_obj.as_p }} {# <div class="form-group">#} {# <label class="c1" for="{{ form_obj.username.id_for_label }}">{{ form_obj.username.label }}</label>#} {# {{ form_obj.username }}#} {# </div>#} <p> <input type="submit" value="註冊"> </p> {# {{ form_obj.errors.username }}#} </form> </body> </html>
register2.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"> <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css"> <title>login</title> </head> <body> <div class="container"> <div class="row"> <div class="panel panel-primary" style="margin-top: 100px"> <div class="panel-body"> <form action="/register2/" 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> </div> </div> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
-----------------------------------------------------------------
urls.py
from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path('register/', views.register), ]
models.py
from django.db import models # Create your models here. class UserInfo(models.Model): user = models.CharField(max_length=32) pwd = models.CharField(max_length=32) def __str__(self): return self.user
forms.py
# -*- coding:utf-8 -*- from django import forms class RegisterForm(forms.Form): user = forms.CharField( label='用戶名', min_length=6, error_messages={ 'required':'用戶名不能位空', 'min_length':'用戶名不能小於6位', } ) pwd = forms.CharField( label='密碼', min_length=6, error_messages={ 'required':'密碼不能爲空', 'min_length':'密碼不能小於6位', }, widget=forms.widgets.PasswordInput(render_value=True) # render_value = True 可使 密碼保留 )
views.py
from django.shortcuts import render,HttpResponse from app01 import forms,models # # def register(request): # if request.method == 'POST': # # 把post 提交過來的數據 都傳到form表單裏 # form_obj = forms.RegisterForm(request.POST) # if form_obj.is_valid(): # # form_obj.cleaned_data 有效的數據存放在這 # # # user = form_obj.cleaned_data.get('user') # # pwd = form_obj.cleaned_data.get('pwd') # # models.UserInfo.objects.create(user=user,pwd=pwd) # # # print(user,pwd) # # print('*'*120) # # print(form_obj.cleaned_data) # 字典 # # models.UserInfo.objects.create(**form_obj.cleaned_data) # # return HttpResponse('OK') # else: # form.obj.errors # return render(request, 'request.html', {'form_obj': form_obj}) # # form_obj = forms.RegisterForm() # return render(request,'request.html',{'form_obj':form_obj}) # 優化 def register(request): form_obj = forms.RegisterForm() if request.method == 'POST': # 把post 提交過來的數據 都傳到form表單裏 form_obj = forms.RegisterForm(request.POST) if form_obj.is_valid(): models.UserInfo.objects.create(**form_obj.cleaned_data) return HttpResponse('OK') return render(request,'request.html',{'form_obj':form_obj})
request.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>歡迎註冊</h1> <form action="" method="post" novalidate> {% csrf_token %} <p> <label for="{{ form_obj.user.id_for_label }}">{{ form_obj.user.label}}</label> {{ form_obj.user }} <span>{{ form_obj.user.errors.0 }}</span> </p> <p> <label for="{{ form_obj.pwd.id_for_label }}">{{ form_obj.pwd.label }}</label> {{ form_obj.pwd }} <span>{{ form_obj.pwd.errors.0 }}</span> </p> <p> <input type="submit" value="註冊"> </p> </form> </body> </html>
校驗字段功能
針對一個實例:註冊用戶講解。
models.py
class UserInfo(models.Model): name=models.CharField(max_length=32) pwd=models.CharField(max_length=32) email=models.EmailField() tel=models.CharField(max_length=32)
模板: register.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" method="post"> {% csrf_token %} <div> <label for="user">用戶名</label> <p><input type="text" name="name" id="name"></p> </div> <div> <label for="pwd">密碼</label> <p><input type="password" name="pwd" id="pwd"></p> </div> <div> <label for="r_pwd">確認密碼</label> <p><input type="password" name="r_pwd" id="r_pwd"></p> </div> <div> <label for="email">郵箱</label> <p><input type="text" name="email" id="email"></p> </div> <input type="submit"> </form> </body> </html>
視圖函數:register
# forms組件 from django.forms import widgets wid_01=widgets.TextInput(attrs={"class":"form-control"}) wid_02=widgets.PasswordInput(attrs={"class":"form-control"}) class UserForm(forms.Form): name=forms.CharField(max_length=32, widget=wid_01 ) pwd=forms.CharField(max_length=32,widget=wid_02) r_pwd=forms.CharField(max_length=32,widget=wid_02) email=forms.EmailField(widget=wid_01) tel=forms.CharField(max_length=32,widget=wid_01) def register(request): if request.method=="POST": form=UserForm(request.POST) if form.is_valid(): print(form.cleaned_data) # 全部乾淨的字段以及對應的值 else: print(form.cleaned_data) # print(form.errors) # ErrorDict : {"校驗錯誤的字段":["錯誤信息",]} print(form.errors.get("name")) # ErrorList ["錯誤信息",] return HttpResponse("OK") form=UserForm() return render(request,"register.html",locals())
渲染標籤功能
渲染方式1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <h3>註冊頁面</h3> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-offset-3"> <form action="" method="post"> {% csrf_token %} <div> <label for="">用戶名</label> {{ form.name }} </div> <div> <label for="">密碼</label> {{ form.pwd }} </div> <div> <label for="">確認密碼</label> {{ form.r_pwd }} </div> <div> <label for=""> 郵箱</label> {{ form.email }} </div> <input type="submit" class="btn btn-default pull-right"> </form> </div> </div> </div> </body> </html>
渲染方式2
<form action="" method="post"> {% csrf_token %} {% for field in form %} <div> <label for="">{{ field.label }}</label> {{ field }} </div> {% endfor %} <input type="submit" class="btn btn-default pull-right"> </form>
渲染方式3
<form action="" method="post"> {% csrf_token %} {{ form.as_p }} <input type="submit" class="btn btn-default pull-right"> </form>
顯示錯誤與重置輸入信息功能
視圖
def register(request): if request.method=="POST": form=UserForm(request.POST) if form.is_valid(): print(form.cleaned_data) # 全部乾淨的字段以及對應的值 else: print(form.cleaned_data) # print(form.errors) # ErrorDict : {"校驗錯誤的字段":["錯誤信息",]} print(form.errors.get("name")) # ErrorList ["錯誤信息",] return render(request,"register.html",locals()) form=UserForm() return render(request,"register.html",locals())
模板
<form action="" method="post" novalidate> {% csrf_token %} {% for field in form %} <div> <label for="">{{ field.label }}</label> {{ field }} <span class="pull-right" style="color: red">{{ field.errors.0 }}</span> </div> {% endfor %} <input type="submit" class="btn btn-default"> </form>
局部鉤子與全局鉤子
模板
# forms組件 from django.forms import widgets wid_01=widgets.TextInput(attrs={"class":"form-control"}) wid_02=widgets.PasswordInput(attrs={"class":"form-control"}) from django.core.exceptions import ValidationError class UserForm(forms.Form): name=forms.CharField(max_length=32, widget=wid_01 ) pwd=forms.CharField(max_length=32,widget=wid_02) r_pwd=forms.CharField(max_length=32,widget=wid_02) email=forms.EmailField(widget=wid_01) tel=forms.CharField(max_length=32,widget=wid_01) # 局部鉤子 *** def clean_name(self): val=self.cleaned_data.get("name") if not val.isdigit(): return val else: raise ValidationError("用戶名不能是純數字!") # 全局鉤子 *** 返回 key 是 __all__ def clean(self): pwd=self.cleaned_data.get("pwd") r_pwd=self.cleaned_data.get("r_pwd")
if pwd and r_pwd: # 兩個字段 都校驗經過了 才用全局判斷是否相等!
if pwd==r_pwd: return self.cleaned_data else: raise ValidationError('兩次密碼不一致!') else:
return self.clean_date
def register(request): if request.method=="POST": form=UserForm(request.POST) if form.is_valid(): print(form.cleaned_data) # 全部乾淨的字段以及對應的值 else: clean_error=form.errors.get("__all__") return render(request,"register.html",locals()) form=UserForm() return render(request,"register.html",locals())
視圖
<form action="" method="post" novalidate> {% csrf_token %} {% for field in form %} <div> <label for="">{{ field.label }}</label> {{ field }} <span class="pull-right" style="color: red"> {% if field.label == 'R pwd' %} <span>{{ clean_error.0 }}</span> {% endif %} {{ field.errors.0 }} </span> </div> {% endfor %} <input type="submit" class="btn btn-default"> </form>
'''
http://www.cnblogs.com/yuanchenqi/articles/9036474.html
if 全部字段校驗成功 則
form.cleaned_data存字典 ({'name':'yuan','email':'123@qq.com'})
form.errors 放錯誤的 {email:['......']}
注意:
前端form 表單的name屬性應該與forms組件名稱對應
if form.is_valid(): # 全都正確且爲正確的規則
print(form.cleaned_data) #字典 {'name': 'yuan'}
print(form.errors) # 字典
print(type(form.errors.get('pwd')) # 列表
print(form.errors.get('name')[0]) # 錯誤內容
注意:form組件幹什麼的
校驗
渲染form標籤
保留以前的用戶輸入的錯誤內容
提示錯誤緣由對應的校驗規則
'''
urls.py
from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path('reg/', views.reg), ]
models.py
from django.db import models # Create your models here. class UserInfo(models.Model): name = models.CharField(max_length=32) pwd = models.CharField(max_length=32) email = models.EmailField() tel = models.CharField(max_length=32)
views.py
from django.shortcuts import render,HttpResponse # Create your views here. from django import forms from django.forms import widgets class UserForm(forms.Form): # 默認非空 name = forms.CharField(min_length=4,label='用戶名',error_messages={'required':'不能爲空'}, widget=widgets.TextInput(attrs={'class':'form-control'}) ) pwd = forms.CharField(min_length=4,label='密碼', widget=widgets.PasswordInput(attrs={'class':'form-control'})) r_pwd = forms.CharField(min_length=4,label='確認密碼', widget=widgets.TextInput(attrs={'class': 'form-control'}) ) email = forms.EmailField(label='郵箱',error_messages={'required':'不能爲空','invalid':'格式錯誤'}, widget=widgets.TextInput(attrs={'class': 'form-control'}) ) tel = forms.CharField(label='手機號', widget=widgets.TextInput(attrs={'class': 'form-control'}) ) def reg(request): if request.method == 'POST': print(request.POST) # form = UserForm({'name':'yuan','email':'123@qq.com','xxx':'alice'}) # form = UserForm({'name':'yuan','email':'123','xxx':'alice'}) form = UserForm(request.POST) # 鍵和字段 對應 中間有一個csrftoken 可是不會影響 # 注意 前端form 表單的name屬性應該與forms組件名稱對應 print(form.is_valid()) # true false if form.is_valid(): # 全都正確且爲正確的規則 print(form.cleaned_data) # {'name':'yuan','email':'123@qq.com'} else: # print('*' * 120) # print(form.cleaned_data) # {'name': 'yuan'} # print(form.errors) # {email:['......']} # print(type(form.errors)) # ErrorDict # {email:['......']} # print(form.errors.get('name')) # print(form.errors.get('pwd')) # <ul class="errorlist"><li>This field is required.</li></ul> # print(type(form.errors.get('pwd'))) # ErrorList # print(form.errors.get('name')[0]) # This field is required. return render(request, 'reg.html', locals()) # {'name': 'yuan'} # < ul class ="errorlist" > # < li > name < ul class ="errorlist" > < li > This field is required.< / li > < / ul > < / li > # < li > tel < ul class ="errorlist" > < li > This field is required.< / li > < / ul > < / li > # < / ul > return HttpResponse('OK') form = UserForm() return render(request,'reg.html',locals()) ''' http://www.cnblogs.com/yuanchenqi/articles/9036474.html if 全部字段校驗成功 則 form.cleaned_data存字典 ({'name':'yuan','email':'123@qq.com'}) form.errors 放錯誤的 {email:['......']} 注意: 前端form 表單的name屬性應該與forms組件名稱對應 if form.is_valid(): # 全都正確且爲正確的規則 print(form.cleaned_data) #字典 {'name': 'yuan'} print(form.errors) # 字典 print(type(form.errors.get('pwd')) # 列表 print(form.errors.get('name')[0]) # 錯誤內容 注意:form組件幹什麼的 校驗 渲染form標籤 保留以前的用戶輸入的錯誤內容 提示錯誤緣由對應的校驗規則 '''
reg.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>reg</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-offset-3"> <h3>form表單渲染</h3> <form action="" method="post"> {% csrf_token %} <p>用戶名 <input type="text" name="name"></p> <p>密碼 <input type="password" name="pwd"></p> <p>確認密碼 <input type="password" name="r_pwd"></p> <p>郵箱 <input type="text" name="email"></p> <p>手機號 <input type="text" name="tel"></p> <input type="submit"> </form> <br> <h3>form組件渲染方式一</h3> {# novalidate 瀏覽器不幫咱們校驗 value值會出現錯誤信息 #} <form action="" method="post" novalidate> {% csrf_token %} <p>{{ form.name.label }} {{ form.name }} {{ form.name.errors.0 }} </p> <p>{{ form.pwd.label }} {{ form.pwd }} {{ form.pwd.errors.0 }} </p> <p>{{ form.r_pwd.label }} {{ form.r_pwd }} {{ form.r_pwd.errors.0 }} </p> <p>{{ form.email.label }} {{ form.email }} {{ form.email.errors.0 }} </p> <p>{{ form.tel.label }} {{ form.tel }} {{ form.tel.errors.0 }} </p> <input type="submit"> </form> <br> <h3>form組件渲染方式二</h3> {#<p>通常用這種方式 靈活 </p>#} <form action="" method="post"> {% csrf_token %} {% for field in form %} <p> <lable for="">{{ field.label }}</lable> {{ field }} </p> {% endfor %} <input type="submit"> </form> <br> <h3>form組件渲染方式三</h3> {# 通常不用這種方式 方式寫死了 #} <form action="" method="post"> {% csrf_token %} {{ form.as_p }} {# {{ form.as_ul }}#} <input type="submit"> </form> </div> </div> </div> </body> </html>
https://www.cnblogs.com/yuanchenqi/articles/7614921.html
https://www.cnblogs.com/wupeiqi/articles/6144178.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
# )