flask入門3-表單

flask 表單

一、原生表單

form.html

{% 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

@app.route('/form/')
def form():
    return render_template('form1.html')

#接收表單的數據
@app.route('/check/',methods=['POST'])
def check():
    print(request.form)
    return '提交過來了'

將倆個路由地址合併爲同一個

@app.route('/form/',methods=['GET','POST'])
def form():
    if request.method == 'POST':
        print(request.form)
    return render_template('form1.html')

二、使用flask-wtf表單擴展庫

作用： 是一個用於表單處理的擴展庫 提供表單的校驗 csrf的功能

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地址
Email	郵箱
URL	地址
Regexp	正則匹配
EqualTo	驗證倆個字段值的正確性
NumberRange	輸入值的範圍 min max

實例

在manage中

from flask import Flask,render_template,request
from flask_script import Manager
from flask_bootstrap import Bootstrap
#導入自定義表單類的基類
from flask_wtf import FlaskForm
#導入表單的字段
from wtforms import StringField,PasswordField,SubmitField
#導入驗證器
from wtforms.validators import Length,DataRequired


app = 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)

在模板中

{% 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渲染表單

{% 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 %}

自定義表單驗證器

class Login(FlaskForm):
    ...
    def validate_username(self,field):
        # print(field)
        if field.data == 'zhangsan':
        # if self.username.data == 'zhangsan':
            raise ValidationError('該用戶已存在')

注意：

validate_ 驗證的字段名稱 爲固定格式

所有字段和驗證器方法的使用

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

from flask import flash,get_flashed_messages

class 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)

使用

{% for message in get_flashed_messages() %}
    <div class="alert alert-danger" role="alert">{{ message }}</div>
{% endfor %}

flask入門4-文件上傳與郵件發送