码迷,mamicode.com
首页 > 其他好文 > 详细

完成注册功能

时间:2017-11-22 14:27:45      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:can   images   tab   输入   技术分享   image   ntb   表单   port   

  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重定向到登录页

 

import config
from flask import Flask,render_template,request,redirect,url_for,session
from flask_sqlalchemy import SQLAlchemy

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 first():
    return render_template(first.html)

@app.route(/sign_up/,methods=[GET,POST])#登录
def sign_up():
    return render_template(sign_up.html)

@app.route(/sign_in/,methods=[GET,POST])#注册
def sign_in():
    if request.method == "GET":
        return render_template("sign_in.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(sign_up))


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


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

 

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


{% block main %}
    <div class="box">
        <h3>欢迎注册</h3>
        <form action="{{ url_for("sign_in") }}" method="post">
            <div class="input_box">
               输入用户名: <input id="uname"  name="username" type="text" placeholder="请输入用户名" class="b1">
        </div>
             <div class="input_box">
                输入密码: <input id="upass" name="password" type="password" placeholder="请输入密码" class="b1">
             </div>
            <div class="input_box">
                确认密码: <input id="checkpass" name="passnameagain" type="password" placeholder="请确认密码" class="b1">
             </div>
        <div id="error_box" class="error_box"><br></div>
        <div class="button">
            <button  class="login" onclick="fnLogin()">登录</button>
            <button  class="cancel" onclick=window.alert("是否确认离开,您输入的数据可能不会被保存")>取消</button></div>
    </div>
{% endblock %}

 

function fnLogin() {
    var oUname=document.getElementById("uname");
    var oUpass=document.getElementById("upass");
    var oError=document.getElementById("error_box");
    var oCheckpass = document.getElementById("checkpass");
    var isError = true;
    oError.innerHTML="<br>";
    if(oUname.value.length<6||oUname.value.length>12){
        oError.innerHTML="用户名的长度需为6-20位";
        isError = false;
        return;
    }else if((oUname.value.charCodeAt(0)>=48)&&(oUname.value.charCodeAt(0)<=57)){
        oError.innerHTML="首字母不能是数字。";
        isError = false;
        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="只能包含字母或数字。";
            isError = false;
            return;
        }
    }
    if (oUpass.value.length<6||oUpass.value.length>12){
        oError.innerHTML="密码的长度需为6-20位";
        isError = false;
        return;
    }
    if(oCheckpass.value!=oUpass.value){
        oError.innerHTML="输入密码不一致。";
        isError = false;
        return;
    }else if(oCheckpass.value==""){
        oError.innerHTML="未确认密码。";
        isError = false;
        return;
    }
    return isError;
    window.alert("登录成功!")
}

 

技术分享图片

技术分享图片

 

完成注册功能

标签:can   images   tab   输入   技术分享   image   ntb   表单   port   

原文地址:http://www.cnblogs.com/lyx1997/p/7878655.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!