今兒繼續做項目,學習了Django的forms生成前端的代碼。
forms.py
class SignupForm(forms.Form):
username = forms.CharField(validators=[user_unique_validate, username_rule_validate, ], required=True,
max_length=30, min_length=5,
error_messages={'required': '用戶名不能爲空', 'max_length': '用戶名至少5位',
'min_length': '用戶名最多30位'})
password = forms.CharField(min_length=6, max_length=50, required=True,
error_messages={'required': '密碼不能爲空',
'invalid': '密碼格式錯誤',
'min_length': '密碼不能少於6位',
'max_length': '密碼最多50位'})
classInfo = forms.ModelChoiceField(queryset=ClassInfo.objects.all(), required=True, empty_label=None, initial="預設值")#這裏加的是班級名字
email = forms.EmailField(validators=[email_unique_validate, ], required=True,
error_messages={'required': '郵箱不能爲空', 'invalid': '郵箱格式錯誤'})
mobile = forms.CharField(validators=[mobile_validate, ], required=True,
error_messages={'required': '手機號不能爲空'})
然後views通過get方法獲得表單的form
class SignupView(View):
def get(self, request):
obj = SignupForm()
return render(request, 'user/signup.html', locals())
這裏可以打印出來obj,可以看到表單類已經幫我們生成了前端代碼
<tr><th><label for="id_username">Username:</label></th><td><input type="text" name="username" value="123123" minlength="5" maxlength="30" required id="id_username"></td></tr>
<tr><th><label for="id_password">Password:</label></th><td><input type="text" name="password" value="213123" minlength="6" maxlength="50" required id="id_password"></td></tr>
<tr><th><label for="id_classInfo">Classinfo:</label></th><td>
<select name="classInfo" id="id_classInfo">
<option value="1" selected>15醫藥軟件</option>
<option value="2">15醫藥信息</option>
</select></td></tr>
<tr><th><label for="id_email">Email:</label></th><td><input type="email" name="email" value="[email protected]" required id="id_email"></td></tr>
<tr><th><label for="id_mobile">Mobile:</label></th><td><input type="text" name="mobile" value="13328768123" required id="id_mobile"></td></tr>
其中select下拉框裏的內容是從數據庫中取出來的,利用ModelChoiceField,設置queryset來取出數據,這樣實現動態存取select中的值。
而前端代碼可以直接使用這個表單變量obj
<form method="post" action="{% url 'signup' %}">
...
{% for field in obj %}
{{ field }}
{% end for %}
...
</form>
但是我這裏沒有設置label值,就沒有直接這樣偷懶,而是自己寫了一個
<form method="post" action="{% url 'signup' %}>
....
<tr>
<td width="120" align="right" valign="top">用戶名(學號)</td>
<td width="auto" align="left"><input type="text" name="username" class="sls"> </td>
</tr>
<tr>
<td width="120" align="right">密碼</td>
<td width="auto" align="left"><input type="password" name="password" class="sls"></td>
</tr>
<tr>
<td width="120" align="right" valign="top">電子郵件</td>
<td width="auto" align="left"><input type="text" name="email" class="sls"></td>
</tr>
<tr>
<td width="120" align="right">班級</td>
<td width="auto" align="left">
{{ obj.classInfo }}
</td>
</tr>
<tr>
<td width="120" align="right" valign="top">手機號</td>
<td width="auto" align="left"><input type="text" class="sls" name="mobile"></td>
</tr>
....
前期我一直在用select標籤來寫,然後傳值到option裏,但是我發現通過再用obj.classInfo取裏面的值時出現空白值
就類似於原本數據庫存着兩個選項,然後前端顯示-------;選項一;空白;選項二;空白。
經過一番查找,出現-----這個選項是因爲沒有設置初始值,然後設置了initial
出現兩個變量就是因爲粗心大意,obj.classInfo本身就是個select標籤,裏面就有兩個選項。
之後就是post提交驗證,然後就是存值render操作了
def post(self, request):
has_error = True
obj = SignupForm(request.POST)
#print(obj)
if obj.is_valid():
has_error = False
username = obj.cleaned_data['username']
password = obj.cleaned_data['password']
class_name = obj.cleaned_data['classInfo']
email = obj.cleaned_data['email']
mobile = obj.cleaned_data['mobile']
......