完成注册功能
- 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重定向到登录页
import config from flask import Flask,render_template,request,redirect,url_for,session from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.config.from_object(config) db = SQLAlchemy(app) #创建用户模型 class User(db.Model): __tablename__ = 'User' id = db.Column(db.Integer,primary_key=True,autoincrement=True) username = db.Column(db.String(20),nullable=False) password = db.Column(db.String(20),nullable=False) #db.create_all() @app.route('/') def first(): return render_template('first.html') @app.route('/sign_up/',methods=['GET','POST'])#登录 def sign_up(): return render_template('sign_up.html') @app.route('/sign_in/',methods=['GET','POST'])#注册 def sign_in(): if request.method == "GET": return render_template("sign_in.html") else: username = request.form.get("username") password = request.form.get("password") user = User.query.filter(User.username == username).first() if user: return 'username existed.' else: user = User(username=username, password=password) db.session.add(user) db.session.commit() return redirect(url_for('sign_up')) @app.route('/chat/') def chat(): return render_template('chat.html') if __name__ == '__main__': app.run(debug=True)
{% extends 'first.html'%} {% block title %} 注册* {% endblock %} {% block head %} <link href="{{ url_for('static',filename='css/sign.css') }}" rel="stylesheet" type="text/css"> <script src="{{ url_for('static',filename='js/sign.js') }}"></script> {% endblock %} {% block main %} <div class="box"> <h3>欢迎注册</h3> <form action="{{ url_for("sign_in") }}" method="post"> <div class="input_box"> 输入用户名: <input id="uname" name="username" type="text" placeholder="请输入用户名" class="b1"> </div> <div class="input_box"> 输入密码: <input id="upass" name="password" type="password" placeholder="请输入密码" class="b1"> </div> <div class="input_box"> 确认密码: <input id="checkpass" name="passnameagain" type="password" placeholder="请确认密码" class="b1"> </div> <div id="error_box" class="error_box"><br></div> <div class="button"> <button class="login" onclick="fnLogin()">登录</button> <button class="cancel" onclick=window.alert("是否确认离开,您输入的数据可能不会被保存")>取消</button></div> </div> {% endblock %}
function fnLogin() { var oUname=document.getElementById("uname"); var oUpass=document.getElementById("upass"); var oError=document.getElementById("error_box"); var oCheckpass = document.getElementById("checkpass"); var isError = true; oError.innerHTML="<br>"; if(oUname.value.length<6||oUname.value.length>12){ oError.innerHTML="用户名的长度需为6-20位"; isError = false; return; }else if((oUname.value.charCodeAt(0)>=48)&&(oUname.value.charCodeAt(0)<=57)){ oError.innerHTML="首字母不能是数字。"; isError = false; return; }else for(var i=0;i<oUname.value.length;i++){ if((oUname.value.charCodeAt(i)<48||oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97||oUname.value.charCodeAt(i)>122)){ oError.innerHTML="只能包含字母或数字。"; isError = false; return; } } if (oUpass.value.length<6||oUpass.value.length>12){ oError.innerHTML="密码的长度需为6-20位"; isError = false; return; } if(oCheckpass.value!=oUpass.value){ oError.innerHTML="输入密码不一致。"; isError = false; return; }else if(oCheckpass.value==""){ oError.innerHTML="未确认密码。"; isError = false; return; } return isError; window.alert("登录成功!") }