一、安装Flask-WTF
pip install Flask-WTF
二、.py 定义form
from flask import Flask, render_template, flash, request, url_for, redirect
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, EqualTo
app = Flask(__name__)
#secret_key
app.secret_key = '7d441f27d441f27567d441f2b6176a'
# define forms
# class Login inherit FlaskForm
class Login(FlaskForm):
username = StringField('username', validators=[DataRequired()])
password = PasswordField('password', validators=[DataRequired()])
password2 = PasswordField('repeat password', validators=[
DataRequired(), EqualTo('password', 'password is not the same')])
submit = SubmitField('Submit')
# define register route
@app.route('/register', methods=['GET', 'POST'])
def register():
# define Login instance
login_form = Login()
if request.method == 'POST':
vals = request.form
username = vals.get('username')
password = vals.get('password')
password2 = vals.get('password2')
if login_form.validate_on_submit():
return render_template('index.html', username=username)
else:
return render_template('register.html', form=login_form)
else:
return render_template('register.html', form=login_form)
- csrf_token
you can click https://flask-wtf.readthedocs.io/en/stable/csrf.html to learn more about it.
in the template .html file:
<form
id="basic"
method="post"
class="ant-form ant-form-horizontal"
style="margin:100px"
>
{{form.csrf_token()}}
...
in the form's instance, it is rendered:
<input id="csrf_token" name="csrf_token" type="hidden" value="IjIwNmI4ZGI3ZTZiNDE1NTBlODBlYjI3NDIxMDk1YWVjNDcyODRhNDUi.XlvLWg.MsejD4sTrR6V7pO7QPMBvmaYXOs">
二、template文件引入form
<form
id="basic"
method="post"
class="ant-form ant-form-horizontal"
style="margin:100px"
>
{{form.csrf_token()}}
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-8 ant-form-item-label">
<label
for="basic_username"
class="ant-form-item-required"
title="Username"
>{{form.username.label}}</label
>
</div>
<div class="ant-col ant-col-16 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
{{form.username(class_="ant-input")}}
</div>
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-8 ant-form-item-label">
<label
for="basic_password"
class="ant-form-item-required"
title="Password"
>{{form.password.label}}</label
>
</div>
<div class="ant-col ant-col-16 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<span class="ant-input-password ant-input-affix-wrapper"
>
{{form.password(class_="ant-input")}}
</div>
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-8 ant-form-item-label">
<label
for="basic_password"
class="ant-form-item-required"
title="Password"
>{{form.password2.label}}</label
>
</div>
<div class="ant-col ant-col-16 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<span class="ant-input-password ant-input-affix-wrapper"
>
{{form.password2(class_="ant-input")}}
</div>
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
><span class="ant-checkbox ant-checkbox-checked"
><input
id="basic_remember"
type="checkbox"
class="ant-checkbox-input"
value=""
checked=""/><span class="ant-checkbox-inner"></span></span
><span>Remember me</span></label
>
<label>
{% for field, errors in form.errors.items() %}
<span class="ant-tag ant-tag-has-color" style="background-color: rgb(255, 85, 0);">{{ form[field].label }}: {{ ', '.join(errors) }}</span>
{% endfor %}
</label>
</div>
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
{{form.submit(class_="ant-btn ant-btn-primary")}}
</div>
</div>
</div>
</div>
</form>
- attention input and add class
{{form.submit(class_="ant-btn ant-btn-primary")}
- get label name
{{form.password.label}}
二、class+ instance + values of instance + form errors
-
class
# define forms
class Login(FlaskForm):
username = StringField('username', validators=[DataRequired()])
password = PasswordField('password', validators=[DataRequired()])
password2 = PasswordField('repeat password', validators=[
DataRequired(), EqualTo('password', 'password is not the same')])
submit = SubmitField('Submit')
-
instance
login_form = Login()
-
values of instance
for val in login_form:
print(val)
print(val)'s content is:
<input id="username" name="username" required type="text" value="1">
<input id="password" name="password" required type="password" value="">
<input id="password2" name="password2" required type="password" value="">
<input id="submit" name="submit" type="submit" value="Submit">
<input id="csrf_token" name="csrf_token" type="hidden" value="IjIwNmI4ZGI3ZTZiNDE1NTBlODBlYjI3NDIxMDk1YWVjNDcyODRhNDUi.XlvLWg.MsejD4sTrR6V7pO7QPMBvmaYXOs">
-
form errors
<label>
{% for field, errors in form.errors.items() %}
{{ form[field].label }}: {{ ', '.join(errors) }}
{% endfor %}
</label>
error message
网友评论