- 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重定向到登录页
py文件
from flask import Flask,render_template,request,redirect,url_for,session from flask_sqlalchemy import SQLAlchemy import config app = Flask(__name__) app.config.from_object(config) db=SQLAlchemy(app) class User(db.Model): #创建一个表，命名user __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() # 添加数据 # user=User(username='loki',password='6666') # db.session.add(user) # db.session.commit() # 查找数据 # user=User.query.filter(User.username=='loki').first() # print(user.username,user.password) # 修改数据 # user=User.query.filter(User.username=='loki').first() # user.password='68888' # print(user.username,user.password) # db.session.commit() # 删除数据 # user=User.query.filter(User.username=='loki').first() # db.session.delete(user) # db.session.commit() @app.route('/') def base(): return render_template('base.html') @app.route('/login/') def login(): return render_template("login.html") @app.route('/regist/', methods=['GET','POST']) def regist(): if request.method=='GET': return render_template('regist.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('login')) if __name__ == '__main__': app.run()
js文件
function fnLogin() { var oUname = document.getElementById("uname") var oError = document.getElementById("error_box") var oUpass = document.getElementById("upass") var again = document.getElementById("again"); oError.innerHTML = "<br>" if (oUname.value.length < 6 || oUname.value.length > 20) { oError.innerHTML = "用户名6-20位"; return; } else if ((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0) <= 57)) { oError.innerHTML = "first letter."; 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 = "only letter or number"; return; } if (oUpass.value.length < 6 || oUpass.value.length > 12) { oError.innerHTML = "密码6-12位" return; } } // 验证再次输入的密码 if (again.value != oUpass.value) { oError.innerHTML = "密码不一致"; isError = false; return; } window.alert("欢迎加入我们") }
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}霓虹 - 点击打开你的视野</title> <link href="../static/css/login.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='../static/js/login.js'></script> {% block head %} {% endblock %} </head> <body> {% block main %} <div class="box"> <h1>-快到碗里来-</h1> <div class="input_box"> <input id="uname" type="text" placeholder="请输入用户名" style="300px"> </div> <div class="input_box"> <input id="upass" type="password" placeholder="请输入密码" style="300px"> </div> <div id="error_box"><br></div> <input type="checkbox"value="true"><span>记住我</span> <a href="">忘记密码</a><br><br> <div class="input_box"> <button class="button"onclick="fnLogin()">注册</button> </div> </div> {% endblock %} </body> </html>