flask-wtf表单验证--修改邮箱密码

心已赠人 2021-10-16 00:56 541阅读 0赞

##### 一、介绍 #####

使用Flask-wtf可以很方便用户进行对应字段的验证，即验证过程自动化，使用主要包含三个步骤：

*  创建 Flask-wtf 表单，设置相关的属性和验证条件
 *  在前端利用form直接显示对应内容
 *  在后端进行结果处理

--------------------

##### 二、效果图 #####

![Alt][]

--------------------

##### 三、实现代码 #####

###### forms.py ######

class AccountForm(FlaskForm):
        username = StringField(label='用户名', , validators=[DataRequired(), Length(1, 20)],
                               render_kw={ "class": "form-control"})
        email = StringField(label='邮箱', validators=[DataRequired(), Email()],
                            render_kw={ "placeholder": "Email", "class": "form-control"})
        old_password = PasswordField(label='原密码', validators=[DataRequired(), Length(1, 20)],
                                     render_kw={ "placeholder": "请输入原密码", "class": "form-control"})
        new_password = PasswordField(label='新密码', validators=[DataRequired(), Length(1, 20)],
                                     render_kw={ "placeholder": "请输入新密码", "class": "form-control"})
        confirm_new_password = PasswordField(label='确认密码',
                                             validators=[DataRequired(), Length(1, 20), EqualTo('new_password')],
                                             render_kw={ "placeholder": "请再次输入新密码", "class": "form-control"})
        submit = SubmitField(label='提交')

###### account.html ######

{% for message in get_flashed_messages() %}
            <div class="alert alert-warning">
                <button type="button" class="close" data-dismiss="alert">×</button>
                {
       { message }}
            </div>
        {% endfor %}
        <form action="{ { url_for('student_blue.account_change') }}" method="post">
            {
       { form.hidden_tag() }}
            <div class="form-group">
                {
       { form.username.label }}
                {
       { form.username }}
                {% for error in form.username.errors %}
                    <span style="color: red">{
       { error }}</span>
                {% endfor %}
            </div>
            <div class="form-group">
                {
       { form.email.label }}
                {
       { form.email }}
                {% for error in form.email.errors %}
                    <span style="color: red">{
       { error }}</span>
                {% endfor %}
            </div>
            <div class="form-group">
                {
       { form.old_password.label }}
                {
       { form.old_password }}
                {% for error in form.old_password.errors %}
                    <span style="color: red">{
       { error }}</span>
                {% endfor %}
            </div>
            <div class="form-group">
                {
       { form.new_password.label }}
                {
       { form.new_password }}
                {% for error in form.new_password.errors %}
                    <span style="color: red">{
       { error }}</span>
                {% endfor %}
            </div>
            <div class="form-group">
                {
       { form.confirm_new_password.label }}
                {
       { form.confirm_new_password }}
                {% for error in form.confirm_new_password.errors %}
                    <span style="color: red">{
       { error }}</span>
                {% endfor %}
            </div>
            {
       { form.submit }}
        </form>

###### app.py ######

# 查看账号信息
    @route('/accountInfo', methods=['GET', 'POST'])
    def account_info():
        # 查看个人账号信息
        s_form = StudentAccountForm()
    
        return render_template("account.html", form=s_form)
    
    
    # 账号信息修改
    @route('/accountChange', methods=['GET', 'POST'])
    def account_change():
        s_form = StudentAccountForm()
    
        # 逻辑处理
        if request.method == 'POST':
            # 调用validation_on_submit方法，可以一次性执行完所有验证函数的逻辑
            if s_form.validate_on_submit():
                email = request.form.get('email')
                old_password = request.form.get('old_password')
                new_password = request.form.get('new_password')
    
                user = user_datastore.find_user(id_num=current_user.id_num)
                if verify_password(old_password, user.password):
                    # 这里引入user的上下文，这个概念不太懂，暂且当成全局变量来用
                    user.password = utils.hash_password(new_password)
                    user.email = email
                    # 修改密码
                    db.session.add(user)
                    db.session.commit()
                    flash('Your account info has been updated!')
                    return redirect(url_for("account_info"))
                else:
                    flash('Password Error!')
            # else:
            # flash(s_form.errors)
    
        return render_template("account.html", form=s_form)

注：**if s\_form.validate\_on\_submit():** 如果验证不通过则使用 **render\_template**返回，通过则直接使用**redirect**返回，（此处真的是个坑！！！！！！），如果验证不通过也是使用redirect那么在html页面是不能够直接在对应标签下显示错误信息，比如邮箱验证错误时，错误信息不回显示在邮箱的输入框下面，使用**flash(s\_form.errors)** 才能统一显示在指定位置。

--------------------

##### 四、WTForms支持的HTML标准字段 #####

字段类型      说　　明
    StringField 文本字段
    TextAreaField 多行文本字段
    PasswordField 密码文本字段
    HiddenField 隐藏文本字段
    DateField 文本字段，值为 datetime.date 格式
    DateTimeField 文本字段，值为 datetime.datetime 格式
    IntegerField 文本字段，值为整数
    DecimalField 文本字段，值为 decimal.Decimal
    FloatField 文本字段，值为浮点数
    BooleanField 复选框，值为 True 和 False
    RadioField 一组单选框
    SelectField 下拉列表
    SelectMultipleField 下拉列表，可选择多个值
    FileField 文件上传字段
    SubmitField 表单提交按钮
    FormField 把表单作为字段嵌入另一个表单
    FieldList 一组指定类型的字段

--------------------

##### 五、常见的验证函数 #####

验证函数 说　　明
    Email 验证电子邮件地址
    EqualTo 比较两个字段的值；常用于要求输入两次密码进行确认的情况
    IPAddress 验证 IPv4 网络地址
    Length 验证输入字符串的长度
    NumberRange 验证输入的值在数字范围内
    Optional 无输入值时跳过其他验证函数
    Required 确保字段中有数据
    Regexp 使用正则表达式验证输入值
    URL 验证 URL
    AnyOf 确保输入值在可选值列表中
    NoneOf 确保输入值不在可选值列表中

--------------------

参考文章：【1】[Python Flask，Flask-WTF，表单验证，CSRF验证][Python Flask_Flask-WTF_CSRF]  
     【2】[Flask入门—Flask-WTF表单验证][Flask_Flask-WTF]  
     【3】[细说flask表单flask-wtf][flask_flask-wtf]  
     【4】[使用Flask-WTF制作一个带验证码的登陆表单][Flask-WTF]  
     【5】[Flask-3 表单和输入验证][Flask-3]  
     【6】[我的第三十五篇博客—FLASK-WTF表单验证][FLASK-WTF]

[Alt]: /images/20211015/bd51dfd2f7b34b70ac89d860c253bfc7.png
[Python Flask_Flask-WTF_CSRF]: https://blog.csdn.net/houyanhua1/article/details/85415140
[Flask_Flask-WTF]: https://blog.csdn.net/u014465934/article/details/80157058
[flask_flask-wtf]: https://blog.csdn.net/kuangshp128/article/details/62233246
[Flask-WTF]: https://segmentfault.com/a/1190000004468148
[Flask-3]: https://cloud.tencent.com/developer/article/1469854
[FLASK-WTF]: https://www.cnblogs.com/sll-csdn/p/10926179.html