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 18 Python
Python 判断 有向图 是否有环的实例讲解
Feb 01 Python
python+influxdb+shell编写区域网络状况表
Jul 27 Python
python生成1行四列全2矩阵的方法
Aug 04 Python
使用Python批量修改文件名的代码实例
Jan 24 Python
python3爬虫学习之数据存储txt的案例详解
Apr 24 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
Aug 12 Python
Python数据可视化实现正态分布(高斯分布)
Aug 21 Python
tensorflow mnist 数据加载实现并画图效果
Feb 05 Python
python中if及if-else如何使用
Jun 02 Python
使用keras实现孪生网络中的权值共享教程
Jun 11 Python
Python selenium绕过webdriver监测执行javascript
Apr 12 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
Syphon 秘笈
2021/03/03 冲泡冲煮
PHP的变量总结 新手推荐
2011/04/18 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
php获取微信openid方法总结
2019/10/10 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
取得传值的函数
2006/10/27 Javascript
javascript indexOf函数使用说明
2008/07/03 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue 左滑删除功能的示例代码
2019/01/28 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
Python实现简易端口扫描器代码实例
2017/03/15 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
python中温度单位转换的实例方法
2020/12/27 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
linux面试相关问题
2012/08/11 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
学生会主席竞聘书
2014/03/31 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
安全生产学习心得体会
2016/01/18 职场文书