完成注册功能

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

 

html代码:

  

 1 {% extends 'index.html' %}
 2 {% block title %}
 3     注册
 4 {% endblock %}
 5 
 6 {% block link %}
 7 
 8 {% endblock %}
 9 
10 {% block box %}
11     <div class="regis_box regis_box_on" id="box">
12         <!--css-->
13         <div class="">
14             <!--头部提示-->
15             <div class="font_title">
16                 注册新用户
17                 <hr class="">
18             </div>
19             <!--表单-->
20             <form class="layui-form" role="form" id="form_regis" method="post" action="{{ url_for('regist') }}" name="form_regis"
21                   onSubmit="return registration()">
22                 <!--每一行-->
23                 <div class="layui-form-item">
24                     <label class="layui-form-label">登录帐号</label>
25                     <div class="layui-input-block">
26                         <input type="text" name="user_name" id="user_name" autocomplete="off" placeholder="登录用户名,不少于6个字符"
27                                class="layui-input">
28                     </div>
29                 </div>
30 
31                 <div class="layui-form-item">
32                     <label class="layui-form-label">显示名称</label>
33                     <div class="layui-input-block">
34                         <input type="text" name="user_title" autocomplete="off" placeholder="显示名称" class="layui-input">
35                     </div>
36                 </div>
37 
38                 <div class="layui-form-item">
39                     <label class="layui-form-label">密码</label>
40                     <div class="layui-input-block">
41                         <input type="password" name="user_password" placeholder="密码6到20位,只能包含字母、数字" autocomplete="off"
42                                class="layui-input">
43                     </div>
44                 </div>
45 
46                 <div class="layui-form-item">
47                     <label class="layui-form-label">确认密码</label>
48                     <div class="layui-input-block">
49                         <input type="password" name="check_password" placeholder="请输入确认密码" autocomplete="off"
50                                class="layui-input">
51                     </div>
52                 </div>
53                 <div id="error_box" style="color: red;">
54                     <br>
55                 </div>
56                 <!--注册按钮-->
57                 <div class="btn_submit_regis">
58                     <button type="submit" class="layui-btn layui-btn-normal">注册</button>
59                 </div>
60                 <!--协议提示-->
61             </form>
62         </div>
63     </div>
64     <script>
65         $('#user_name').change(function () {
66             $.get(
67                 '{{ url_for('regist') }}',
68                 {
69                     user_name :  $('#user_name').val()
70                 },
71                 function (data) {
72                     if(data != 'ok')
73                         $('#error_box').html(data)
74                 }
75             )
76         })
77     </script>
78 {% endblock %}

 

javascript代码:

 

 1 function registration() {
 2     var oError = document.getElementById('error_box');
 3     oError.innerHTML = "<br>";
 4     if (form_regis.user_name.value.length < 6 || form_regis.user_name.value.length > 20) {
 5         oError.innerHTML = '用户名请在6到20位之间';
 6         return false;
 7     } else if ((form_regis.user_name.value.charCodeAt(0) >= 48) && (form_regis.user_name.value.charCodeAt(0) <= 57)) {
 8         oError.innerHTML = '首字母不可为数字';
 9         return false;
10     } else for (var i = 0; i < form_regis.user_name.value.length; i++) {
11         if (
12             ((form_regis.user_name.value.charCodeAt(i) < 48) || (form_regis.user_name.value.charCodeAt(i) > 57))
13             &&
14             ((form_regis.user_name.value.charCodeAt(i) < 97) || (form_regis.user_name.value.charCodeAt(i) > 122))
15         ) {
16             oError.innerHTML = '用户名只能包含数字和小写字母';
17             return false;
18         }
19     }
20 
21     if (form_regis.user_password.value.length < 6 || form_regis.user_password.value.length > 20) {
22         oError.innerHTML = '密码请在6到20位之间';
23         return false;
24     } else if (form_regis.user_password.value != form_regis.check_password.value) {
25         oError.innerHTML = '两次密码不一样';
26         return false;
27     }
28     return true;
29 }

 

 

python代码:

 1 from flask import Flask, render_template,request,redirect,url_for
 2 from flask_sqlalchemy import SQLAlchemy
 3 import congif
 4 
 5 
 6 app = Flask(__name__)
 7 app.config.from_object(congif)
 8 db = SQLAlchemy(app)
 9 class User(db.Model):
10     __tablename__ = 'user'
11     id = db.Column(db.INTEGER,primary_key=True,autoincrement=True) # 数据库唯识别id
12     name = db.Column(db.String(20), nullable=False)  # 登录账号名
13     title = db.Column(db.String(30)) # 显示名称
14     password = db.Column(db.String(20),nullable=False) #密码
15     truename = db.Column(db.String(10)) # 真实姓名
16     sex = db.Column(db.String(1),default='0') # 性别
17     phone = db.Column(db.String(11)) # 电话号码
18     email = db.Column(db.String(40)) # 邮箱
19     logo = db.Column(db.String(50)) # 头像
20     qq = db.Column(db.String(11)) # qq号码
21     createdate = db.Column(db.DATETIME) # 注册日期
22     level = db.Column(db.String(2)) # 用户等级
23     address = db.Column(db.String(60)) # 用户住址
24 # db.create_all()
25 
26 # 增加一条数据
27 # user = User(name = 'xiao',password = '123')
28 # db.session.add(user)
29 # db.session.commit()
30 
31 # 查询一条数据
32 # user = User.query.filter(User.name=='xiao').first()
33 # print(user.name,user.password)
34 
35 # 更改一条数据
36 # user = User.query.filter(User.name=='xiao').first()
37 # user.password = 'xxx'
38 # db.session.commit()
39 
40 # 删除一条数据
41 # user = User.query.filter(User.name=='xiao').first()
42 # db.session.delete(user)
43 # db.session.commit()
44 
45 
46 @app.route('/login/',methods=['GET','POST'])
47 def login():
48     return render_template('login.html')
49 
50 @app.route('/regist/',methods=['GET','POST'])
51 def regist():
52     if request.method == 'GET':
53         user_name = request.args.get('user_name')
54         if user_name:
55             user = User.query.filter(User.name == user_name).first()
56             if user:
57                 return '用户已存在'
58             else:
59                 return 'ok'
60         else:
61             return render_template('regist.html')
62     else:
63         user_name = request.form.get('user_name')
64         user_title = request.form.get('user_title')
65         user_password = request.form.get('user_password')
66         user = User(name = user_name , title = user_title , password = user_password)
67         if user:
68             return 'error:user exitst'
69         else:
70             db.session.add(user) #加入数据库
71             db.session.commit()
72             return redirect(url_for('login'))
73 
74 @app.route('/',methods=['GET','POST'])
75 def index():
76     return render_template('index.html')
77 
78 @app.route('/posted/',methods=['GET','POST'])
79 def posted():
80     return render_template('posted.html')
81 
82 if __name__ == '__main__':
83     app.run(debug=True)

 

posted @ 2017-11-17 09:58  AllianceHacke  阅读(252)  评论(0编辑  收藏  举报