jquey ui 实现注册，邮箱自动补全
2014-08-19 22:53
337 查看
//-----------------------------------------------------------------------------------------------
//-----------------------------------------------------------------------------------------------
//静态页面
<!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">©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(' ').addClass('loading');
},
//注意此处只能用complete，使用success是无效的
complete : function(jqXHR) {
//注意此处只能用true，跟false的返回值
if(jqXHR.responseText == 'true') {
$('#username').next().removeClass('loading').html(' ').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(' ').addClass('loading');
},
complete : function(jqXHR) {
if(jqXHR.responseText) {
$('#email').next().removeClass('loading').html(' ').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(' ').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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery实现邮箱自动补全功能示例分享
- jQuery实现Email邮箱地址自动补全功能代码
- jquery css实现邮箱自动补全
- 使用js实现的邮箱自动补全
- 使用VB实现邮箱自动注册（二）：修改代理服务器
- jQuery实现邮箱下拉列表自动补全功能
- jquery实现邮箱自动补全功能示例分享
- Android实现登录邮箱的自动补全功能
- js实现的邮箱自动补全
- jquery 实现输入邮箱时自动补全下拉提示功能
- JS实现在输入框内输入@时，邮箱账号自动补全
- 使用VB实现邮箱自动注册（一）：表单自动提交
- 使用VB实现邮箱自动注册（二）：修改代理服务器
- jquery 实现输入邮箱时自动补全下拉提示功能
- 邮箱登录或注册时，实现密码明密文切换以及邮箱自动匹配
- 制作一个注册网页（2）并实现自动发送邮箱
- jQuery 实现邮箱下拉列表自动补全功能
- jQuery 实现邮箱下拉列表自动补全功能
- jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
- jQuery实现文本框邮箱输入自动补全效果