完成注册功能

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): 
    __tablename__='user'   #类对应的表名user
    id=db.Column(db.Integer,primary_key=True,autoincrement=True)   #autoincrement自增长
    username=db.Column(db.String(20),nullable=False)   #nullable是否为空
    password=db.Column(db.String(20),nullable=False)
    nickname = db.Column(db.String(20), nullable=True)

db.create_all()   #测试是否连接成功

'''
# 插入功能
user = User(username='15',password='12')
db.session.add(user)
db.session.commit()

# 查询功能
user=User.query.filter(User.username=="15").first()
print(user.username,user.password)

# 修改功能
user=User.query.filter(User.username=="15").first()
user.password='888'
db.session.commit()

# 删除功能
user=User.query.filter(User.username=="15").first()
db.session.delete(user)
db.session.commit()
'''
# session会话连接
# filter()过滤器
# route制定路径和函数之间的关系
# def定义一个变量

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

@app.route('/lin/')  # 跳转测试
def lin():
    return 'lin'

@app.route('/denglu/')  # 跳转登陆
def denglu():
    return render_template('denglu.html')

@app.route('/zhuce/',methods=['GET','POST'])  # 跳转注册,methods定义它有两种请求方式
def zhuce():
    if request.method == 'GET':
        return render_template('zhuce.html')
    else:
        username = request.form.get('user')
        password = request.form.get('pass')
        nickname = request.form.get('nickname')
        user = User.query.filter(User.username == username).first()
        if user:
            return u'用户名已存在'
        else:
            user = User(username=username,password=password,nickname=nickname)
            db.session.add(user)
            db.session.commit()
            return redirect(url_for('denglu'))

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

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


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

js

function fnLogin() {
    var uSer = document.getElementById("user");
    var pAss = document.getElementById("pass");
    var oError = document.getElementById("error_box");

    oError.innerHTML = "<br>";

    
    if (uSer.value.length < 6 || uSer.value.length > 20) {
        oError.innerHTML = "用户名为6-20位";
        return
    } else if ((uSer.value.charCodeAt(0) >= 48) && (uSer.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "用户名首字母不能是数字";
        return
    } else for (var i = 0; i < uSer.value.length; i++) {
        if ((uSer.value.charCodeAt(i) < 48) || (uSer.value.charCodeAt(i) > 57) && (uSer.value.charCodeAt(i) < 97) || (uSer.value.charCodeAt(i) > 122)) {
            oError.innerHTML = "用户名由数字和字母组成";
            return
        }
    }

  
    if (pAss.value.length < 6 || pAss.value.length > 20) {
        oError.innerHTML = "密码为6-20位";
        return
    }
   
    window.alert("登陆成功")
}


function fnRegistration() {
    var uSer = document.getElementById("user");
    var pAss = document.getElementById("pass");
    var aGain = document.getElementById("again");
    var oError = document.getElementById("error_box");
    var isError = true;

    oError.innerHTML = "<br>";

    
    if (uSer.value.length < 6 || uSer.value.length > 20) {
        oError.innerHTML = "用户名为6-20位";
        isError = false;
        return isError;
    } else if ((uSer.value.charCodeAt(0) >= 48) && (uSer.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "用户名首字母不能是数字";
        isError = false;
        return isError;
    } else for (var i = 0; i < uSer.value.length; i++) {
        if ((uSer.value.charCodeAt(i) < 48) || (uSer.value.charCodeAt(i) > 57) && (uSer.value.charCodeAt(i) < 97) || (uSer.value.charCodeAt(i) > 122)) {
            oError.innerHTML = "用户名由数字和字母组成";
            isError = false;
            return isError;
        }
    }

    
    if (pAss.value.length < 6 || pAss.value.length > 20) {
        oError.innerHTML = "密码为6-20位";
        isError = false;
        return isError;
    }

   
    if (aGain.value != pAss.value) {
        oError.innerHTML = "密码不一致";
        isError = false;
        return isError;
    }
    
    window.alert("注册成功");
    return true
}

html

{% extends 'daohang.html' %}

{% block zhucetitle %}注册{% endblock %}
{% block zhucehead %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/denglu.css') }}">
    <script src="{{ url_for('static',filename='js/denglu.js') }}"></script>
{% endblock %}
{% block zhucebody %}
    <div id="container" style="margin-left: auto;margin-right: auto">
        <div id="header"><h2 align="center">注册</h2></div>
        <div id="content">
            <form action="{{ url_for('zhuce') }}" method="post">
                <p align="center">Username：</p>
                <p align="center">
                    <input type="text" name="user" id="user" placeholder="请输入用户名">
                </p>
                <p align="center">Password：</p>
                <p align="center">
                    <input type="password" name="pass" id="pass" placeholder="请输入密码">
                </p>
                <p align="center">Lnput again：</p>
                <p align="center">
                    <input type="password" name="again" id="again" placeholder="再次输入密码">
                </p>
                <p align="center">
                    <input type="radio" name="r1" id="r1" value="stu">student
                    <input type="radio" name="r2" id="r2" value="tea">teacher
                </p>
                <div id="error_box"><br></div>
                <p align="center">
                    <input type="submit" value="registration" onclick="return fnRegistration()">
                </p>

            </form>
        </div>
        <div id="footer"><p align="right">版权@jk</p></div>
    </div>
{% endblock %}