flask入门之表单的实现


Posted in Python onJuly 18, 2018

一、原生表单

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python实现的简单文件传输服务器和客户端
Apr 08 Python
使用Python的Treq on Twisted来进行HTTP压力测试
Apr 16 Python
Python 'takes exactly 1 argument (2 given)' Python error
Dec 13 Python
Python正则表达式教程之一:基础篇
Mar 02 Python
Python3内置模块pprint让打印比print更美观详解
Jun 02 Python
解决.ui文件生成的.py文件运行不出现界面的方法
Jun 19 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
Oct 30 Python
Python 简单计算要求形状面积的实例
Jan 18 Python
django使用F方法更新一个对象多个对象字段的实现
Mar 28 Python
解决阿里云邮件发送不能使用25端口问题
Aug 07 Python
pyx文件 生成pyd 文件用于 cython调用的实现
Mar 04 Python
PYTHON使用Matplotlib去实现各种条形图的绘制
Mar 22 Python
Flask入门之上传文件到服务器的方法示例
Jul 18 #Python
flask入门之文件上传与邮件发送示例
Jul 18 #Python
Sanic框架流式传输操作示例
Jul 18 #Python
django 发送邮件和缓存的实现代码
Jul 18 #Python
python实现linux下抓包并存库功能
Jul 18 #Python
python调用tcpdump抓包过滤的方法
Jul 18 #Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
Jul 18 #Python
You might like
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
也谈 PHP 和 MYSQL
2006/10/09 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
python执行外部程序的常用方法小结
2015/03/21 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
django框架模板语言使用方法详解
2019/07/18 Python
李敖北大演讲稿
2014/05/24 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
结婚典礼主持词
2015/06/29 职场文书