1. js文件: onclick函数return True时才提交表单,return False时不提交表单。
  2. html文件:
    1. <form>中设置 action和method="post"
    2. <input> 中设置 name
  3. 主py文件中:
    1. from flask import  request, redirect, url_for
    2. @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="width:300px">
    </div>
    <div class="input_box">
        <input id="upass" type="password" placeholder="请输入密码" style="width: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>

 

 posted on 2017-11-18 19:05  048刘思华  阅读(162)  评论(0编辑  收藏  举报