本代码目录:
app2.py:代码
#
# made by 杨庆
#app2是利用函数直接生成表单并且实现验证
from wtforms.validators import DataRequired,EqualTo
from flask_wtf import FlaskForm
from flask import Flask,url_for,render_template,request,flash
from wtforms import StringField,PasswordField,SubmitField
app = Flask(__name__)
app.secret_key = 'secret string'
class LoginForm(FlaskForm):
#验证需求
username = StringField(u'用户名:',validators=[DataRequired()])
password = PasswordField(u'密码:',validators=[DataRequired()])
#validators验证 后加列表函数(), equalto的第一个参数比较,第二个显示
password2 = PasswordField(u'确认密码:',validators=[DataRequired(),EqualTo('password','密码不一致')])
submit = SubmitField('提交')
@app.route('/form',methods=['GET','POST'])
def login():
#实例出来
login_form = LoginForm()
#验证参数
username = request.form.get('username')
password = request.form.get('password')
password2 = request.form.get('password2')
#判断请求方式
if request.method == 'POST':
#只要提交就会实现所有的校验
if login_form.validate_on_submit():
print(username,password)
return 'success'
else:
flash('参数有误')
# 传过去
return render_template('app2.html',form=login_form)
if __name__=='__main__':
app.run(debug=True)
app2.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Signin Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="signin.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<!--使用变量的表单-->
<form method="post" class="form-signin">
{{ form.csrf_token() }}
<div class="form-group" >
{{ form.username.label }} {{ form.username(class="form-control") }}
</div>
<div class="form-group">
{{ form.password.label }} {{form.password(class="form-control") }}
</div>
<div class="form-group">
{{ form.password2.label }} {{form.password2(class="form-control") }}
</div>
{{ form.submit(class="btn btn-lg btn-primary btn-block") }}
</form>
</div>
{% for message in get_flashed_messages()%}
{{message}}
{% endfor%}
</body>
</html>
这个CSRF令牌字段,在提交表单后悔自动被验证,为了确保表单通过验证,必须在表单手中动渲染这个字段
效果如下: