Web表單

web表單是web應用程序的基本功能。html

它是HTML頁面中負責數據採集的部件。表單有三個部分組成：表單標籤、表單域、表單按鈕。表單容許用戶輸入數據，負責HTML頁面數據採集，經過表單將用戶輸入的數據提交給服務器。python

在Flask中，爲了處理web表單，咱們通常使用Flask-WTF擴展，它封裝了WTForms，而且它有驗證表單數據的功能web

WTForms支持的HTML標準字段

字段對象	說明
StringField	文本字段
TextAreaField	多行文本字段
PasswordField	密碼文本字段
HiddenField	隱藏文件字段
DateField	文本字段，值爲 datetime.date 文本格式
DateTimeField	文本字段，值爲 datetime.datetime 文本格式
IntegerField	文本字段，值爲整數
DecimalField	文本字段，值爲decimal.Decimal
FloatField	文本字段，值爲浮點數
BooleanField	複選框，值爲True 和 False
RadioField	一組單選框
SelectField	下拉列表
SelectMutipleField	下拉列表，可選擇多個值
FileField	文件上傳字段
SubmitField	表單提交按鈕
FormField	把表單做爲字段嵌入另外一個表單
FieldList	一組指定類型的字段

WTForms經常使用驗證函數

驗證函數	說明
DataRequired	確保字段中有數據
EqualTo	比較兩個字段的值，經常使用於比較兩次密碼輸入
Length	驗證輸入的字符串長度
NumberRange	驗證輸入的值在數字範圍內
URL	驗證URL
AnyOf	驗證輸入值在可選列表中
NoneOf	驗證輸入值不在可選列表中

使用Flask-WTF須要配置參數SECRET_KEY。flask

CSRF_ENABLED是爲了CSRF（跨站請求僞造）保護。 SECRET_KEY用來生成加密令牌，當CSRF激活的時候，該設置會根據設置的密匙生成加密令牌。服務器

示例

使用普通方式實現表單

在HTML頁面中直接寫form表單：

<form method="post">
    <label>用戶名:</label><input type="text" name="username"><br>
    <label>密碼:</label><input type="password" name="password"><br>
    <label>確認密碼:</label><input type="password" name="password2"><br>
    <input type="submit" value="提交"><br>
    {% for message in get_flashed_messages() %}
        {{ message }}
    {% endfor %}
</form>

使用Flask-WTF實現表單

模板頁面：

<form method="post">
    {#設置csrf_token#}
    {{ form.csrf_token() }}
    {{ form.username.label }}{{ form.username }}<br>
    {{ form.password.label }}{{ form.password }}<br>
    {{ form.password2.label }}{{ form.password2 }}<br>
    {{ form.input }}<br>
</form>

完整版app.py 和index.html文件app

index.html函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form method="post">
    <label>用戶名:</label><input type="text" name="username"> <br>
    <label>密碼:</label><input type="password" name="password"> <br>
    <label>確認密碼:</label><input type="password" name="password2"> <br>
    <input type="submit" value="提交"> <br>

    使用遍歷獲取閃現消息
    {% for message in get_flashed_messages() %}
        {{ message }}
    {% endfor %}
</form>

<hr>

<form method="post">
    {{ form.csrf_token() }}
    {{ form.username.label }}{{ form.username }} <br>
    {{ form.password.label }}{{ form.password }} <br>
    {{ form.password2.label }}{{ form.password2 }} <br>
    {{ form.submit }} <br>
</form>

</body>
</html>

app.pypost

'''
目的：實現一個簡單的登錄的邏輯處理
1.路由須要有get和post兩種請求方式
2.獲取請求的參數
3.判斷參數是否填寫&密碼是否相同
4.若是判斷都沒有問題，返回success
'''

from flask import Flask, request, render_template, flash
from flask_wtf import FlaskForm
from wtforms import SubmitField, PasswordField, StringField
from wtforms.validators import DataRequired, EqualTo

# 建立實例
# 須要傳入__name__，目的是爲了肯定資源所在的路徑
app = Flask(__name__)
# 設置secret_key
app.secret_key = 'zxx'

'''
使用WTF實現表單
自定義表單類
'''
class LoginForm(FlaskForm):
	username = StringField('用戶名',validators=[DataRequired()])
	password = PasswordField('密碼',validators=[DataRequired()])
	password2 = PasswordField('確認密碼',validators=[DataRequired(),EqualTo('password','密碼不一致')])
	submit = SubmitField('提交')

@app.route('/form', methods=['GRT','POST'])
def login():
	login_form = LoginForm()

	# 1.判斷請求方式
	if request.method == 'POST':

		# 2. 獲取請求的參數
		username = request.form.get('username')
		password = request.form.get('password')
		password2 = request.form.get('password2')

		# 3.驗證參數
		if login_form.validate_on_submit():
			print(username,password)
			return 'success'
		else:
			flash('參數有誤')

	return render_template('index.html', form=login_form)


# 路由定義及視圖函數
# flask 定義路由是由裝飾器實現的，路由默認只支持GET請求
@app.route('/',methods=['GET','POST'])
def index():
	# request:請求對象-->獲取請求方式、數據
	# 1.判斷請求方式
	if request.method == 'POST':

		# 2.獲取請求的參數
		username = request.form.get('username')
		password = request.form.get('password')
		password2 = request.form.get('password2')
		# print(username)

		# 3.判斷參數是否完整 & 密碼是否相同
		if not all([username, password, password2]):
			# print('參數不完整')
			flash('參數不完整')
		elif password != password2:
			# print('密碼不一致')
			flash('密碼不一致')
		else:
			return 'success'
	return render_template('index.html')

if __name__ == '__main__':
	app.run(debug=True)

Flask學習筆記2：Web表單