完成注册功能

1.js文件： onclick函数return True时才提交表单，return False时不提交表单。

2.html文件：

（1）<form>中设置 action和method="post"

1. <input> 中设置 name

（2）主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重定向到登录页

注册HTML：

{% extends'index.html' %}
{% block title %}
    注册
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/register.css') }}" type="text/css">
    <script src="{{url_for('static',filename='js/register.js') }}"></script>
{% endblock %}
{% block main %}

    <body>
    <form action="{{ url_for('register') }}" method="post">
    <div class="box">
        <div>
            <a href="{{ url_for('login') }}">登录</a>
            <a style="color: antiquewhite">*</a>
            <a href="{{ url_for('register') }}">注册</a>
        </div>
        <br>

        <div class="name" align="center">
            <input id="uname" type="text" placeholder="登录账号:" name="username">
        </div>
        <br>
        <div class="telephone" align="center">


            <input type="tel"
                   id="uuser"
                   placeholder="请输入你的手机号:" name="telephone">
        </div>
        <br>

        <div class="email" align="center">
            <input
                    type="password" id="upass" placeholder="设置你的密码:"name="password">
        </div>
        <br>
        <div class="email" align="center">
            <input
                    type="password" id="upass2" placeholder="请输入你的密码:"name="password">
        </div>
        <br>
        <div>
            <div id="error_box"></div>
            <div>
                <button id="register" onclick=" return myRegister()">注册</button>

            </div>
            <a class="login-register" href="{{ url_for('login') }}">进入登录界面</a>


            <div id="footer" style="background-color: transparent;clear:both;text-align:center;">版权 ． duym@jzx</div>
        </div>
    </div>
    </form>
    </body>

{% endblock %}

py：

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)
    telephone = db.Column(db.String(11), nullable=False)


#db.create_all()

# 增加数据
# user=User(username = 'mis1234',password = '111111',telephone = '12345678900')
# db.session.add(user)
# db.session.commit()

# 查询数据

# user=User.query.filter(user.username == 'mis1234').first()
# print(user.username,user.password)


# 修改数据
# user=User.query.filter(user.username == 'mis1234').first()
# user.password = '000000'
# db.session.commit()

# 删除数据
# user=User.query.filter(user.username == 'mis1234').first()
# db.session.delete(user)
# db.session.commit()




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

@app.route('/register/',methods=['GET','POST'])
def register():
    if request.method == 'GET':
        return render_template('register.html')
    else:
        usern = request.form.get('username')
        telep = request.form.get('telephone')
        passw = request.form.get('password')
        user = User.query.filter(User.username == usern).first()
        if user:
            return 'username existed.'
        else:
            user1 = User(username = usern,password = passw,telephone = telep)
            db.session.add(user1)#数据库操作
            db.session.commit()
            return redirect(url_for('login'))

@app.route('/question',methods=['GET','POST'])
def question():
    return render_template('question.html')

@app.route('/base',methods=['GET','POST'])
def base():
    return render_template('base.html')

@app.route('/',methods=['GET','POST'])
def index():
    return render_template('index.html')


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

js：

function myRegister() {
    var oUname = document.getElementById("uname");
    var oUpass = document.getElementById("upass");
    var oError = document.getElementById("error_box");
    var oUuser = document.getElementById("uuser");
    var oUpass2 = document.getElementById("upass2");
    var isError = true;

    oError.innerHTML = "<br>";
    //uname
    if (oUname.value.length > 20 || oUname.value.length < 6) {
        oError.innerHTML = "用户名:6至20位。";
        isError = false;
        return isError;
    } else if ((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "首字母不能为数字。";
        isError = false;
        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 = "昵称只能是字母或者数字。";
            isError = false;
            return isError;
        }
    }
    for (var i = 0; i < 12; i++) {
        if (((oUuser.value.charCodeAt(i) < 48) || (oUuser.value.charCodeAt(i) > 57)) || oUuser.value.length != 11) {
            oError.innerHTML = "请输入正确手机号";
            isError = false;
            return isError;
        }
    }

    //upass
    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        document.getElementById('error_box').innerHTML = "密码必须在6-20个字符之间";
        isError = false;
        return isError;
    }
    if (oUpass2.value != oUpass.value) {
        oError.innerHTML = "两次输入的密码必须一致";
        isError = false;
        return isError;
    }
    return isError
    window.alert("注册成功!!");

}

posted @ 2017-11-21 12:00 089江芷璇阅读(213) 评论(0) 收藏举报

刷新页面返回顶部