Web 表單是 Web 應用程序的基本功能。html
它是HTML頁面中負責數據採集的部件。表單有三個部分組成:表單標籤、表單域、表單按鈕。表單容許用戶輸入數據,負責HTML頁面數據採集,經過表單將用戶輸入的數據提交給服務器。前端
在Flask中,爲了處理web表單,咱們能夠使用 Flask-WTF 擴展,它封裝了 WTForms,而且它有驗證表單數據的功能python
字段對象 | 說明 |
---|---|
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 | 一組指定類型的字段 |
驗證函數 | 說明 |
---|---|
DataRequired | 確保字段中有數據 |
EqualTo | 比較兩個字段的值,經常使用於比較兩次密碼輸入 |
Length | 驗證輸入的字符串長度 |
NumberRange | 驗證輸入的值在數字範圍內 |
URL | 驗證URL |
AnyOf | 驗證輸入值在可選列表中 |
NoneOf | 驗證輸入值不在可選列表中 |
使用 Flask-WTF 須要配置參數 SECRET_KEY。web
CSRF_ENABLED是爲了CSRF(跨站請求僞造)保護。 SECRET_KEY用來生成加密令牌,當CSRF激活的時候,該設置會根據設置的密匙生成加密令牌。flask
login.html
,在其中直接寫form表單:<form method="post"> <label>用戶名:</label><input type="text" name="username" placeholder="請輸入用戶名"><br/> <label>密碼:</label><input type="password" name="password" placeholder="請輸入密碼"><br/> <label>確認密碼:</label><input type="password" name="password2" placeholder="請輸入確認密碼"><br/> <input type="submit" value="註冊"> </form> {% for message in get_flashed_messages() %} {{ message }} {% endfor %}
@app.route('/demo1', methods=["get", "post"]) def demo1(): if request.method == "POST": # 取到表單中提交上來的三個參數 username = request.form.get("username") password = request.form.get("password") password2 = request.form.get("password2") if not all([username, password, password2]): # 向前端界面彈出一條提示(閃現消息) flash("參數不足") elif password != password2: flash("兩次密碼不一致") else: # 僞裝作註冊操做 print(username, password, password2) return "success" return render_template('temp_register.html')
app.config['WTF_CSRF_ENABLED'] = False
CSRF:跨站請求僞造,後續會講到服務器
<form method="post"> {{ form.username.label }} {{ form.username }}<br/> {{ form.password.label }} {{ form.password }}<br/> {{ form.password2.label }} {{ form.password2 }}<br/> {{ form.submit }} </form>
from flask import Flask,render_template, flash #導入wtf擴展的表單類 from flask_wtf import FlaskForm #導入自定義表單須要的字段 from wtforms import SubmitField,StringField,PasswordField #導入wtf擴展提供的表單驗證器 from wtforms.validators import DataRequired,EqualTo app = Flask(__name__) app.config['SECRET_KEY']='SECRET_KEY' #自定義表單類,文本字段、密碼字段、提交按鈕 class RegisterForm(FlaskForm): username = StringField("用戶名:", validators=[DataRequired("請輸入用戶名")], render_kw={"placeholder": "請輸入用戶名"}) password = PasswordField("密碼:", validators=[DataRequired("請輸入密碼")]) password2 = PasswordField("確認密碼:", validators=[DataRequired("請輸入確認密碼"), EqualTo("password", "兩次密碼不一致")]) submit = SubmitField("註冊") #定義根路由視圖函數,生成表單對象,獲取表單數據,進行表單數據驗證 @app.route('/demo2', methods=["get", "post"]) def demo2(): register_form = RegisterForm() # 驗證表單 if register_form.validate_on_submit(): # 若是代碼能走到這個地方,那麼就代碼表單中全部的數據都能驗證成功 username = request.form.get("username") password = request.form.get("password") password2 = request.form.get("password2") # 僞裝作註冊操做 print(username, password, password2) return "success" else: if request.method == "POST": flash("參數有誤或者不完整") return render_template('temp_register.html', form=register_form) if __name__ == '__main__': app.run(debug=True)