WTForms
安裝
$ pip install flask-wtf
導入
from flask_wtf import FlaskForm
編寫校驗器
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField
from wtforms.validators import Regexp, DataRequired, Length, EqualTo
class RegisterForm(FlaskForm):
phone = StringField(
label='手機號碼',
validators=[Regexp(r'^1[3,5,7,8,9]\d{9}$', message='手機號碼格式錯誤'),
DataRequired('手機號碼不能爲空')]
)
pwd = PasswordField(
label='密碼',
validators=[Length(6, 32, message='密碼長度不對'),
DataRequired('密碼不能爲空')]
)
confirm_pwd = PasswordField(
label='確認密碼',
validators=[EqualTo('pwd')]
)
測試
import os
from flask import Flask, request, render_template
from helpers.forms import RegisterForm
app = Flask(__name__)
app.config['SECRET_KEY'] = os.urandom(24)
@app.route('/')
def hello_world():
return 'Hello World!'
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'GET':
return render_template('register.html')
form = RegisterForm(request.form)
if form.validate():
return "Success"
return f'Error:{form.errors}'
if __name__ == '__main__':
app.run()
使用form.validate()來驗證傳入的數據是否符合要求
CSRF
解決CSRF問題
html的form中添加
<form action="{{ url_for('register') }}" method="post">
{{ form.hidden_tag() }}
<label>手機號碼:</label><input name="phone">
<label>密碼:</label><input name="pwd" type="password">
<label>確認密碼:</label><input name="confirm_pwd" type="password">
<input type="submit">
</form>
{{ form.hidden_tag() }}的作用
register將form傳遞
@app.route('/register', methods=['GET', 'POST'])
def register():
form = RegisterForm(request.form)
if request.method == 'GET':
return render_template('register.html',form=form)
if form.validate():
return "Success"
return f'Error:{form.errors}'
通過調試模式，可以看到form中的內容。
form.data可以獲取到前端獲取到的全部數據
優化頁面
添加一個下拉框
表單驗證中添加
job = SelectField(label='Job',
choices=[('teacher', 'Teacher'),
('doctor', 'Doctor'),
('engineer', 'Engineer')]
)
html重寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>註冊</title>
</head>
<body>
{{ msg }}
<form action="{{ url_for('register') }}" method="post">
{{ form.hidden_tag() }}
{{ form.phone.label() }} {{ form.phone() }}
{{ form.pwd.label() }} {{ form.pwd() }}
{{ form.confirm_pwd.label() }} {{ form.confirm_pwd() }}
{{ form.job.label() }}{{ form.job() }}
<input type="submit">
</form>
</body>
</html>
