标签：style blog color java 使用 os io 数据
//----------------------------------------------------------------------------------------------- //----------------------------------------------------------------------------------------------- //静态页面 <!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; }
jquey ui 实现注册，邮箱自动补全,布布扣,bubuko.com
标签：style blog color java 使用 os io 数据
原文地址：http://www.cnblogs.com/lxdd/p/3923489.html
