標籤：擷取 通用 使用者 height 預設 ext 模組 提示資訊 select
https://www.cnblogs.com/chenchao1990/p/5284237.html
Form
一、使用Form
Django中的Form使用時一般有兩種功能：
1、產生html標籤
2、驗證輸入內容
要想使用django提供的form，要在views裡匯入form模組
from django import forms
然後再定義一個類，這個類就是要在前端html頁面中產生form表單中的input標籤的。
1 class UserInfo(forms.Form):2 email = forms.EmailField()3 host = forms.CharField()4 port = forms.CharField()5 mobile = forms.CharField()
自訂From的流程：
二、多說無益，直接看代碼：
1 # coding:utf-8 2 3 4 from django import forms 5 6 class UserInfo(forms.Form): #定義的django表單 7 email = forms.EmailField() 8 host = forms.CharField() 9 port = forms.CharField()10 mobile = forms.CharField()11 12 def user_list(request):13 14 obj =UserInfo() #建立form的對象15 if request.method == "POST":16 user_input_obj = UserInfo(request.POST) #request.POST為提交過來的所有資料17 18 if user_input_obj.is_valid(): #is_valid判斷輸入的內容是否合法 Ture 或False19 data = user_input_obj.clean() #.clen()擷取提交的資料20 21 host_name = data[‘host‘]22 print data23 print host_name24 else: #如果輸入不合法，返回錯誤資訊25 error_msg = user_input_obj.errors #errors為錯誤資訊26 return render(request,‘user_list.html‘,{‘obj‘:user_input_obj,‘errors‘:error_msg})27 #將錯誤資訊直接返回到前端頁面去展示28 return render(request,‘user_list.html‘,{‘obj‘:obj})
前端html頁面：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <form action="/user_list/" method="post">10 <p>主機：{{ obj.host }} <span>{{ errors.host }}</span></p>11 <p>連接埠：：{{ obj.port }} <span>{{ errors.port }}</span></p>12 <p>郵箱：：{{ obj.email }} <span>{{ errors.email }}</span></p>13 <p>手機：{{ obj.mobile }} <span>{{ errors.mobile }}</span></p>14 <input type="submit" value="submit">15 16 </form>17 18 </body>19 </html>
三、自訂Form
1、自訂錯誤提示資訊
error_messages={‘required‘: u‘手機不可為空‘},
1 class UserInfo(forms.Form):2 email = forms.EmailField(error_messages={‘required‘: u‘郵箱不可為空‘},)3 host = forms.CharField(error_messages={‘required‘: u‘主機不可為空‘},)4 port = forms.CharField(error_messages={‘required‘: u‘連接埠不可為空‘},)5 mobile = forms.CharField(error_messages={‘required‘: u‘手機不可為空‘},)
2、自訂Form的樣式屬性
widget=forms.TextInput(attrs={‘class‘: "form-control",
‘placeholder‘: u‘手機號碼‘}), 1 class UserInfo(forms.Form): 2 email = forms.EmailField(error_messages={‘required‘: u‘郵箱不可為空‘},) 3 host = forms.CharField(error_messages={‘required‘: u‘主機不可為空‘},) 4 port = forms.CharField(error_messages={‘required‘: u‘連接埠不可為空‘},) 5 mobile = forms.CharField(error_messages={‘required‘: u‘手機不可為空‘}, 6 widget=forms.TextInput(attrs={‘class‘: "form-control", 7 ‘placeholder‘: u‘手機號碼‘}),) 8 9 memo = forms.CharField(required=False, #預設輸入可以為空白10 widget=forms.Textarea(attrs={‘class‘:"form-control",11 ‘placeholder‘:u"備忘"}))
3、自訂驗證Form表單中的內容是否合法：
validators=[mobile_validate, ],
1 from django.core.exceptions import ValidationError 2 import re 3 4 5 def mobile_validate(value): 6 mobile_re = re.compile(r‘^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$‘) 7 if not mobile_re.match(value): 8 raise ValidationError(‘手機號碼格式錯誤‘) 9 10 11 class UserInfo(forms.Form):12 email = forms.EmailField(error_messages={‘required‘: u‘郵箱不可為空‘},)13 host = forms.CharField(error_messages={‘required‘: u‘主機不可為空‘},)14 port = forms.CharField(error_messages={‘required‘: u‘連接埠不可為空‘},)15 mobile = forms.CharField(validators=[mobile_validate, ],16 error_messages={‘required‘: u‘手機不可為空‘},17 widget=forms.TextInput(attrs={‘class‘: "form-control",18 ‘placeholder‘: u‘手機號碼‘}),)19 20 memo = forms.CharField(required=False, #預設輸入可以為空白21 widget=forms.Textarea(attrs={‘class‘:"form-control",22 ‘placeholder‘:u"備忘"}))
4、自訂Form中的select
1 class UserInfo(forms.Form): 2 3 4 user_type_choice = ( 5 (0, u‘普通使用者‘), 6 (1, u‘進階使用者‘), 7 ) 8 user_type = forms.IntegerField(widget=forms.widgets.Select(choices=user_type_choice, 9 attrs={‘class‘: "form-control"}))10 11 email = forms.EmailField(error_messages={‘required‘: u‘郵箱不可為空‘},)12 host = forms.CharField(error_messages={‘required‘: u‘主機不可為空‘},)13 port = forms.CharField(error_messages={‘required‘: u‘連接埠不可為空‘},)14 mobile = forms.CharField(validators=[mobile_validate, ],15 error_messages={‘required‘: u‘手機不可為空‘},16 widget=forms.TextInput(attrs={‘class‘: "form-control",17 ‘placeholder‘: u‘手機號碼‘}),)18 19 memo = forms.CharField(required=False, #預設輸入可以為空白20 widget=forms.Textarea(attrs={‘class‘:"form-control",21 ‘placeholder‘:u"備忘"}))
5、自訂錯誤資訊的樣式
1、Form錯誤資訊：
如果不做任何處理，錯誤資訊的顯示會有一個預設<ul>的樣式，我們可以把它去掉，在錯誤資訊的後面添加 as_data(),顯示原始的資料。
僅這樣做還不夠，還需要在前端頁面標籤中取出錯誤資訊。但範本語言不支援索引的取值方式，所以這裡還需要與python的結合
在app的目錄下建立一個templatetags目錄，然後建立一個py檔案，取名為form_tag.py
1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 4 from django import template 5 6 register = template.Library() 7 8 @register.simple_tag 9 def error_message(arg):10 if arg:11 return arg[0][0]12 else:13 return ‘‘
然後再前端頁面匯入form_tag，並使用
1 {% load form_tag %} 匯入py檔案 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 </head> 8 <body> 9 10 <form action="/app01/user_list/" method="post">11 <p>使用者類型：{{ obj.user_type }} <span>{{ errors.user_type }}</span></p>12 <p>主機：{{ obj.host }} <span style="color: red;">{% error_message errors.host %} </span></p> 書寫方式有所改變13 <p>連接埠：：{{ obj.port }} <span>{{ errors.port }}</span></p>14 <p>郵箱：：{{ obj.email }} <span>{{ errors.email }}</span></p>15 <p>手機：{{ obj.mobile }} <span>{{ errors.mobile }}</span></p>16 <p>備忘：{{ obj.memo }} <span>{{ errors.memo }}</span></p>17 <input type="submit" value="submit">18 19 </form>20 21 </body>22 </html>
2、Ajax錯誤資訊：
html檔案：定義ajax
1 {% load staticfiles %} 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 </head> 8 <body> 9 10 <form action="/login/" method="post">11 <p>{{ obj.username }}</p>12 <p>{{ obj.password }}</p>13 <input type="submit" value="submit">14 <input type="button" onclick="Ajax();" value="Ajax">15 </form>16 17 {#<script type="text/javascript" src="{{ STATIC_URL }}/js/jquery-2.1.4.min.js">#}18 <script type="text/javascript" src="{% static "js/jquery-2.1.4.min.js" %}"></script>19 <script>20 function Ajax(){21 $.ajax({22 url:‘/login/‘,23 type:‘POST‘,24 data:{‘username‘:‘‘,‘password‘:‘‘},25 success:function(arg){26 console.log(arg);27 }28 })29 }30 </script>31 </body>32 </html>
幕後處理：
返回資料時，要用HttpResponse
1 def login(request): 2 3 obj = Account_Forms.UserInfo(request.POST) 4 if request.method == ‘POST‘: 5 if obj.is_valid(): 6 data = obj.clean() 7 print data 8 9 else:10 error_msg = obj.errors.as_json()11 return HttpResponse(error_msg) #用HttpResponse的方式返回資料12 return render(request, ‘account/login.html‘, {‘obj‘: obj})13 return render(request, ‘account/login.html‘, {‘obj‘: obj})
轉 Django中的Form
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
