前端代码整理-迷你登录页面
2017-08-20 22:21
791 查看
登录页面很多,但是我需要的是拿来即可用.不用重复造轮子的登录代码
我已经代码整理到一个页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>迷你登录</title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="default">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.3/layer.min.js"></script>
<style>
html {
}
body {
font-family: "Microsoft Yahei";
font-size: 12px;
margin: 0;
}
ul {
padding: 0;
margin: 0;
}
ul li {
list-style-type: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #f00;
}
.cl {
clear: both;
}
input[type="text"]:focus,
input[type="password"]:focus {
outline: none;
}
input::-ms-clear {
display: none;
}
.login {
border-bottom: none;
margin: 0px;
/*width: 370px;*/
}
.header {
border-bottom: 1px solid #e2e2e2;
position: relative;
font-family: "Microsoft Yahei";
background-color: #52B1E1;
height: 35px;
}
.header .switch {
/*position: absolute;*/
/*left: 60px;*/
bottom: 0;
font-size: 16px;
/*height: 45px;*/
}
.header .switch #switch_qlogin {
margin-right: 85px;
}
.header .switch .switch_btn {
color: #999;
display: inline-block;
height: 45px;
line-height: 45px;
outline: none;
*hide-focus: expression(this.hideFocus=true);
}
.header .switch .switch_btn_focus {
color: #333;
display: inline-block;
height: 45px;
line-height: 45px;
outline: none;
*hide-focus: expression(this.hideFocus=true);
}
.header .switch .switch_btn:hover {
color: #333;
text-decoration: none;
}
.header .switch .switch_btn_focus:hover {
text-decoration: none;
}
#switch_bottom {
position: absolute;
bottom: -1px;
_bottom: -2px;
border-bottom: 2px solid #848484;
}
.web_login {
position: relative;
/*width: 370px;*/
}
#web_login {
_left: 60px;
*left: 0;
}
.web_login .login_form {
width: 272px;
margin: 0 auto;
}
.web_login .reg_form {
width: 300px;
margin: 0 auto;
}
.web_login .input-tips {
float: left;
margin-top: 10px;
width: 50px;
height: 42px;
font-size: 16px;
line-height: 42px;
font-family: "Hiragino Sans GB", "Microsoft Yahei";
}
.web_login .input-tips2 {
float: left;
text-align: right;
padding-right: 10px;
width: 75px;
height: 30px;
font-size: 16px;
margin-top: 10px;
clear: both;
line-height: 30px;
font-family: "Hiragino Sans GB", "Microsoft Yahei";
}
.web_login .inputOuter {
width: 200px;
height: 42px;
margin-top: 10px;
float: left;
}
.web_login .inputOuter2 {
width: 200px;
margin-top: 6px;
margin-top: 5px \9;
float: left;
}
.web_login .inputOuter3 {
width: 218px;
margin-top: 6px;
margin-top: 5px \9;
float: left;
}
.web_login .inputstyle {
width: 200px;
height: 38px;
padding-left: 5px;
line-height: 30px;
line-height: 38px;
border: 1px solid #52B1E1;
background: #fff;
color: #333;
border-radius: 2px;
font-family: Verdana, Tahoma, Arial;
font-size: 16px;
}
.web_login input.inputstyle2:focus,
.web_login input.inputstyle:focus {
border: 1px solid #198BD4;
box-shadow: 0 0 2px #198BD4;
}
.web_login .inputstyle2 {
width: 200px;
height: 30px;
padding-left: 5px;
line-height: 30px;
/*border: 1px solid #D7D7D7;*/
border: 1px solid #52B1E1;
background: #fff;
color: #333;
border-radius: 2px;
font-family: Verdana, Tahoma, Arial;
font-size: 12px;
}
.web_login .uinArea {
height: 55px;
position: relative;
z-index: 10;
}
.web_login .pwdArea {
height: 55px;
margin-bottom: 10px;
position: relative;
z-index: 3;
}
.web_qr_login {
position: relative;
overflow: hidden;
}
.cue {
height: 40px;
line-height: 40px;
font-size: 14px;
border: 1px #CCCCCC solid;
margin-top: 10px;
margin-bottom: 5px;
text-align: center;
font-family: "Hiragino Sans GB", "Microsoft Yahei";
}
.login {
background-color: #ffffff;
}
h1 {
margin: 80px auto 50px auto;
text-align: center;
color: #fff;
margin-left: -25px;
font-size: 35px;
font-weight: bold;
text-shadow: 0px 1px 1px #555;
}
h1 sup {
font-size: 18px;
font-style: normal;
position: absolute;
margin-left: 10px;
}
.login {
border: 0;
background: #fff;
margin: 0 auto;
/*padding: 5px 0;*/
}
.web_login {
padding-bottom: 20px;
}
.jianyi {
color: #fff;
text-align: center;
margin-top: 25px;
color: #B3B8C4;
}
.reg_form li {
height: 55px;
}
.cue {
margin-top: 15px;
margin-bottom: 10px;
border: 1px solid #eee;
border-radius: 3px;
}
.web_login input.inputstyle2:focus,
.web_login input.inputstyle:focus {
border: 1px solid #5796f;
box-shadow: 0 0 0;
}
.web_login .reg_form {
margin: 0 auto;
width: 325px;
}
.web_login .inputstyle2 {
border-radius: 2px;
width: 215px;
}
.web_login .input-tips2 {
padding-right: 5px;
width: 80px;
_width: 75px;
_font-size: 12px;
}
.web_login .inputstyle3 {
border-radius: 2px;
width: 132px;
}
.web_login .inputstyle3 {
height: 30px;
padding-left: 5px;
line-height: 30px;
border: 1px solid #52B1E1;
background: #fff;
color: #333;
border-radius: 2px;
font-family: Verdana, Tahoma, Arial;
font-size: 12px;
}
.button_blue {
display: inline-block;
float: left;
height: 41px;
border-radius: 4px;
background: #2795dc;
border: none;
cursor: pointer;
border-bottom: 3px solid #0078b3;
*border-bottom: none;
color: #fff;
font-size: 16px;
padding: 0 10px;
*width: 140px;
text-align: center;
outline: none;
font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
input.button_blue:hover {
background: #0081c1;
border-bottom: 3px solid #006698;
*border-bottom: none;
color: #fff;
text-decoration: none;
}
a.zcxy {
text-decoration: underline;
line-height: 58px;
margin-left: 15px;
color: #959ca8;
cursor: pointer;
}
.web_login .login_form {
margin-top: 30px;
}
.web_login .uinArea {
height: 60px;
}
.header .switch {
/*left: 70px;*/
}
.getcode {
text-align: center;
height: 39px;
line-height: 39px;
border: #ccc 1px solid;
background: #2795dc;
border: none;
border-bottom: 3px solid #0078b3;
padding: 0px;
color: #fff;
font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
float: right;
}
.getcode:hover {
background: #0081c1;
border-bottom: 3px solid #006698;
color: #fff;
text-decoration: none;
}
.us_input {
border-radius: 4px;
font-size: 14px;
}
.text_input {
width: 76px;
height: 32px;
line-height: 32px;
padding: 0;
cursor: pointer;
}
.roe-sign {
display: none;
}
.roe-sign, .roe-login {
height: 35px;
line-height: 35px;
padding-left: 20px;
color: #fff;
}
.roe-sign strong, .roe-login strong {
font-size: 16px;
font-weight: normal;
}
.roe-sign span, .roe-login span {
font-size: 12px;
}
.roe-sign a, .roe-login a {
background-color: #D31E50;
padding: 3px 8px;
color: #fff;
font-size: 14px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="login">
<div class="header">
<div class="roe-sign">
<strong>注册账号 | </strong><span>已有账号，</span>
<a class="switch_btn_focus" id="switch_qlogin" href="javascript:;" tabindex="7">请登陆</a>
</div>
<div class="roe-login">
<strong>登陆 | </strong><span>还没有账号，</span>
<a class="switch_btn_focus" id="switch_login" href="javascript:;" tabindex="8">请注册</a>
</div>
</div>
<!--登录-->
<div class="web_qr_login" id="web_qr_login" style="display: block; height: 235px;">
<div class="web_login" id="web_login">
<div class="login-box">
<div class="login_form">
<form action="?act=login" method="post" enctype="application/x-www-form-urlencoded" name="loginform"
id="login_form" class="loginForm" onSubmit="return validates()">
<div class="uinArea" id="uinArea">
<label class="input-tips" for="username">帐号：</label>
<div class="inputOuter" id="uArea">
<input type="text" id="username" name="username" class="inputstyle"/>
</div>
</div>
<div class="pwdArea" id="pwdArea">
<label class="input-tips" for="password">密码：</label>
<div class="inputOuter" id="pArea">
<input type="password" id="password" name="password" class="inputstyle"/>
</div>
</div>
<div style="padding-left:30px;margin-top:20px;">
<input type="submit" value="登 录" style="width:150px;" class="button_blue"/>
<a onClick="layer.msg('忘记密码，请联系客服！',{shift: 6});" class="zcxy" target="_blank">忘记密码</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!--登录end-->
<!--注册-->
<div class="qlogin" id="qlogin" style="display: none; ">
<div class="web_login">
<form action="?act=reg" method="post" enctype="application/x-www-form-urlencoded" id="regUser">
<ul class="reg_form" id="reg-ul">
<div id="userCue" class="cue">快速注册请注意格式</div>
<li>
<label for="account" class="input-tips2">用户名：</label>
<div class="inputOuter2">
<input type="text" id="account" name="account" maxlength="16" class="inputstyle2" placeholder="2-10个字符"/>
</div>
</li>
<li>
<label for="nickname" class="input-tips2">昵称：</label>
<div class="inputOuter2">
<input type="text" id="nickname" name="nickName" class="inputstyle2" placeholder="中文/英文"/>
</div>
</li>
<li>
<label for="password_order" class="input-tips2">密码：</label>
<div class="inputOuter2">
<input placeholder="不少于6位" type="password" id="password_order" name="passwordOrder" maxlength="16" class="inputstyle2"/>
</div>
</li>
<li>
<label for="password_new" class="input-tips2">确认密码：</label>
<div class="inputOuter2">
<input placeholder="请输入相同的密码" type="password" id="password_new" name="passwordNew" maxlength="16" class="inputstyle2"/>
</div>
</li>
<!--<li>-->
<!--<label for="qq" class="input-tips2">QQ：</label>-->
<!--<div class="inputOuter2">-->
<!--<input placeholder="请输入QQ号" type="text" id="qq" name="qq" maxlength="12" class="inputstyle2"/>-->
<!--</div>-->
<!--</li>-->
<li>
<label for="phone" class="input-tips2">手机：</label>
<div class="inputOuter3">
<input onClick="getVerifyCode()" value="获取验证码" class="getcode text_input us_input getverify_sms " id="get_verification" type="button">
<input placeholder="请输入手机号" type="text" id="phone" name="phone" maxlength="11" class="inputstyle3"/>
</div>
</li>
<li>
<label for="yzm" class="input-tips2">验证码：</label>
<div class="inputOuter2">
<input type="text" id="yzm" name="yzm" maxlength="30" class="inputstyle2" placeholder="手机验证码"/>
</div>
</li>
<li>
<div class="inputArea">
<input type="submit" id="btnReg" style="margin-top:10px;margin-left:85px;" class="button_blue" value="免 费 注 册"/>
<a href="#" class="zcxy" target="_blank">注册协议</a>
</div>
</li>
<div class="cl"></div>
</ul>
</form>
</div>
</div>
<!--注册end-->
</div>
<script>
$(function () {
//切换登录
$('#switch_qlogin').click(function () {
$(this).parent().css('display', 'none');
$('.roe-login').css('display', 'block');
$('#qlogin').css('display', 'none');
$('#web_qr_login').css('display', 'block');
try {
parent.layer.iframeAuto(parent.layer.getFrameIndex(window.name));
} catch (e) {
}
});
//切换注册
$('#switch_login').click(function () {
$(this).parent().css('display', 'none');
$('.roe-sign').css('display', 'block');
$('#qlogin').css('display', 'block');
$('#web_qr_login').css('display', 'none');
try {
parent.layer.iframeAuto(parent.layer.getFrameIndex(window.name));
} catch (e) {
}
});
if (getParam("a") == '0') {
$('#switch_login').trigger('click');
}
});
//根据参数名
//urlparams 如果有a=0 则切换为注册,默认为登录页面
function getParam(pname) {
var params = location.search.substr(1); // 获取参数 平且去掉？
var ArrParam = params.split('&');
if (ArrParam.length == 1) {
//只有一个参数的情况
return params.split('=')[1];
}
else {
//多个参数参数的情况
for (var i = 0; i < ArrParam.length; i++) {
if (ArrParam[i].split('=')[0] == pname) {
return ArrParam[i].split('=')[1];
}
}
}
}
function checkusername(username) {
username = $.trim(username);
if (username == '') {
layer.msg('用户名不能为空！', {shift: 6});
$("#username").focus();
return false;
}
return true;
}
function checkpassword(pw) {
pw = $.trim(pw);
if (pw == '') {
layer.msg('密码不能为空！', {shift: 6});
$("#password").focus();
return false;
}
return true;
}
function validates() {
if (!checkusername($("#username").val()))return false;
if (!checkpassword($("#password").val()))return false;
}
$(document).ready(function () {
//点击[注册]按钮
$('#btnReg').click(function () {
//用户名不能为空
if ($.trim($('#account').val()) == "") {
$('#u').focus().css({
border: "1px solid red",
boxShadow: "0 0 2px red"
});
$('#userCue').html("<font color='red'><b>×用户名不能为空</b></font>");
return false;
}
// 验证昵称
if ($.trim($('#nickname').val()) == "") {
$('#nickname').focus().css({
border: "1px solid red",
boxShadow: "0 0 2px red"
});
$('#userCue').html("<font color='red'><b>×昵称不能为空</b></font>");
return false;
}
if ($('#account').val().length < 2 || $('#account').val().length > 10) {
$('#account').focus().css({
border: "1px solid red",
boxShadow: "0 0 2px red"
});
$('#userCue').html("<font color='red'><b>×用户名位2-10字符</b></font>");
return false;
}
$.ajax({
type: "GET",
url: '../ajax.php?act=regcheck',
data: "username=" + $("#account").val() + '&temp=' + new Date(),
dataType: 'html',
success: function (result) {
if (result != '1') {
$('#u').focus().css({
border: "1px solid red",
boxShadow: "0 0 2px red"
});
if (result == '-1')
$("#userCue").html("<font color='red'><b>×用户名含关键字，不能使用！</b></font>");
else if (result == '0')
$("#userCue").html("<font color='red'><b>×用户名被占用！</b></font>");
return false;
} else {
$('#u').css({
border: "1px solid #52B1E1",
boxShadow: "none"
});
}
}
});
var phone = /^1[0-9]{10}$/;
if ($.trim($('#phone').val()) == "" || !phone.test($('#phone').val())) {
$('#phone').focus().css({
border: "1px solid red",
boxShadow: "0 0 2px red"
});
$('#userCue').html("<font color='red'><b>×手机号格式不正确</b></font>");
return false;
}
// var sqq = /^[1-9]{1}[0-9]{4,9}$/;
// if (!sqq.test($('#qq').val()) || $('#qq').val().length < 5 || $('#qq').val().length > 12) {
// $('#qq').focus().css({
// border: "1px solid red",
// boxShadow: "0 0 2px red"
// });
// $('#userCue').html("<font color='red'><b>×QQ号码格式不正确</b></font>");
// return false;
// } else {
// $('#qq').css({
// border: "1px solid #D7D7D7",
// boxShadow: "none"
// });
//
// }
var msgonoff = 1;
if (msgonoff == 1) {
if ($.trim($('#yzm').val()) == "") {
$('#yzm').focus().css({
border: "1px solid red",
boxShadow: "0 0 2px red"
});
$('#userCue').html("<font color='red'><b>×验证码不能为空</b></font>");
return false;
}
}
if ($('#password_order').val().length < 6) {
$('#password_order').focus();
$('#userCue').html("<font color='red'><b>×密码不能小于" + 6 + "位</b></font>");
return false;
}
if ($('#password_new').val() != $('#p').val()) {
$('#password_new').focus();
$('#userCue').html("<font color='red'><b>×两次密码不一致！</b></font>");
return false;
}
$('#password_new').css({
border: "1px solid #D7D7D7",
boxShadow: "none"
});
$('#userCue').html("<font ><b>正在注册中...</b></font>");
$('#regUser').submit();
})
//获取手机验证码
function getVerifyCode() {
var phone = $('#phone').val()
var phoneValidation = /^1[0-9]{10}$/;
if (!phoneValidation.test(phone)) {
$('#phone').focus().css({
border: "1px solid red",
boxShadow: "0 0 2px red"
});
layer.msg('请正确输入手机号码！', {shift: 6});
return false;
}
$.post(
"/apps/suiji_duanxin.php?action=call_yzm",
{phone: phone},
function (data) {
if (data['status'] == 1) {
layer.msg('手机验证码将以短信方式发送到您的手机，请注意接收！！', {shift: 6});
verification_countdown--;
u_class = '.getverify_sms';
verification_settime(u_class);
$(u_class).attr('disabled', true);
} else {
layer.msg('发送失败！请正确填写手机号码！', {shift: 6});
u_class = '.getverify_sms';
verification_settime(u_class);
}
}, 'json');
}
//禁止60秒
var verification_countdown = 60;
var verification_timeID;
var verification_timeID_array = new Array();
function verification_settime(u_class) {
if (verification_countdown == 0) {
verification_countdown = 60;
$(u_class).removeAttr('disabled');
$(u_class).val('获取验证码');
for (i = 0; i < verification_timeID_array.length; i++) {
clearTimeout(verification_timeID_array[i]);
}
verification_timeID_array = new Array();
} else if (verification_countdown == 60) {
} else {
$(u_class).val(verification_countdown)
verification_countdown--;
verification_timeID = setTimeout(function () {
verification_settime(u_class)
}, 1000)
verification_timeID_array.push(verification_timeID)
}
}
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签
- 根据邮箱的域名跳转到相应的登录页面的代码
- Android【WebView】 防止调用系统浏览器打开页面 看了好多朋友写的代码我在整理了
- 凑热闹！小米抢购手机页面前端代码分析
- 前端之用户登录页面
- 源码推荐(01.08B)：一行代码搞定倒计时，登录注册找回密码页面逻辑
- 【html】【一个简单的用户登录页面代码】
- 页面跳转代码整理
- Web前端代码规范与页面布局
- JBuilder2005实战JSP之登录页面实现代码[图]
- java web SpringMVC后端传json数据到前端页面实例代码
- 2、简单的登录页面与前端交互
- 1f12可以查看最终的静态html页面，和JavaScript源代码 ，那自己写js源码不就泄露了吗 2由JavaScript代码暴露，重新认识”前端“和”后端“
- 微擎前端页面写PHP代码
- winform多线程方式登录代码整理
- jsp中未登录用户也可以浏览页面的功能实现代码
- jsp_首先利用纯HTML写一个简单的登录页面以及后台处理页面【代码】
- 使用Jquery搭建最佳用户体验的登录页面 之 记住密码自动登录功能，（含后台代码）