jquey ui 实现注册，邮箱自动补全 

//-----------------------------------------------------------------------------------------------
//-----------------------------------------------------------------------------------------------
//静态页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微博系统--登录</title>
<script type="text/javascript" src="__JS__/jquery.js"></script>
<link rel="stylesheet" href="__CSS__/jquery.ui.css">
<link rel="stylesheet" href="__CSS__/login.css">
</head>
<body>

<div id="header">
    
</div>

<div id="main">
    <div class="top">
        <form id="login">
            <input type="text" name="user" placeholder="请输入用户名">
            <input type="password" name="password" placeholder="请输入密码">
            <input type="submit" value="注册" />
        </form>
    </div>
    <div class="bottom">
        <a href="javascript:void(0)" id="reg">注册新用户</a>　｜　<a href="javascript:void(0)">忘记密码？</a>
    </div>
</div>

<div id="footer"></div>
<p class="footer">&copy;2009-2014 瓢城 Web 俱乐部. Powered by ThinkPHP.</p>

<form id="reg_dialog">
    <ol class="reg_error">
        
    </ol>
    <p>
        <label for="username">账号：</label>
        <input type="text" name="username" class="text" id="username" placeholder="昵称，不得少于2位">
        <span class="red">*</span>
    </p>
    <p>
        <label for="password">密码：</label>
        <input type="password" name="password" class="text" id="password" placeholder="密码，不少于6位">
        <span class="red">*</span>
    </p>
    <p>
        <label for="email">邮箱：</label>
        <input type="text" name="email" class="text" id="email" placeholder="邮箱，用于找回密码">
        <span class="red">*</span>
    </p>
</form>
<div id="loading">提交数据中，请您稍后...</div>
</body>
</html>
<script type="text/javascript" src="__JS__/jquery.ui.js"></script>
<script type="text/javascript" src="__JS__/login.js"></script>
<script type="text/javascript" src="__JS__/jquery.form.js"></script>
<script type="text/javascript" src="__JS__/jquery.validate.js"></script>

<script type="text/javascript">
//采用这种方式来个js页面来传值
    var ThinkPHP = {
        'IMG' : '__PUBLIC__/{:MODULE_NAME}/img/',
        'REG' : '__MODULE__/',
    };
