完成注册功能
- 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重定向到登录页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{%block title %}{% endblock %}导航</title>
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/daohang.css')}}">
</head>
<body bgcolor="#00ffff">
<ul>
<li><a class="active" >首页</a></li>
<li><a >新闻</a></li>
<li><a >图库</a></li>
<li><a >关于</a></li>
<input class="eat" type="text" name="sousuo" value="请输入内容">
<input class="eat"type="button" name="submit" value="搜索">
<li><a href="{{ url_for('denglu') }}">登录</a></li>
<li><a href="{{ url_for('zhuce') }}">注册</a></li>
</ul>
{% block main %}{% endblock %}
{% block ma %}{% endblock %}
</body>
</html>
{% extends'daohang.html' %}
{% block title %}
<h1>登录</h1>
{% endblock %}
{% block main %}
<head>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/denglu.css') }}">
<script src="../static/js/denglu.js"></script>
</head>
<body>
<div class="one"> <h2>登录</h2>
<form action="{{ url_for('deng') }}"method="post">
<div class="input_box" >
<input id="uname" type="text" placeholder="请输入用户名">
</div>
<div class="input_box">
<input id="upass" type="password" placeholder="请输入密码">
</div>
<div id="error_box"><br></div>
<div class="input_box">
<button onclick="myLogin()">登录</button>
</div>
</form>
</div>
</div>
</body>
{% endblock %}
{% extends'daohang.html' %}
{% block title %}
<h1>注册页面</h1>
{% endblock %}
{% block ma %}
<head>
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/zhuce.css')}}">
<script src="{{url_for('static',filename='js/zhuce.js')}}"></script>
</head>
<body>
<div class="two">
<h2>用户注册</h2>
<form action="{{ url_for('zhu') }}"method="post">
<div class="input_box" >
<input id="uname" type="text" placeholder="请输入用户名" name="username">
</div>
<div class="input_box">
<input id="upass" type="password" placeholder="请输入密码"name="password">
</div>
<div class="input_box">
<input id="upass1" type="password" placeholder="请再次确认密码">
</div>
<div id="error_box"><br></div>
<div class="input_box">
<input type="submit" name="commit" value="注册" class="sign-in-button" data-disable-with="注册" onclick="myLogin()">
</div>
</form>
</div>
</div>
</body>
{% endblock %}
function fnLogin() {
var oUname = document.getElementById("uname");
var oError = document.getElementById("error_box");
var opassward = document.getElementById("upass");
var isError=true;
oError.innerHTML = "<br>";
if(oUname.value.length<6 || oUname.value.length >12){
oError.innerHTML="用户名6-12";
isError=false;
return isError;
}else if ((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
oError.innerHTML="第一位只能是字母";
return isError;
} 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="只能是字母或数字";
return false;
}
}
if(opassward.value.length<6 || opassward.value.length>12){
oError.innerHTML="密码6-12位";
return false;
}
window.alert("登录成功！")
}
function myLogin() {
var oUname = document.getElementById("uname");
var oUpass = document.getElementById("upass");
var oUpass1 = document.getElementById("upass1");
var oError = document.getElementById("error_box");
var isError=true;
oError.innerHTML="<br>"
if(oUname.value.length<6 || oUname.value.length >20){
oError.innerHTML="must be 6-20";
isError=false;
return isError;
}
if(oUname.value.charCodeAt(0)>=48&&oUname.value.charCodeAt(0)<=57){
oError.innerHTML="first letter";
return isError;
} else {
for (var i=0 ; i<oUname.value.length;i++){
if ((oUname.value.charCodeAt(i)>122||oUname.value.charCodeAt(i)<97)&&(oUname.value.charCodeAt(i)>57&&oUname.value.charCodeAt(i)<48)){
oError.innerHTML="only number or letter";
isNotError=flase;
return isError;
}
}
}
if(oUpass.value.length<6 || oUpass.value.length>20){
oError.innerHTML="must be 6-20";
return false;
}
else if (oUpass1.value!=oUpass.value ) {
oError.innerHTML = "rewrite your PIN";
return false;
}
return isError
}
from flask import Flask,render_template,request,redirect,url_for
from flask_sqlalchemy import SQLAlchemy
import config
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)
nickname = db.Column(db.String(20))
db.create_all()
user=User(username='mis1234',password='111111')
db.session.add(user)
db.session.commit()
@app.route('/')
def danghang():
return render_template("daohang.html")
@app.route('/deng/',methods=['get','post'])
def denglu():
if request.method == 'get':
return render_template("denglu.html")
else:
usern = request.form.get('username')
passw = request.form.get('password')
user = User.query.filter(User.username == usern).first()
if user:
if user.password==passw:
return redirect(url_for('danghang'))
else:
return u'passwoed error'
else:
return u'username is not existed'
@app.route('/zhu/',methods=['get','post'])
def zhuce():
if request.method=='get':
return render_template("zhuce.html")
else:
usern=request.form.get('username')
nickn= request.form.get('nickname')
passw= request.form.get('password')
user=User.query.filter(User.username==usern).first()
if user:
return u'username existed'
else:
user1=User(username=usern,password=passw,nickname=nickn)
db.session.add(user1)
db.session.commit()
return redirect(url_for("deng"))
if __name__ == '__main__':
app.run(debug=True)
