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后会自动访问呢首页。
阅读更多相关文章推荐
- tp3.2.3下用ajax做一个登陆页面,为什么没有登录错误提示信息?
- 使用spring webflow,在前台页面中如何显示后端返回的错误信息
- 使用spring webflow,在前台页面中如何显示后端返回的错误信息
- asp.net中当服务器出错时显示指定的错误页面,同时把错误信息写入系统日志文件的探讨
- 使用Form验证,未登录时登录页面无法显示图片、css、js文件的解决方法
- 在moss页面出错时,显示详细的错误信息. (zt)
- Ajax.net 显示错误信息的设置
- 在当前页面显示ajax出错信息
- 如何自定义Struts2表单验证后的错误信息显示格式/样式
- 一个流行且实用的JS表单验证提示,演示了怎么自定义错误信息的显示方式,同时通过写FormValid.showError类方法来实现错误显示方式自定义: errMsg 是一个错误消息的数组,这样方便自定
- 在jsp页面中使用显示单独的多个错误消息
- 使用ajax获取远程页面信息
- 显示指定的错误页面,同时把错误信息写入系统日志文件
- 如何自定义Struts2表单验证后的错误信息显示格式/样式
- 页面中显示不出错误信息
- 使用Ajax技术运行时页面出现"Sys"错误
- 使用NOD32引起ASP.NET Development Server的IE页面无法显示(错误的端口号)
- asp.net中当服务器出错时显示指定的错误页面,同时把错误信息写入系统日志文件
- 页面中显示不出错误信息
- .net跳到指定错误页面兵显示详细的错误信息