文章目录

• Flask表单简介
• 一个简单的表单
• • 表单文件
  • • 常见的表单域类型
    • 常见验证规则
  • 视图函数文件
  • • 验证数据
    • 自定义验证
    • 获取数据
  • 前端文件
• Flask-WTF表单处理实际应用案例：

Flask表单简介

Form表单，在Web应用中无处不在。比如：用户登录表单，用户注册表单。

• 所有的表单都有共性，比如有文字输入框，单选框，密码输入框等；
• 表单的验证也有共性，比如有非空验证，长度限制，类型验证等。

如果有个框架能够将这些共性抽象出来，那就能大量简化我们的工作。Python的WTForms就提供了这些功能。这里我们就结合Flask的WTForms扩展。Flask-WTF，来介绍如何在Web应用中制作表单。

安装和启用:

pip install Flask-WTF

一个简单的表单

表单文件

WTForms让我们在后端代码中定义表单类，并列出表单的字段和相应的验证规则。下面是定义的一个MyForm类：

from flask_wtf import Form
from wtforms import StringField
from wtforms.validators import DataRequired
class LoginForm(FlaskForm):email = StringField(u'邮箱', validators=[DataRequired(message= u'邮箱不能为空'), Length(1, 64),Email(message= u'请输入有效的邮箱地址,比如:username@domain.com')])password = PasswordField(u'密码',validators=[Required(message= u'密码不能为空')])submit = SubmitField(u'登录')

常见的表单域类型

常见验证规则

视图函数文件

@app.route('/login/', methods=['GET', 'POST'])
def login():form = LoginForm()if form.validate_on_submit():email = form.email.data...return render_template('login.html', form=form)

验证数据

点击了表单上的提交按钮时，form.validate_on_submit()判断会做下面两件事情：

• 通过is_submitted()判断是否以POST方法提交了表单
• 通过WTForms提供的validate()来验证表单数据是否通过验证。
• 当validate()验证未通过时，会在表单字段下面显示我们传进去的错误提示（例如：message=‘密码不能为空’）

自定义验证

也可以在表单类中创建自定义的验证函数，举个简单的例子;
自定义函数以validate_ + “要验证的属性名称”，比如要验证username，我们的自定义验证函数应为：validate_username

def validate_username(self, field):# field.data是用户输入的数据。if field.data == 'admin':# ValidationError从wtforms导入,用来向用户显示错误信息,# 验证函数的名称由validate_fieldname组成。raise ValidationError('超级管理员已被注册,换一个吧。')

我们也可以在这里对用户数据进行预处理：
如果网址不是http开头，就转为http网址：

# 这个函数对用户输入的网址进行处理(字段名为website)。
def validate_website(self, field):if field.data[:4] != "http":field.data = "http://" + field.data

获取数据

验证通过之后：

• 使用form.email.data来获得数据，

form.email.data

• WTForms提供的静态方法.data返回一个以字段名(field name)和字段值（field value）作为键值对的字典：

form.data[‘email’]

前端文件

• form.hidden_tag()会生成一个隐藏的标签，其中会渲染任何隐藏的字段，最主要的是CSRF字段。
• CSRF（Cross-Site Request Forgery跨站请求伪造）是一种通过伪装来自受信任用户的请求，来发送恶意攻击的方法，WTForms默认开启CSRF保护。

<form method="POST" action="/login/">{{ form.hidden_tag() }}{{ form.user.label }}: {{ form.user(size=20) }}<input type="submit" value="Submit">
</form>

Flask-WTF表单处理实际应用案例：

主程序app.py

