博客-注册功能

 前台界面 ，很丑陋，对css 比较麻木 就这样了。

 

需求：

1 手机号码只能注册一次，

2 用户名不能想通，密码长度为8-15之间，前台不校验了 ，直接用WTForms 验证。

3 两次密码要一致 ，直接用js 比较

4 注册成功跳转到 新页面

 

这里不用wtforms 渲染模版了，因为通常页面都是前端提供，他们不会去了解 wtform 渲染页面，我们也没有必要拿前端的页面 再用 wtform 改造。所以我也只是了解。

 这里没有结合蓝图了。直接把业务代码写在了app主文件里面了。

首先定义好模型，新建 model.py

from exts import db
from datetime import datetime
from werkzeug.security import generate_password_hash,check_password_hash

class User(db.Model):
    __tablename__='user'
    id=db.Column(db.Integer,primary_key=True,autoincrement=True)
    telephthon=db.Column(db.String(15),nullable=False)
    name=db.Column(db.String(15),nullable=False)
    passwd=db.Column(db.String(50),nullable=False)


    def __init__(self,telephthon,name,passwd):
        self.telephthon=telephthon
        # self.birthday=birthday
        self.passwd=passwd
        self.name=name

 

定义表单类 forms.py：

#encoding:utf-8
import sys
reload(sys)
sys.setdefaultencoding('utf-8')
from wtforms import Form,StringField,IntegerField
from wtforms.validators import Length,EqualTo,Email,InputRequired,NumberRange,ValidationError
import re
class RegisterForm(Form):
    # 对于电话号码， wtforms 没有提供验证器  所以需要我们自己实现一个电话号码的验证器（自定义验证器）
    telephone=StringField(validators=[Length(max=15)])  
    username=StringField(validators=[Length(max=15)])
    password1=StringField(validators=[Length(min=8,max=50)])
    password2 = StringField(validators=[Length(min=8,max=50),EqualTo('password1')])
    
    # 这里是自定义的验证方法（验证器）
    # 规则 validate_字段名  ，当对telephone 验证时，会自动调用者个方法 .主要验证手机的长度
    def validate_telephone(self,field):
        print "+++++++++++++++++++++++++++++++++++"
        print type(field),type(field.data),field.data
        str=field.data 
        print '-------',str,'----------'
        matchObj = re.match(r'1[3587]\d{9}$',str,re.I)   //通过正则表达式验证 验证手机号码，不严谨 主要是学习自定义验证器的使用方法。
        if matchObj:
            # 如果是电话号码就什么也不做，不返回提示了。
            pass
        else:
            # 如果不是电话号码 就ValidationError 方法提示 。
            raise ValidationError('It\'s not a phone number')

 

前台页面：

{% extends 'basic.html' %}        // 继承模版
{% block title %}
    <title>简博客-注册用户</title>
{% endblock %}
{% block staticfile %}
    <script src="{{ url_for('static',filename='js/register.js') }}"></script>
{% endblock %}
{% block body %}
       <div class="container">
        <div class="row" style="margin-top: 20px;">
            <!-- 登录窗口-->
            <div class="col-md-offset-4">
            <div class="form-horizontal">
              <div class="form-group">
                <label for="username" class="col-sm-2 control-label">手机号</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" name="telephone" id="telephone" placeholder="手机号码">
                </div>
              </div>
              <div class="form-group">
                <label for="username" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" name="username" id="username" placeholder="用户名">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword1" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-4">
                  <input type="password" class="form-control" name="password1" id="password1" placeholder="密码" data-container="body" data-toggle="popover" data-placement="right"
            data-content="密码不能为空">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword2" class="col-sm-2 control-label">确认密码</label>
                <div class="col-sm-4">
                  <input type="password" class="form-control" name="password2"  id="password2" placeholder="确认密码">
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button id="btn" type="button" class="btn btn-primary">登录</button>
                </div>
              </div>
            </div>
            </div>
        </div>
    </div>
{% endblock %}

需求1：  手机号码只能注册一次，

    $('#telephone').mouseout(function () {   // 这里有个问题 如果使用table键切换的话，mouseout事件就不会触发,用户名，密码这些校验就不会及时提示。也算是小bug,所以最好是找现成的插件改吧改吧
        var tphone=$('#telephone').val();
        $.get('/gettPhone',{"tphone":tphone},function (data) {
            if(data=='1'){
                alert('手机号码已经注册');
                return false;
            }
        })
    })

 

视图方法：

@app.route('/gettPhone',methods=['GET'])
def gettPhone():
    tphone=request.args.get('tphone');
    print '---------',tphone
    u=User.query.filter(User.telephthon==tphone).first()
    if u:
        return str(1)
    else:
        return str(0)

需求2： 用户名不能相同，密码长度为8-15之间，前台不校验了 ，直接用WTForms 验证。

    $('#username').mouseout(function () {
        var uname=$('#username').val();
        $.get('/getUesr',{"uname":uname},function (data) {
            if(data=='1'){
                alert('用户已经注册');
                return false;
            }
        })
    })

视图方法
@app.route('/getUesr',methods=['GET'])
def getUesr():
    uname=request.args.get('uname');
    print '---------',uname
    u=User.query.filter(User.name==uname).first()
    if u:
        return str(1)
    else:
        return str(0)

需求3： 两次密码要一致 ，直接用js 比较

        var passwd1=$('#password1').val();
        var passwd2=$('#password2').val();
        if(passwd1!=passwd2){
            alert('两次输入的密码不一致')
            return false;
        }

需求4 ：注册成功跳转到 新页面

    $('#btn').click(function () {
        var tphone=$('#telephone').val();
        var name=$('#username').val();
        var passwd1=$('#password1').val();
        var passwd2=$('#password2').val();

        if(passwd1!=passwd2){
            alert('两次输入的密码不一致')
            return false;
        }
        if(tphone==''||name==''||passwd1==''){
            alert('有信息没有输入完成')
            return false;
        }
        $.ajax({
               type: "POST",
               url: "/register",
               data: "telephone="+tphone+"&"+"username="+name+"&"+"password1="+passwd1+"&"+"password2="+passwd2,
               success:function(data){
                   setTimeout(function () {
                      alert('注册成功!'+data);
                      window.location.href='/'  //注册成功1.5秒后跳转到首页
                  }, 1500);
              }
        })
    })