表单
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:验证上传文件是否是指定的文件类型