from flask import Flask, render_template, flashfrom forms import LoginForm,RegisterForm
from flask_bootstrap import Bootstrapapp = Flask(__name__)
# 设置配置
app.config.from_pyfile('config.py')
# 实例化bootstrap对象
bootstrap = Bootstrap(app)@app.route('/login/',methods=['GET','POST'])
def login():# 实例化表单对象form = LoginForm()# 1). 判断是否为post方法提交数据# 2). 是否通过验证函数if form.validate_on_submit():# 获取表单数据(内容)email = form.email.datapassword = form.password.dataif email == 'westos@qq.com' and password == 'westos':flash("登录成功")return '登录成功'else:# flash('登录失败')# return render_template('login.html')return '登录失败'else:# 将form表单传递给html,按照表单的规则进行验证return render_template('bs_login.html',form=form)@app.route('/register/',methods=['GET','POST'])
def register():form = RegisterForm()if form.validate_on_submit():return '获取性别%s' %(form.gender.data)else:return render_template('register.html',form=form)
# def register():
#         return '注册'@app.route('/')
def index():return 'hello'if __name__ == '__main__':app.run()

配置文件config.py

SECRET_KEY = 'WESTOS'

表单文件forms.py

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, SelectMultipleField, SelectField, RadioField
from wtforms.validators import DataRequired, Email, Length, EqualTo, Regexp, ValidationErrorclass LoginForm(FlaskForm):email = StringField(label='电子邮箱',validators=[DataRequired(message='邮箱不能为空'),Length(1,15, message='长度不符合条件'),Email(message='请输入有效的邮箱地址,比如username@domain.com')])password = PasswordField(label='密码',validators=[DataRequired(message='密码不能为空')])submit = SubmitField('登录')class RegisterForm(FlaskForm):name = StringField(label='用户名',validators=[DataRequired(message='用户名不能为空'),Length(5,12,message='用户名长度必须在5-12之间')])password = PasswordField(label='密码',validators=[DataRequired(),Length(6,16,message='密码格式不正确')])repassword = PasswordField(label='确认密码',validators=[DataRequired(),# 验证当前表单输入密码和password表单输入密码是否一致,如果不一致,报错EqualTo('password',message='密码不一致')])email = StringField(label='邮箱',validators=[DataRequired(),Email(message='邮箱格式错误')])phone = StringField(label='电话号码',validators=[DataRequired(),Regexp(r'1\d{10}',message='电话号码格式错误')])# 下拉单选框gender = SelectField(label='性别',# 填写的信息传入后台的类型coerce=int,# 下拉列表的选项choices=[(1,'男'),(2,'女')])# # 下拉多选框tech = SelectMultipleField(label='擅长领域',coerce=int,choices=[(1,'python'),(2,'linux'),(3,'php'),(4,'java')])def validate_name(self,field):# field.data是用户输入的数据if field.data == 'admin':# ValidationError用来向用户显示错误信息# 验证的函数的名称由validate_fieldname组成raise ValidationError('超级管理员已经被注册,换一个吧')submit = SubmitField(label='注册')

login页面：login.html
通过form表单格式编写页面，代码简洁明了：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>{% for message in get_flashed_messages() %}
<p style="color: red">{{ message }}</p>
{% endfor %}<form action='/login/' method="POST">
{#    
#}
{#    
#}
{#    #}{#    显示报错信息#}{#    {{ form.email.errors }} #}{{ form.hidden_tag() }}{{ form.email.label }}{{ form.email()}}{{ form.email.errors }}{{ form.password.label }}{{ form.password() }}{{ form.password.errors }}{{ form.submit() }}
</form></body>
</html>

注册页面register.html
通过wtf.quick_form(form)快速实现页面：

{#导入bootstrap的基模板,自动加载css样式和js动效#}
{% extends "bootstrap/base.html" %}
{#导入html代码,并起别名#}
{% import "bootstrap/wtf.html" as wtf  %}{% block title %}注册
{% endblock %}{% block content %}<div style="width:70%; margin: 0 auto"><h1>用户注册</h1><hr/>
{#        传入表单对象#}{{ wtf.quick_form(form) }}</div>
{% endblock %}

详细代码可以：点击这里，包含css，js静态文档和其余html页面。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！