一、原生表单
form.html
|
1
2
3
4
5
6
7
8
9
10
11
12
|
{% extends 'common/base.html' %}{% block title %} 原生表单{% endblock %}{% block pagecontent %}{# <form action="{{ url_for('check') }}" method="post">#} <form action="{{ url_for('form') }}" method="post"> <p>用户名: <input type="text" name="username" placeholder="请输入用户名" maxlength="12"></p> <p>密码： <input type="password" name="userpass" placeholder="请输入密码..."></p> <p><input type="submit" value="提交"></p> </form>{% endblock %} |
manage.py
|
1
2
3
4
5
6
7
8
9
|
@app.route('/form/')def form(): return render_template('form1.html')#接收表单的数据@app.route('/check/',methods=['POST'])def check(): print(request.form) return '提交过来了' |
将俩个路由地址合并为同一个
|
1
2
3
4
5
|
@app.route('/form/',methods=['GET','POST'])def form(): if request.method == 'POST': print(request.form) return render_template('form1.html') |
二、使用flask-wtf表单扩展库
作用： 是一个用于表单处理的扩展库 提供表单的校验 csrf的功能
|
1
|
pip install flask-wtf |
使用
(1) 字段类型
| 字段名称 | 字段类型 |
|---|---|
| StringField | 普通文本字段 |
| PasswordField | 密码框 |
| SubmitField | 提交按钮 |
| TextAreaField | 多行文本域 |
| HiddenField | 隐藏域 |
| DateField | 日期 |
| DateTimeField | 日期时间 |
| IntegerField | 整形 |
| FloatFIeld | 浮点型 |
| RadioField | 单选字段 |
| SelectField | 下拉 |
| FileField | 文件上传字段 |
| BooleanField | 布尔字段 |
(2) 验证器
| 验证器 | 说明 |
|---|---|
| DataRequired | 必填 |
| Length | 长度 min max |
| IPAddress | IP地址 |
| 邮箱 | |
| URL | 地址 |
| Regexp | 正则匹配 |
| EqualTo | 验证俩个字段值的正确性 |
| NumberRange | 输入值的范围 min max |
实例
在manage中
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
from flask import Flask,render_template,requestfrom flask_script import Managerfrom flask_bootstrap import Bootstrap#导入自定义表单类的基类from flask_wtf import FlaskForm#导入表单的字段from wtforms import StringField,PasswordField,SubmitField#导入验证器from wtforms.validators import Length,DataRequiredapp = Flask(__name__)bootstrap = Bootstrap(app)#加密种子 csrf需要使用app.config['SECRET_KEY'] = 'abcdedff'manager = Manager(app)class Login(FlaskForm): username = StringField('用户名',validators=[Length(min=6,max=12,message='用户名的长度为6~12为'),DataRequired(message='用户名不能为空!!!')]) userpass = PasswordField('密码',validators=[Length(min=6,max=12,message='用户名的长度为6~12为'),DataRequired(message='密码不能为空!!!')]) submit = SubmitField('登录')@app.route('/')def index(): return render_template('index.html')@app.route('/form/',methods=['GET','POST'])def form(): #将表单类实例化 form = Login() if request.method == 'POST': #验证是否存在正确的csrftoken和 数据的正确性 如果都正确则为真 if form.validate_on_submit(): # print(request.form) print(form.username.data) return render_template('form2.html',form=form)from flask import Flask,render_template,requestfrom flask_script import Managerfrom flask_bootstrap import Bootstrap#导入自定义表单类的基类from flask_wtf import FlaskForm#导入表单的字段from wtforms import StringField,PasswordField,SubmitField#导入验证器from wtforms.validators import Length,DataRequiredapp = Flask(__name__)bootstrap = Bootstrap(app)#加密种子 csrf需要使用app.config['SECRET_KEY'] = 'abcdedff'manager = Manager(app)class Login(FlaskForm): username = StringField('用户名',validators=[Length(min=6,max=12,message='用户名的长度为6~12为'),DataRequired(message='用户名不能为空!!!')]) userpass = PasswordField('密码',validators=[Length(min=6,max=12,message='用户名的长度为6~12为'),DataRequired(message='密码不能为空!!!')]) submit = SubmitField('登录')@app.route('/')def index(): return render_template('index.html')@app.route('/form/',methods=['GET','POST'])def form(): #将表单类实例化 form = Login() if request.method == 'POST': #验证是否存在正确的csrftoken和 数据的正确性 如果都正确则为真 if form.validate_on_submit(): # print(request.form) print(form.username.data) return render_template('form2.html',form=form) |
在模板中
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
{% extends 'common/base.html' %}{% block title %} 原生表单{% endblock %}{% block pagecontent %} <form action="{{ url_for('form') }}" method="post"> <p>{{ form.csrf_token }}</p> <p>{{ form.username.label() }} {{ form.username(style='color:red;',class='userclass',placeholder='请输入用户名') }} {% if form.errors%} <span style="color:red;">{{ form.errors.username.0 }}</span> {% endif %} </p> <p>{{ form.userpass.label() }} {{ form.userpass() }}</p> <p>{{ form.submit() }}</p> </form>{% endblock %} |
使用 bootstrap渲染表单
|
1
2
3
4
5
6
7
8
|
{% import 'bootstrap/wtf.html' as wtf %}{% block pagecontent %} <div class="row"> <div class="col-md-8">图片</div> <div class="col-md-4">{{ wtf.quick_form(form,action="",method="") }} </div> </div>{% endblock %} |
自定义表单验证器
|
1
2
3
4
5
6
7
|
class Login(FlaskForm): ... def validate_username(self,field): # print(field) if field.data == 'zhangsan': # if self.username.data == 'zhangsan': raise ValidationError('该用户已存在') |
注意：
validate_ 验证的字段名称 为固定格式
所有字段和验证器方法的使用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
class Login(FlaskForm): username = StringField('用户名',validators=[Length(min=6,max=12,message='用户名的长度为6~12为'),DataRequired(message='用户名不能为空!!!')]) userpass = PasswordField('密码',validators=[Length(min=6,max=12,message='用户名的长度为6~12为'),DataRequired(message='密码不能为空!!!'),EqualTo('confirm',message='俩次密码输入不一致')]) confirm = PasswordField('确认密码') info = TextAreaField('个人简介',validators=[Length(min=6,max=20,message='内容为6-20个长度'),DataRequired(message='内容不能为空')],render_kw={"style":"resize:none;",'placeholder':"请输入你此刻的感谢..."}) hidde = HiddenField() birth = DateField('出生日期') birth = DateTimeField('出生日期') age = IntegerField('年龄',validators=[NumberRange(min=6,max=99,message='年龄为6~99岁')]) money = FloatField() sex = RadioField(choices=[('w','女'),('m','男')]) address = SelectField(choices=[('1001','北京'),('1002','上海'),('1003','天津')]) file = FileField('文件上传') argee = BooleanField('请仔细阅读以上条款') ip = StringField('IPV4',validators=[IPAddress(message='请输入正确的ip地址')]) url = StringField('url地址',validators=[URL(message='输入正确的url地址')]) email = StringField('email',validators=[Email(message='请输入正确的邮箱地址')]) preg = StringField('手机号码',validators=[Regexp('^[1][3-8][0-9]{9}$',flags=re.I,message='请输入正确的手机号码')]) submit = SubmitField('登录') |
三、flash 消息的显示
概述： 当用户请求 或者有消息的显示 通过flash,get_flashed_messages 来进行操作
导入
from flask import flash,get_flashed_messages
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
from flask import flash,get_flashed_messagesclass Login(FlaskForm): username = StringField('用户名',validators=[DataRequired(message='用户名不能为空')]) userpass = PasswordField('密码',validators=[DataRequired(message='密码不能为空')]) submit = SubmitField('登录')@app.route('/form/',methods=['GET','POST'])def form(): form = Login() if form.validate_on_submit(): if form.username.data == 'zhangsan' and form.userpass.data == '123456': flash('登录成功') return redirect(url_for('index')) else: flash('当前用户不存在') return render_template('user/login.html',form=form) |
使用
|
1
2
3
|
{% for message in get_flashed_messages() %} <div class="alert alert-danger" role="alert">{{ message }}</div>{% endfor %} |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://segmentfault.com/a/1190000015228524
