Forms組件的使用
在html表單驗證中，需要通過各種信息的驗證，比如注冊界面的姓名、密碼、郵箱、電話等的驗證，是否符合定義好的規則，不可能每次都要取出對應的字段一一判斷，django內置了Forms組件，可以方便的在HTML中進行校驗等信息設置
1.Forms組件的作用
1.數據校驗
2.渲染頁面
3.渲染錯誤信息
4.使用局部或者全局的鉤子函數
5.設置CSS樣式
2.Forms組件的使用
- 1.導入froms模塊
from django import forms - 2.定義一個類繼承自forms.Form,編寫校驗的字段,該字段就是html頁面上提交數據上傳的字段
class RegisterForms(Form):# 添加的字段類型中的屬性，每個子類都繼承自field，#field中對應的屬性和釋義#required=True, 是否是必須驗證,默認為True#widget=None, HTML插件，添加類名，設置placeholder等等#label=None, 用于生成Label標簽或顯示內容#initial=None, 初始值#help_text='', 幫助信息(在標簽旁邊顯示)#error_messages=None, 錯誤信息 {'required': '不能為空', 'invalid': '格式錯誤'}#validators=[], 自定義驗證規則#localize=False, 是否支持本地化#disabled=False, 是否可以編輯#label_suffix=None Label內容后綴name = forms.CharField(min_length=3,max_length=8,label="用戶名",error_messages={'min_length':'用戶名最少為3位','max_length':'用戶名最多8位','required':'名稱不能為空'})pwd = forms.CharField(min_length=6, max_length=20,label='請輸入密碼',error_messages={'min_length':'密碼最少為6位','max_length':'密碼最多20位','required':'密碼不能為空'})re_pwd = forms.CharField(min_length=6, max_length=20,label='請確認密碼',error_messages={'min_length':'密碼最少為6位','max_length':'密碼最多20位','required':'密碼不能為空'})phone = forms.CharField(label="請輸入手機號碼",error_messages={'placerholder': '請輸入手機號碼'})email = forms.EmailField(label='請輸入郵箱',required=False,error_messages={'invalid':'郵箱格式不合法','max_length':'密碼最多20位'})
# 對于多傳的字段不會出錯，cleaned_data中不包含多傳的字段
# 少傳的字段會報錯，相當于對應的字段沒有值- 3.在對應的views視圖中進行校驗,
def form_index(request):post_forms = RegisterForms()error = ''if request.method == 'POST':post_forms = RegisterForms(request.POST)# 4 調用forms的is_valid方法，完成校驗，is_valid返回true或者falseif post_forms():register = post_forms.cleaned_dataprint(register)return HttpResponse('注冊成功')else:from django.forms.utils import ErrorDict# 獲取全局的error信息,只顯示第一個if post_forms.errors.get('__all__'):error = post_forms.errors.get('__all__')[0]return render(request, 'FormsTest/forms_index.html',locals())- 4.通過模板渲染,渲染模板有如下幾種方式，具體使用如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>forms登錄</title>{% load static %}<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}"><script src="{% static 'jquery-3.3.1.js' %}"></script><style>.edit-author{margin: 100px 300px;}.errorinfo{color: red;font-size: 15px;padding-left: 15px;}</style>
</head>
<body><div class="edit-author">
{# <form action="" method="post">#}
{# {% csrf_token %}#}
{# <div class="form-group">#}
{# <label for="exampleInputEmail1">用戶名</label>#}
{# <input type="text" name="name" class="form-control" placeholder="請輸入用戶名" >#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="exampleInputPassword1">密碼</label>#}
{# <input type="password" name="pwd" class="form-control" placeholder="請輸入密碼">#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="exampleInputPassword1">確認密碼</label>#}
{# <input type="password" name="re_pwd" class="form-control" placeholder="請確認密碼">#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="exampleInputPassword1">郵箱</label>#}
{# <input type="email" name="email" class="form-control" placeholder="請輸入郵箱">#}
{# </div>#}
{##}
{# <button type="submit" id="clickBtn" class="btn btn-default submit-button">注冊</button>#}
{# <span id="error"></span>#}
{# </form>#}{# forms渲染頁面第一種方式#}
{# <form action="" method="post">#}
{# {% csrf_token %}#}
{# <div class="form-group">#}
{# <label for="exampleInputEmail1">用戶名</label>#}
{# {{ post_forms.name }}#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="exampleInputPassword1">密碼</label>#}
{# {{ post_forms.pwd }}#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="exampleInputPassword1">確認密碼</label>#}
{# {{ post_forms.re_pwd }}#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="exampleInputPassword1">郵箱</label>#}
{# {{ post_forms.email }}#}
{# </div>#}
{# <button type="submit" id="clickBtn" class="btn btn-default submit-button">注冊</button>#}
{# </form>#}{# forms渲染頁面第二種方式，推薦使用#}<form action="" method="post" novalidate>{% csrf_token %}{% for foo in reg_forms %}<div class="form-group">{# errors是一個列表，一般取第一個就可以了，這樣不會換行處理#}<label for="exampleInputEmail1">{{ foo.label }}</label><span class="errorinfo"> {{ foo.errors.0 }}</span>{{ foo }}</div>{% endfor %}<button type="submit" id="clickBtn" class="btn btn-default submit-button">注冊</button><span class="errorinfo">{{ error }} </span></form>{# forms渲染頁面第二種方式,不推薦使用#}
{# <form action="" method="post">#}
{# {% csrf_token %}#}
{# {{ post_forms.as_p }}#}
{# {{ post_forms.as_ul }}#}
{# {{ post_forms.as_table }}#}
{# <button type="submit" id="clickBtn" class="btn btn-default submit-button">注冊</button>#}
{# </form>#}</div></body>
</html>
- 5.上面只是實現了部分的校驗，而且展示的樣式需要手動渲染，我們可以在定義模型的時候直接設置好對應的css展示樣式和自定義校驗規則，比如電話號碼的正則校驗等等
#導入widgets模塊，設置css的展示樣式
from django.forms import widgets#接下來修改對應的name，pwd，phone等字段，添加新屬性，如下添加了占位符和類名這個時候的登錄界面就和上面的一樣name = forms.CharField(min_length=3,max_length=8,label="用戶名",widget=widgets.TextInput(attrs={'class': 'form-control','placeholder': '請輸入名稱(3-8字符)'}),error_messages={'min_length':'用戶名最少為3位','max_length':'用戶名最多8位','required':'名稱不能為空'})pwd = forms.CharField(min_length=6, max_length=20,label='請輸入密碼',widget=widgets.PasswordInput(attrs={'class':'form-control','placeholder':'請輸入密碼(6-20字符)'}),error_messages={'min_length':'密碼最少為6位','max_length':'密碼最多20位','required':'密碼不能為空'})re_pwd = forms.CharField(min_length=6, max_length=20,label='請確認密碼',widget=widgets.PasswordInput(attrs={'class': 'form-control','placeholder': '請確認密碼'}),error_messages={'min_length':'密碼最少為6位','max_length':'密碼最多20位','required':'密碼不能為空'})phone = forms.CharField(label="請輸入手機號碼",widget=widgets.TextInput(attrs={'class': 'form-control','placeholder': '請輸入手機號碼'}),error_messages={'placerholder': '請輸入手機號碼'})email = forms.EmailField(label='請輸入郵箱',required=False,widget=widgets.TextInput(attrs={'class': 'form-control','placeholder': '請輸入郵箱'}),error_messages={'invalid':'郵箱格式不合法','max_length':'密碼最多20位'})
- 6.自定義校驗規則，有時django自帶的校驗并不能滿足我們所有的需求，比如校驗密碼輸入，不能用特殊字符，手機號碼格式定義正則等，這就需要我們自定義規則
#自定義校驗規則
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('手機號碼格式錯誤')#在定義字段的時候添加校驗規則,校驗規則傳入的是一個列表，可以有多個校驗規則
phone = forms.CharField(label="請輸入手機號碼",validators=[mobile_validate,],widget=widgets.TextInput(attrs={'class': 'form-control','placeholder': '請輸入手機號碼'}),error_messages={'placerholder': '請輸入手機號碼'})
- 7.自定義鉤子，實現自定義的錯誤提示和校驗規則,
#Django中鉤子分為局部鉤子和全局鉤子，
# 局部鉤子函數(某個字段，自定義的規則，數據庫是否存在，以什么開頭)
# 方法名必須為:clean_字段名
def clean_name(self):#獲取到當前對象，是cleaned_data之后的數據name = self.cleaned_data.get('name')if name.startswith('sb'):#以sb開頭了返回錯誤信息,禁止使用sb開頭的用戶名raise ValidationError('不能以sb開頭')# 數據庫中查詢有沒有這個名稱user = models.UserInfo.objects.filter(username=name).first()if user:raise ValidationError('用戶名已存在')return name#全局鉤子，方法名必須是clean
#校驗兩次密碼是否相同等，
def clean(self):pwd = self.cleaned_data.get('pwd')re_pwd = self.cleaned_data.get('re_pwd')if pwd == re_pwd:return self.cleaned_dataelse:raise ValidationError('兩次密碼不一致')
3.最后實現的效果如下圖
