完成注册功能
- js文件: onclick函数return True时才提交表单,return False时不提交表单。
- html文件:
- <form>中设置 action和method="post"
- <input> 中设置 name
- 主py文件中:
- from flask import request, redirect, url_for
- @app.route('/regist/', methods=['GET', 'POST’])
def regist():
if request.method == 'GET':
return render_template('regist.html')
else:
username = request.form.get(‘username’)#获取form中的数据
判断用户名是否存在
存到数据库中
redirect重定向到登录页
html代码:
1 {% extends 'index.html' %} 2 {% block title %} 3 注册 4 {% endblock %} 5 6 {% block link %} 7 8 {% endblock %} 9 10 {% block box %} 11 <div class="regis_box regis_box_on" id="box"> 12 <!--css--> 13 <div class=""> 14 <!--头部提示--> 15 <div class="font_title"> 16 注册新用户 17 <hr class=""> 18 </div> 19 <!--表单--> 20 <form class="layui-form" role="form" id="form_regis" method="post" action="{{ url_for('regist') }}" name="form_regis" 21 onSubmit="return registration()"> 22 <!--每一行--> 23 <div class="layui-form-item"> 24 <label class="layui-form-label">登录帐号</label> 25 <div class="layui-input-block"> 26 <input type="text" name="user_name" id="user_name" autocomplete="off" placeholder="登录用户名,不少于6个字符" 27 class="layui-input"> 28 </div> 29 </div> 30 31 <div class="layui-form-item"> 32 <label class="layui-form-label">显示名称</label> 33 <div class="layui-input-block"> 34 <input type="text" name="user_title" autocomplete="off" placeholder="显示名称" class="layui-input"> 35 </div> 36 </div> 37 38 <div class="layui-form-item"> 39 <label class="layui-form-label">密码</label> 40 <div class="layui-input-block"> 41 <input type="password" name="user_password" placeholder="密码6到20位,只能包含字母、数字" autocomplete="off" 42 class="layui-input"> 43 </div> 44 </div> 45 46 <div class="layui-form-item"> 47 <label class="layui-form-label">确认密码</label> 48 <div class="layui-input-block"> 49 <input type="password" name="check_password" placeholder="请输入确认密码" autocomplete="off" 50 class="layui-input"> 51 </div> 52 </div> 53 <div id="error_box" style="color: red;"> 54 <br> 55 </div> 56 <!--注册按钮--> 57 <div class="btn_submit_regis"> 58 <button type="submit" class="layui-btn layui-btn-normal">注册</button> 59 </div> 60 <!--协议提示--> 61 </form> 62 </div> 63 </div> 64 <script> 65 $('#user_name').change(function () { 66 $.get( 67 '{{ url_for('regist') }}', 68 { 69 user_name : $('#user_name').val() 70 }, 71 function (data) { 72 if(data != 'ok') 73 $('#error_box').html(data) 74 } 75 ) 76 }) 77 </script> 78 {% endblock %}
javascript代码:
1 function registration() { 2 var oError = document.getElementById('error_box'); 3 oError.innerHTML = "<br>"; 4 if (form_regis.user_name.value.length < 6 || form_regis.user_name.value.length > 20) { 5 oError.innerHTML = '用户名请在6到20位之间'; 6 return false; 7 } else if ((form_regis.user_name.value.charCodeAt(0) >= 48) && (form_regis.user_name.value.charCodeAt(0) <= 57)) { 8 oError.innerHTML = '首字母不可为数字'; 9 return false; 10 } else for (var i = 0; i < form_regis.user_name.value.length; i++) { 11 if ( 12 ((form_regis.user_name.value.charCodeAt(i) < 48) || (form_regis.user_name.value.charCodeAt(i) > 57)) 13 && 14 ((form_regis.user_name.value.charCodeAt(i) < 97) || (form_regis.user_name.value.charCodeAt(i) > 122)) 15 ) { 16 oError.innerHTML = '用户名只能包含数字和小写字母'; 17 return false; 18 } 19 } 20 21 if (form_regis.user_password.value.length < 6 || form_regis.user_password.value.length > 20) { 22 oError.innerHTML = '密码请在6到20位之间'; 23 return false; 24 } else if (form_regis.user_password.value != form_regis.check_password.value) { 25 oError.innerHTML = '两次密码不一样'; 26 return false; 27 } 28 return true; 29 }
python代码:
1 from flask import Flask, render_template,request,redirect,url_for 2 from flask_sqlalchemy import SQLAlchemy 3 import congif 4 5 6 app = Flask(__name__) 7 app.config.from_object(congif) 8 db = SQLAlchemy(app) 9 class User(db.Model): 10 __tablename__ = 'user' 11 id = db.Column(db.INTEGER,primary_key=True,autoincrement=True) # 数据库唯识别id 12 name = db.Column(db.String(20), nullable=False) # 登录账号名 13 title = db.Column(db.String(30)) # 显示名称 14 password = db.Column(db.String(20),nullable=False) #密码 15 truename = db.Column(db.String(10)) # 真实姓名 16 sex = db.Column(db.String(1),default='0') # 性别 17 phone = db.Column(db.String(11)) # 电话号码 18 email = db.Column(db.String(40)) # 邮箱 19 logo = db.Column(db.String(50)) # 头像 20 qq = db.Column(db.String(11)) # qq号码 21 createdate = db.Column(db.DATETIME) # 注册日期 22 level = db.Column(db.String(2)) # 用户等级 23 address = db.Column(db.String(60)) # 用户住址 24 # db.create_all() 25 26 # 增加一条数据 27 # user = User(name = 'xiao',password = '123') 28 # db.session.add(user) 29 # db.session.commit() 30 31 # 查询一条数据 32 # user = User.query.filter(User.name=='xiao').first() 33 # print(user.name,user.password) 34 35 # 更改一条数据 36 # user = User.query.filter(User.name=='xiao').first() 37 # user.password = 'xxx' 38 # db.session.commit() 39 40 # 删除一条数据 41 # user = User.query.filter(User.name=='xiao').first() 42 # db.session.delete(user) 43 # db.session.commit() 44 45 46 @app.route('/login/',methods=['GET','POST']) 47 def login(): 48 return render_template('login.html') 49 50 @app.route('/regist/',methods=['GET','POST']) 51 def regist(): 52 if request.method == 'GET': 53 user_name = request.args.get('user_name') 54 if user_name: 55 user = User.query.filter(User.name == user_name).first() 56 if user: 57 return '用户已存在' 58 else: 59 return 'ok' 60 else: 61 return render_template('regist.html') 62 else: 63 user_name = request.form.get('user_name') 64 user_title = request.form.get('user_title') 65 user_password = request.form.get('user_password') 66 user = User(name = user_name , title = user_title , password = user_password) 67 if user: 68 return 'error:user exitst' 69 else: 70 db.session.add(user) #加入数据库 71 db.session.commit() 72 return redirect(url_for('login')) 73 74 @app.route('/',methods=['GET','POST']) 75 def index(): 76 return render_template('index.html') 77 78 @app.route('/posted/',methods=['GET','POST']) 79 def posted(): 80 return render_template('posted.html') 81 82 if __name__ == '__main__': 83 app.run(debug=True)