您的位置:首页 > 其它

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

2018-09-04 10:20 531 查看
<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后会自动访问呢首页。

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