完成注册功能

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

function fnzhuce() {
    var un = document.getElementById("username");
    var us = document.getElementById("password");
    var uE = document.getElementById("error_box");
    var uP = document.getElementById("userphone");
    var us2 = document.getElementById("password2");
    var isE = true;
    uE.innerHTML = '<br>';
    if (un.value.length < 6 || un.value.length > 20) {
        document.getElementById('error_box').innerHTML = "用户名必须在6-20个字符之间";
        isE = false;
        return isE;
    } else if ((un.value.charCodeAt(0) >= 48) && (un.value.charCodeAt(0) <= 57)) {
        uE.innerHTML = "用户名首字母不能为数字";
        isE = false;
        return isE;

    }
    else for (var i = 0; i < un.value.length; i++) {
            if (((un.value.charCodeAt(i) < 48) || (un.value.charCodeAt(i) > 57)) && ((un.value.charCodeAt(i) < 97) || (un.value.charCodeAt(i) > 122))) {
                uE.innerHTML = "用户名只能为数字或字母";
                isE = false;
                return isE;

            }

        }
    for (var i = 0; i < 12; i++) {
        if (((uP.value.charCodeAt(i) < 48) || (uP.value.charCodeAt(i) > 57)) || uP.value.length != 11) {
            uE.innerHTML = "请输入正确手机号";
            isE = false;
            return isE;
        }
    }

    if (us.value.length < 6 || us.value.length > 20) {
        document.getElementById('error_box').innerHTML = "密码必须在6-20个字符之间";
        isE = false;
        return isE;
    }
    if (us2.value != us.value) {
        uE.innerHTML = "两次输入的密码必须一致";
        isE = false;
        return isE;


    }
    return isE;
}

html文件：

  1. <form>中设置 action和method="post"
  2. <input> 中设置 name
<!DOCTYPE html>
<html lang="en">

<head>
    {% extends 'index.html' %}
    <meta charset="UTF-8">
    <title>{% block title %}
        注册页
    {% endblock %}</title>

    {% block head %}
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="{{ url_for('static',filename='javascript/zhuce.js') }}"></script>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/dl.css') }}">
    {% endblock %}
</head>
<body>
{% block body %}
    <form action="{{ url_for('register') }}" method="post" >
        <div id="zcjm" class="panel panel-info">
            <h2 class="deng" class="panel-title">注册</h2>
            <div id="nr2" class="panel-body">

                <div class="input_box">
                    Username :<input type="text" id="username" placeholder="请输入你的用户名" name="username">
                </div>
                <br>
                <div class="input_box">
                    Userphone:<input type="text" id="userphone" placeholder="请输入你的手机号" name="userphone">
                </div>
                <br>
                <div class="input_box">
                    Password : <input type="password" id="password" placeholder="请输入密码" name="password">
                </div>
                <br>
                <div class="input_box">
                    Password : <input type="password" id="password2" placeholder="请再次输入密码">
                </div>

                <div class="error_box" id="error_box"><br></div>
                <div class="bt">

                    <button class="zhuce" onclick="fnzhuce()">注册</button>
                </div>


            </div>


        </div>
    </form>
{% endblock %}

</body>
</html>
  1. 主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重定向到登录页

@app.route('/register/', methods=['GET', 'POST'])
def register():
    if request.method == 'GET':
        return render_template('zhuce.html')
    else:
        username = request.form.get('username')
        password = request.form.get('password')
        nickname = request.form.get('nickname')
        user = User.query.filter(User.username == username).first()
        if user:
            return "账户已存在"
        else:
            user = User(username=username, password=password, nickname=nickname)
            db.session.add(user)
            db.session.commit()
            return redirect(url_for('login'))

 

posted @ 2017-11-17 20:29  044潘育珊  阅读(237)  评论(0)  编辑  收藏  举报