完成注册功能(2017.11.17)

{% extends 'base.html' %}
{% block title %}注册{% endblock %}
    {% block head %}
    <link rel="stylesheet" type="text/css" href="../static/css/20.css">
    <script src="../static/JS/注册.js"></script>
    <script src="{{ url_for('static',filename='JS/注册.js') }}"></script>
    {% endblock %}
{% block main %}
<body style="background: burlywood">
<div class="box">
    <h1>注册</h1>
    <form action="{{ url_for('regist') }}" method="post">
    <div class="input_box">
        注册帐号：<input id="zcuname" type="text" placeholder="请输入用户名" name="usename">
    </div>
    <div class="input_box">
        注册密码：<input id="zcupassword1" type="password" placeholder="请输入密码" name="password">
    </div>
     <div class="input_box">
         再次输入:<input id="zcupassword2" type="password" placeholder="请再次输入密码" >
    </div>
    <div id="zcerror_box"><br></div>
    <div class="input_box">
        <button onclick="fnEnroll()">立即注册</button>
        <a href="login.html">已注册</a>
    </div></from>
</div>
</body>
{% endblock %}

function fnEnroll() {
    var zcoUname = document.getElementById("zcuname");
    var zcoError = document.getElementById("zcerror_box");
    var zcoUword1 = document.getElementById("zcupassword1");
    var zcoUword2 = document.getElementById("zcupassword2");
    var isoError = true;
    zcoError.innerHTML = "<br>";
    if (zcoUname.value.length<6|| zcoUname.value.length>12) {
         zcoError.innerHTML = "用户名为6到12位";
         isoError = false;
        return isoError;
    } else if((zcoUname.value.charCodeAt(0)>=48)&&(zcoUname.value.charCodeAt(0)<=57)){
        zcoError.innerHTML = "用户名首位不能是数字";
        isoError=false;
        return isoError;
    } else for (var i = 0; i < zcoUname.value.length; i++) {
        if(zcoUname.value.charCodeAt(i)<48||(zcoUname.value.charCodeAt(i)>57)&&(zcoUname.value.charCodeAt(i)<97)||zcoUname.value.charCodeAt(i)>122){
            zcoError.innerHTML = "用户名只能是字母与数字";return isoError;
        }
    }
    if (zcoUword1.value.length<6||zcoUword1.value.length>20){
        zcoError.innerHTML = "密码为6到20位";
        isoError = false;
        return isoError;
    }
    if (zcoUword1.value!=zcoUword2.value){
        zcoError.innerHTML="两次密码不一致";
        return false;
    }
    return true;
    window.alert("注册成功！！");
}

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)


db.create_all()


@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'))




@app.route('/zimoban/')
def zimoban():
    return render_template('zimoban.html')


@app.route('/zzimoban/')
def zzimoban():
    return render_template('zzimoban.html')


@app.route('/index/')
def index():
    return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True)

js文件： onclick函数return True时才提交表单，return False时不提交表单。
html文件：
1. <form>中设置 action和method="post"
2. <input> 中设置 name
主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重定向到登录页