Web表单
web表单是web应用程序的基本功能。
它是HTML页面中负责数据采集的部件。表单有三个部分组成:表单标签、表单域、表单按钮。表单允许用户输入数据,负责HTML页面数据采集,通过表单将用户输入的数据提交给服务器。
在Flask中,为了处理web表单,我们一般使用Flask-WTF扩展,它封装了WTForms,并且它有验证表单数据的功能
WTForms支持的HTML标准字段
字段对象 | 说明 |
---|---|
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 | 一组指定类型的字段 |
WTForms常用验证函数
验证函数 | 说明 |
---|---|
DataRequired | 确保字段中有数据 |
EqualTo | 比较两个字段的值,常用于比较两次密码输入 |
Length | 验证输入的字符串长度 |
NumberRange | 验证输入的值在数字范围内 |
URL | 验证URL |
AnyOf | 验证输入值在可选列表中 |
NoneOf | 验证输入值不在可选列表中 |
使用Flask-WTF需要配置参数SECRET_KEY。
CSRF_ENABLED是为了CSRF(跨站请求伪造)保护。 SECRET_KEY用来生成加密令牌,当CSRF激活的时候,该设置会根据设置的密匙生成加密令牌。
示例
使用普通方式实现表单
在HTML页面中直接写form表单:
<form method="post"> <label>用户名:</label><input type="text" name="username"><br> <label>密码:</label><input type="password" name="password"><br> <label>确认密码:</label><input type="password" name="password2"><br> <input type="submit" value="提交"><br> {% for message in get_flashed_messages() %} {{ message }} {% endfor %} </form>
使用Flask-WTF实现表单
模板页面:
<form method="post"> {#设置csrf_token#} {{ form.csrf_token() }} {{ form.username.label }}{{ form.username }}<br> {{ form.password.label }}{{ form.password }}<br> {{ form.password2.label }}{{ form.password2 }}<br> {{ form.input }}<br> </form>
完整版app.py 和index.html文件
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="post"> <label>用户名:</label><input type="text" name="username"> <br> <label>密码:</label><input type="password" name="password"> <br> <label>确认密码:</label><input type="password" name="password2"> <br> <input type="submit" value="提交"> <br> 使用遍历获取闪现消息 {% for message in get_flashed_messages() %} {{ message }} {% endfor %} </form> <hr> <form method="post"> {{ form.csrf_token() }} {{ form.username.label }}{{ form.username }} <br> {{ form.password.label }}{{ form.password }} <br> {{ form.password2.label }}{{ form.password2 }} <br> {{ form.submit }} <br> </form> </body> </html>
app.py
''' 目的:实现一个简单的登陆的逻辑处理 1.路由需要有get和post两种请求方式 2.获取请求的参数 3.判断参数是否填写&密码是否相同 4.如果判断都没有问题,返回success ''' from flask import Flask, request, render_template, flash from flask_wtf import FlaskForm from wtforms import SubmitField, PasswordField, StringField from wtforms.validators import DataRequired, EqualTo # 创建实例 # 需要传入__name__,目的是为了确定资源所在的路径 app = Flask(__name__) # 设置secret_key app.secret_key = 'zxx' ''' 使用WTF实现表单 自定义表单类 ''' class LoginForm(FlaskForm): username = StringField('用户名',validators=[DataRequired()]) password = PasswordField('密码',validators=[DataRequired()]) password2 = PasswordField('确认密码',validators=[DataRequired(),EqualTo('password','密码不一致')]) submit = SubmitField('提交') @app.route('/form', methods=['GRT','POST']) def login(): login_form = LoginForm() # 1.判断请求方式 if request.method == 'POST': # 2. 获取请求的参数 username = request.form.get('username') password = request.form.get('password') password2 = request.form.get('password2') # 3.验证参数 if login_form.validate_on_submit(): print(username,password) return 'success' else: flash('参数有误') return render_template('index.html', form=login_form) # 路由定义及视图函数 # flask 定义路由是由装饰器实现的,路由默认只支持GET请求 @app.route('/',methods=['GET','POST']) def index(): # request:请求对象-->获取请求方式、数据 # 1.判断请求方式 if request.method == 'POST': # 2.获取请求的参数 username = request.form.get('username') password = request.form.get('password') password2 = request.form.get('password2') # print(username) # 3.判断参数是否完整 & 密码是否相同 if not all([username, password, password2]): # print('参数不完整') flash('参数不完整') elif password != password2: # print('密码不一致') flash('密码不一致') else: return 'success' return render_template('index.html') if __name__ == '__main__': app.run(debug=True)