</script>
------------------------------------------------------------------------------------------------ 
//css页面
@CHARSET "UTF-8";
/*
自定义 jQuery UI 皮肤
*/
.ui-dialog {
    padding:0 !important;
    border-radius:0 !important;
    border:1px solid #666 !important;
}
.ui-dialog-titlebar {
    height:37px !important;
    border-bottom:none !important;
    border-radius:0 !important;
    padding:0 !important;
    background:url(../img/ui_header_bg.png) !important;
    border:1px solid #fff !important;
}
.ui-dialog-title {
    height:37px !important;
    line-height:35px !important;
    font-size:14px !important;
    text-indent:10px !important;
    color:#333 !important;
}
.ui-dialog-content {
width:100% !important;
}
.ui-dialog-buttonset button {
    height:35px !important;
    background:url(../img/button.png) !important;
    border:none !important;
    color:#fff !important;
}
.ui-dialog-buttonset button:hover {
    background:url(../img/button_hover.png) !important;
}
.ui-dialog-titlebar-close {
    background:url(../img/ui_header_bg.png) !important;
}
.ui-corner-all {
    overflow:visible;
}
body {
    margin:0;
    padding:0;
    font-family:'微软雅黑';
}
#header {
    background:url(../img/logo.png) no-repeat;
    width:198px;
    height:60px;
    margin:0 auto;
    position:relative;
    top:150px;
}
#main {
    text-align:center;
    position:relative;
    top:210px;
}
#login input[type="text"],#login input[type="password"] {
    width:250px;
    height:25px;
    background:#000;
    border:1px solid #fff;
    color:#fff;
    border-radius:5px;
    font-size:18px;
    padding:10px;
    line-height:25px;
    margin-right:15px;
}
#login input[type="submit"] {
    width:150px;
    height:50px;
    border:none;
    font-size:24px;
    font-weight:bold;
    background:url(../img/login_button.png) repeat-x;
    position:relative;
    top:-2px;
}
#login input[type="submit"]:hover {
    background:url(../img/login_button_hover.png) repeat-x;
}
#main .bottom {
    margin:0 auto;
    text-align:right;
    width:380px;
}
#main .bottom a {
    color:#eee;
    font-size:14px;
    text-decoration:none;
    text-shadow:3px 3px 3px #333;
    padding:10px;
}
#main .bottom a:hover {
    text-decoration:underline;
    color:#ccc;
}
#footer {
    width:100%;
    height:40px;
    background:#000;
    position:absolute;
    bottom:0px;
    opacity:0.4;
    filter:alpha(opacity=40);
    -moz-opacity:0.4;
}
p.footer {
    color:#eee;
    font-size:13px;
    width:100%;
    text-align:center;
    position:absolute;
    bottom:0px;
}
#reg_dialog input.text {
    width:270px;
    height:25px;
    border-radius:5px;
    border:1px solid #ccc;
    background:#fff;
}
#reg_dialog span.red {
    color:red;
}
#reg_dialog span.succ {
    width:38px;
    display:inline-block;
    background:url(../img/success.gif) no-repeat center;
}
#reg_dialog span.loading {
    width:38px;
    display:inline-block;
    background:url(../img/loading_form.gif) no-repeat center;
}
#reg_dialog ol.reg_error {
    color:red;
    font-size:12px;
}
#reg_dialog ol.reg_error li {
    height:20px;
}
#loading {
    background:url(../img/loading.gif) no-repeat 20px center;
    text-indent:50px;
    line-height:25px;
    font-size:14px;
    letter-spacing:2px;
}
.ui-menu-item {
    padding:0 !important;
    width:100% !important;
}
.ui-menu-item a {
    width:100% !important;
    height:30px !important;
    text-indent:5px !important;
    line-height:30px !important;
    display:inline-block !important;
    font-size:12px;
    color:#666 !important;
}
.ui-menu-item a.ui-state-focus {
    color:#036 !important;
    background:url(../img/menu_bg.png) !important;
}
//js页面
$(function () {

    var rand = Math.round(1 + Math.random() * (5-1));
    $('body').css('background','url('+ThinkPHP['IMG']+'/login_bg'+rand+'.jpg) no-repeat').css('background-size','100%');

    //login button
    $('input[type="submit"]').button();

    //reg dialog，弹出对话框
    $('#reg_dialog').dialog({
        title         : '请填写注册信息',
        width        : 430,
        height        : 300,
        autoOpen    : false,
        //是否开启幕布
        modal        : true,
        resizable     : false,
        closeText     : '关闭',
        buttons     : [{
            text     : '提交',
            click     : function(e) {
                $(this).submit();
            },
        }],
        //validate是对数据进行验证，主要分为，rules，messages，error，submit这几部分
    }).validate({
        submitHandler : function(form) {
            $(form).ajaxSubmit({
                type    : 'post',
                dataType: 'text',
                url     : ThinkPHP['REG'] + 'User/register',
                beforeSubmit    : function() {
                    //打开loading，锁定提交按钮
                    $('#loading').dialog('open');
                    $('#reg_dialog').dialog('widget').find('button').eq(1).button('disable');
                },
                success : function(res) {
                    if(res) {
                        //成功
                        $('#loading').css('background','url('+ThinkPHP['IMG']+'success.gif) no-repeat 20px center').html('恭喜您，注册成功！');
                    }else {
                        //失败
                        $('#loading').css('background','url('+ThinkPHP['IMG']+'error.png) no-repeat 20px center').html('很抱歉，注册失败！请重试！');
                    }
                    setTimeout(function() {
                        $('#loading').dialog('close');
                        $('#reg_dialog').dialog('close');
                        //注意，还原的内容也要写在setTimeout里面才可以
                        //还原
                        $('#loading').css('background','url('+ThinkPHP['IMG']+'loading.gif) no-repeat 20px center').html('提交数据中，请您稍后...');
                        $('#reg_dialog').dialog('widget').find('button').eq(1).button('enable');
                        $('#reg_dialog').resetForm();
                        $('#reg_dialog span.red').removeClass('succ').html('*');
                    },1000);

                },
            });
        },
        rules         : {
            username     : {
                required     : true,
                minlength     : 2,
                maxlength    : 20,
                remote         : {
                    url     : ThinkPHP['REG'] + 'User/checkUserUnique',
                    type     : 'post',
                    beforeSend : function() {
                        $('#username').next().removeClass('succ').html('&nbsp;').addClass('loading');
                    },
                    //注意此处只能用complete，使用success是无效的
                    complete : function(jqXHR) {
                        //注意此处只能用true，跟false的返回值
                        if(jqXHR.responseText == 'true') {
                            $('#username').next().removeClass('loading').html('&nbsp;').addClass('succ');
                            $('#username').css('border','1px solid green');
                        }else{
                            $('#username').next().removeClass('succ').removeClass('loading').html('*').addClass('red');
                            $('#username').css('border','1px solid red');
                        }
                    },
                },
            },
            password     : {
                required     : true,
                minlength     : 6,
                maxlength     : 50,
            },
            email         : {
                required     : true,
                email         : true,
                remote         : {
                    url     : ThinkPHP['REG'] + 'User/checkEmailUnique',
                    type     : 'post',
                    beforeSend : function() {
                        $('#email').next().removeClass('succ').html('&nbsp;').addClass('loading');
                    },
                    complete : function(jqXHR) {
                        if(jqXHR.responseText) {
                            $('#email').next().removeClass('loading').html('&nbsp;').addClass('succ');
                            $('#email').css('border','1px solid green');
                        }else{
                            $('#email').next().removeClass('succ').removeClass('loading').html('*').addClass('red');
                            $('#email').css('border','1px solid red');
                        }
                    },
                },
            },
        },
        messages    : {
            username     : {
                required     : '用户名不能为空',
                minlength    : $.format('用户名不能少于{0}位'),
                maxlength     : $.format('用户名不能大于{0}位'),
                remote         : '很抱歉，该用户名已经被注册',
            },
            password     : {
                required     : '密码不能为空',
                minlength    : $.format('密码不能小于{0}位'),
                maxlength     : $.format('密码不能大于{0}位'),
            },
            email         : {
                required     : '邮箱不能为空',
                email         : '电子邮件格式不正确',
                remote         : '很抱歉，该邮箱已经被注册',
            },
        },
        /*设置错误显示*/
        highlight     : function(element , errorclass) {
            $(element).css('border','1px solid red');
            $(element).next().html('*').removeClass('succ');
        },
        unhighlight : function(element , errorclass) {
            $(element).css('border','1px solid green');
            $(element).next().html('&nbsp').addClass('succ');
        },
        errorLabelContainer     : 'ol.reg_error',
        wrapper                    : 'li',
        showErrors     : function(errorMap ,errorList) {
            //获取错误个数，依靠个数来改变dialog的高度
            var error_num         = this.numberOfInvalids();
            if(error_num > 0)
                $('#reg_dialog').dialog('option','height',error_num * 20 + 300);
            else 
                $('#reg_dialog').dialog('option','height',300);
            //必要的，是声明仍旧采用默认的错误显示模式，这样lo.reg_error才有用
            this.defaultShowErrors();
        },
        /*设置错误显示*/
    });

    //click open reg
    $('#reg').click(function() {
        $('#reg_dialog').dialog('open');
    });

    //loading dialog
    $('#loading').dialog({
        width        : 340,
        //会自动增加40的内边距，所以用40即可
        height        : 40,
        autoOpen    : false,
        resizable    : false,
        modal        : true,
        //是否可以通过esc关闭
        closeOnEscape : false,
        //是否可以移动
        draggable     : false,
        //隐藏头部
    }).parent().find('.ui-widget-header').hide();

    //email autocomplete
    $('#email').autocomplete({
        delay         : 0,
        autoFocus    : true,
        source        : function(request,response) {
            var hosts         = ['qq.com','163.com','126.com','sina.com.cn','gmail.com','hotmail.com'],
                term         = request.term,    //获取用户输入的内容
                name         = term,    //邮箱的用户名
                host         = '', //邮箱的域名
                ix            = term.indexOf('@'),//获取@符号出现的位置
                result         = [];//最终呈现的列表

            //当有@符号的时候，重新分配用户名和域名
            if(ix > -1) {
                name     = term.slice(0,ix);
                host     = term.slice(ix+1);
            }

            //如果用户名存在，那么开始检测是否有输入@，如果有，那么显示相关的，如果没有，显示全部
            if(name) {    
                var findedHosts     = (host ? $.grep(hosts,function(value,index) {
                    return value.indexOf(host) > -1 
                }) : hosts),
                    findedResult     = $.map(findedHosts,function(value,index) {
                        return name + '@' + value;
                    });
                result = result.concat(findedResult);
            }
            response(result);
        },
    });
});
//php端
<?php
    /*
        用户控制器
        @author         lxd
        @phpversion        5.3.28
        @date            2014-8-13 20:34:55
    */
    namespace Home\Controller;
    use Think\Controller;
    class UserController extends Controller {
        private $User         = null;

        public function __construct() {
            parent::__construct();
            $this->User     = D('User');
        }

        //用户注册
        public function register() {

            //自动验证
            if(!$this->User->create()){
                echo $this->User->getError();die;
            }

            //新增
            $res             = $this->User->add();
            if($res < 1)
                die('0');
            else 
                echo $res;
        }

        //ajax验证用户名唯一性
        public function checkUserUnique() {
            $data         = I('post.username');
            $condition['username']     = $data;
            //调用方法验证
            echo $this->User->checkUnique($condition) ? 'true' : 'false';
        }

        //ajax验证邮箱唯一性
        public function checkEmailUnique() {
            $data         = I('post.email');
            $condition['email']     = $data;
            //调用方法验证
            echo $this->User->checkUnique($condition) ? 'true' : 'false';
        }
    }
//model
//model页面

//验证用户名或者邮箱唯一性
public function checkUnique($condition) {
    return $this->field('id')->where($condition)->find() ? 0 : 1;
}
posted @ 2014-08-19 22:53  栋的博客  阅读(294)  评论(0)  编辑  收藏  举报
深入理解php php扩展开发 docker mongodb