表单

from flask_wtf import FlaskForm  #导入表单主模块

#from wtforms import 导入的都是生成表单的对象,例如输入框,按钮
from wtforms import StringField, PasswordField, BooleanField, SubmitField

#wtforms.validator导入的是验证器
from wtforms.validators import DataRequired, Length, Email, EqualTo

这是一个示范:


app.config['SECRET_KEY'] = 'SECRET_KEYdsfdsdfdd'  #表单必须有的认证

# 创建一个名为RegistrationForm的表单类
class RegistrationForm(FlaskForm):
    # 添加用户名字段
    username = StringField('用户名', validators=[DataRequired(), Length(min=5, max=20,message='用户名为5-20个字符之间')])
    # 添加邮箱地址字段
    email = StringField('邮箱地址', validators=[DataRequired(), Email(message='请输入有效的电子邮件地址')])
    # 添加密码字段
    password = PasswordField('密码', validators=[DataRequired()])
    # 添加确认密码字段,并要求与密码一致
    confirm_password = PasswordField('确认密码', validators=[DataRequired(), EqualTo('password',message='重复密码输入错误')])
    # 添加用户协议勾选框,并要求必须勾选
    accept_tos = BooleanField('我接受用户协议', validators=[DataRequired()])
    # 添加注册按钮
    submit = SubmitField('注册')

# 定义注册页面路由
@app.route('/login', methods=['GET', 'POST'])
def register():
    # 创建RegistrationForm实例
    form = RegistrationForm()
    # 如果表单已经提交且通过了验证
    if form.validate_on_submit():
        # 给用户显示成功消息
        flash(f'账户创建成功:{form.username.data}!', 'success')
        # 重定向到主页
        return redirect(url_for('/'))
    # 如果表单未通过验证,则重新呈现注册页面,并显示错误消息
    return render_template('ceshi.html', form=form)

这是前端代码:

<form method="POST" action="/login">
  {{ form.csrf_token }}  #表单必须提交这个
  {{ form.username.label }} {{ form.username() }} #展现表单元素的标题+元素自身

  {% if form.username.errors %}  #判断输入是否有错,否则提示信息
    {% for error in form.username.errors %}
      <br>{{ error }}
    {% endfor %}
  {% endif %}
  <br>

  {{ form.email.label }} {{ form.email() }}

  {% if form.email.errors %}
    {% for error in form.email.errors %}
      <br>{{ error }}
    {% endfor %}
  {% endif %}
  <br>

  {{ form.password.label }} {{ form.password() }}

  {% if form.password.errors %}
    {% for error in form.password.errors %}
      <br>{{ error }}
    {% endfor %}
  {% endif %}
  <br>

  {{ form.confirm_password.label }} {{ form.confirm_password() }}

  {% if form.confirm_password.errors %}
    {% for error in form.confirm_password.errors %}
      <br>{{ error }}
    {% endfor %}
  {% endif %}
  <br>

  {{ form.accept_tos() }} {{ form.accept_tos.label }}
  <br>

  {{ form.submit() }}
</form>

常用表单对象

StringField: 文本输入框
PasswordField: 密码输入框
BooleanField: 复选框
SubmitField: 提交按钮
TextAreaField: 文本域输入框
IntegerField: 整数输入框
DecimalField: 十进制数输入框
FloatField: 浮点数输入框
DateField: 日期选择器
DateTimeField: 日期时间选择器
TimeField: 时间选择器
RadioField:单选框

常用验证器

DataRequired:不许为空
Length:验证字符串的长度范围
EqualTo:验证两个字段的值是否相等
Email:验证是否是有效的邮箱地址
Regexp:使用正则表达式验证字段的值
ValidationError:当字段验证失败时抛出异常
Optional:允许字段为空,不进行验证
URL:验证是否是有效的 URL 地址
NumberRange:验证数值是否在指定范围内
AnyOf:验证字段的值是否在给定的可选值中
FileRequired:验证上传文件是否存在
FileAllowed:验证上传文件是否是指定的文件类型