flask表单的实现

目录

表单：

flask-WTF表单介绍

表单常用字段类型及渲染

通过表单存储数据 

表单验证

图片上传

---

表单：

       什么是表单呢？输入框，密码框，文本域 下拉菜单，单选，多选，这些都叫表单。

常见的表单元素：

表单标签   <form>

        action -- 表单提交的URL地址

        method -- 表单请求方式（GET,POST）

        enctype -- 请求内容的形式 

                         POST普通表单提交 ：application/x-www-form-urlencoded     

                         大型文件的时候提交：multipart/form-data 

单行文本框/多行文本框

textarea	多行文本
text	单行文本
password	密码
email	邮箱
url	URL

选择框（单选/多选/下拉选择）

radio	单选框
checkbox	多选框
<select><option></option></select>	下拉选择

隐藏表单域

<input type = 'hidden'>

按钮

<input type = 'botton'>  或  <botton> </botton>

文件上传框

<input type = 'file'>

 在视图中获取表单值：

GET请求：request.args.get('name','None')

POST请求：request.form.get('name','None')

flask-WTF表单介绍

集成 wtforms

CSRF保护

与Flask-Uploads 一起支持文件上传

安装：

pip安装： pip install flask-WTF

源码安装： python setup.py install

配置（CSRF保护）

WTF_CSRF_SECRET_KEY='a random string'  (后面这随意写 )

app.config['WTF_CSRF_SECRET_KEY']='a random string'

表单常用字段类型及渲染

                        

文本/字符串
StringField	字符串输入
PasswordField	密码输入
TextAreaField	长文本框输入
HiddenField	隐藏表单域
数值（整数，小数）
FloatField	浮点数输入
IntegerField	整数输入
DecimalField	小数输入（更精确）
选择
RadioField	radio单选
SelectField	下拉单选
SelectMultipleField	下拉多选
BooleanField	勾选（复选框）

 

日期
DateField	日期选择
DateTimeField	日期时间选择

 

文件/文件上传
Field	文件单选
MultipleFileField	文件多选

其他
SubmitField	提交按钮
FieldList	自定义的表单选择列表（如：选择用户对象）
FormField	自定义多个字段构成的选项

label	label标签（如：输入框前的文字描述）
default	表单的默认值
validators	表单验证规则
widget	定制界面显示方式（如：文本框/选择框）
description	帮助文字

 使用模板语法渲染表单内容：

表单输入区域：{{form.username}}

表单tabel: {{form.username.label.text}}

通过表单存储数据 

第一步：检测表单是否已经通过验证（用户在提交表单的情况下会触发）

        form.validate_on_submit()   通过即返回True

第二步：获取表单中传递过来的值：

        form.field_name.data

第三步：业务逻辑的书写（可结合ORM）

CSRF表单保护：

默认开启CSRF保护

关闭单个CSRF保护： form = LoginForm(csrf_enabled=Flase)

全局关闭（不推荐）

WTF_CSRF_ENABLED=Flase、

同步请求CSRF保护：

模板中添加csrf_token:

        {{form.csrf_token}}或

       <input type ='hidden' name='csrf-token' value='{{ csrf-token()}}'>

当出现这个错误的时候，添加了csrf_enabled=False，然后直接在模板中添加 {{form.csrf_token}}  这句代码就可以了，他其实就是触发了csrf的保护机制而已。

表单验证

1.导入内置的表单验证器（或自定义）：

from wtfforms.validators import DateRequiired

2.配置到表单字段

username = StringField('用户名',validators =[InputRequired(),my_validator])

DateRequired/InputRequired  必填

Email/URL/UUID--电子邮箱/URL/UUID

Length(min=-1,max=-1,message=None 长度范围验证

EquaITo(fieldname,mesage=None)

必传参数/密码：

 password = PasswordField(label='密码', validators=[DataRequired('请输入密码')])

图片上传

不使用WTF上传：

首先设置<form>的enctype  

encype = 'multipart/form-data'

(application/x-www-form-urlencoded不是不能上传文件，是只能上传文本格式的文件，multipart/form-data是将文件以二进制的形式上传，这样可以实现多种类型的文件上传。)

第二步：在视图函数中获取文件对象  request.files

第三步：保存文件 : f.save()

使用FileField并添加类型验证：

文件名称格式化：werkzeug.utils.secure_filename

secure_filename()函数将会对传入的文件路径进行处理，将其中的路径符号“/”用下划线代替，防止被黑客恶意攻击

@app.route('/avator', methods=['GET', 'POST'])
def avator_uploads():
    """图片上传"""
    form = UserAvatarForm()  # 获取form
    if form.validate_on_submit():  # 进行表单是否通过验证
        img = form.avatar.data  # 获取图片对象
        f_name = secure_filename(img.filename)  # 获取图片名称
        file_path = os.path.join(app.config['UPLOAD_PATH'], f_name)  #保存的路径
        img.save(file_path)
        return redirect(url_for('page_form'))

    else:
        print(form.errors)
    return render_template('avator.html', form=form)

图片上传：验证：

FileRequired	文件必须上传验证
FileAllowed	文件类型验证

from flask_wtf.file import FileRequired, FileAllowed


class UserAvatarForm(FlaskForm):
    """图片上传"""
    avatar = FileField(label='上传头像', validators=[
        FileRequired(''),
        FileAllowed(['jpg'], '仅支持JPG文件格式上传')
    ])