flask 在登录页面使用ajax,并显示表单错误信息

    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
        <form id="loginform" method="POST" >
            <table>
                {{ form.hidden_tag() }}
                <tr>
                    <td>
                        邮箱
                    </td>
                    <td>
                        {{ form.email }}
                    </td>
                </tr>
                <tr>
                    <td>
                        密码
                    </td>
                    <td>
                        {{ form.password }}
                    </td>
                </tr>
                <tr>
                    <td>
                        记住我
                    </td>
                    <td>
                        {{ form.remember_me }}
                    </td>
                </tr>
            </table>

            <button type="button" id="btn">提交</button>
        </form>
    <script>
        $(function () {
            $('#btn').click(function () {
                //ajax提交
                post_data = $('#loginform').serialize();
                $.ajax({
                    url: "/login",
                    type: 'POST',
                    data: post_data,
                    success: function (data) {
                        if (data.status == 200) {
                            window.location = '/'
                        }
                        else {
                            alert(data.message)
                        }
                    }
                });
            });
        });
    </script>

上面是html中的部分代码
下面是表单的代码

class LoginForm(FlaskForm):
    email = StringField('邮箱', validators=[DataRequired(message='邮箱不能为空'), Length(1, 64, message='邮箱地址长度不合适'),
                                          Email(message='邮箱不合法')])
    password = PasswordField('密码', validators=[DataRequired(message='密码不能为空')])
    remember_me = BooleanField('记住我')
    submit = SubmitField('登录')

    def get_errors(self):
        errors = ''
        for v in self.errors.values():
            for m in v:
                errors += m
            errors += '\n'
        return errors

因为我这表单是由普通的post请求更改过来的,所以看起来比较怪,正常是在html中定义表单,在form中验证表单,我这里偷懒。。。
我在LoginForm中定一了一个方法,用来获得表单验证失败后所有的错误信息。因为我只是在登录页面实现了ajax功能,如果很多页面都需要ajax,可以将get_errors()放在一个单独的BaseForm中,每个需要这个功能的表单,直接继承这个BaseForm就可以了。
下面时view中的代码

@auth.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if request.method == 'GET':
        return render_template('auth/login_test.html', form=form)
    if form.validate_on_submit():
        user = User.query.filter_by(email=form.email.data).first()
        if user is not None and user.verify_password(form.password.data):
            login_user(user, form.remember_me.data)
            return jsonify({'status': 200})
        return jsonify({'status': 400, 'message': '用户名和密码不匹配'})
    message = form.get_errors()
    return jsonify({'status': 400, 'message': message}

请求进来时,判断请求类型,若是get请求,则返回html文件,并将form传到html;若是post请求,则首先做表单验证,验证不通过,通过get_errors()方法获得所有的错误信息并返回,表单验证通过则进行用户名和密码的验证,全部通过验证后,返回状态码200,ajax在判断status=200后会自动访问呢首页。

猜你喜欢

转载自blog.csdn.net/hehekk/article/details/82379319