<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>登录/注册</title>
<meta charset="utf-8">
<meta name="keywords" content="City，城市，轻奢城市，Air，空气，畅快呼吸，King，王者，甜品之王，Easy，简单，简单生活，Back，回归，回归自由，Our，自我，感受自我，Sex，性感，性感人生，Sweet，甜蜜，甜蜜口味" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable = no">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1, minimum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="${ctx}/static/css/register.css">
<link rel="stylesheet" href="${ctx}/static/js/css/layer.css">
<script src="${ctx}/static/js/jquery-1.12.0.min.js"></script>
<script src="${ctx}/static/js/layer.js" type="text/javascript"></script>
</head>
<body scroll="no">
<div class="login-createid">
<div class="loginall-all">
<div class="login-all-content" scroll="no">
<div class="login-all">
<div class="login1">
<div class="login-header">
<a href="javascript:history.back(-1);"></a>
<div>登录/注册</div>
</div>
<div class="box">
<div class="content">
<div class="title-text">请输入您的手机号码</div>
<input id="phone" value="" class="form-control phone"
placeholder="请输入手机号码" maxlength="11" type="tel"
autocomplete="off" required>
<div class="delete" id="delete">
<div></div>
</div>
</div>
</div>
<div id="input-tip" class="input-tip"></div>
<div class="box">
<div class="ui-checkbox">
<input type="checkbox" value="1" id="agreement" name="agreement"
checked="checked" class="reg-check" maxlength="13"> <label
for="checkboxFourInput"></label>
<div class="a-link">
阅读并同意<a href="../static/html/userAgreement.html" target="_blank">《cakeboss网站服务协议》</a>
</div>
</div>
</div>
<div class="login">
<input type="button" value="下一步" class="btn btn-bottom" id="btn">
</div>
<div class="login-logo">
<img alt="logo" src="${ctx}/static/images/cakebossphone/logo.png">
<div>甜品中心</div>
</div>
</div>
<div class="register">
<div class="login-header">
<a></a>
<div>注册</div>
</div>
<div class="box">
<div class="content">
<div class="title-text">拥有您的cakeboss账号</div>
<div class="input-password">
<input id="password" value="" class="form-control password"
placeholder="请设置密码" type="password" autocomplete="off"
maxlength="20"
onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')" required>
<div class="delete1" id="delete1">
<div></div>
</div>
<img src="${ctx}/static/images/password-icon.png" id="eyes_box"
class="eyes_box" data-show="1">
</div>
<div id="pass-intension-section">
<div class="ywz_zhuce_huixian" id="pwdLevel_1"></div>
<div class="ywz_zhuce_huixian" id="pwdLevel_2"
style="margin: 0 11%;"></div>
<div class="ywz_zhuce_huixian" id="pwdLevel_3"></div>
<div class="ywz_zhuce_hongxianwenzi">弱</div>
<div class="ywz_zhuce_hongxianwenzi" style="margin: 0 11%;">中</div>
<div class="ywz_zhuce_hongxianwenzi">强</div>
<div class="clear"></div>
</div>
<div class="code-div">
<input id="code" class="form-control code" placeholder="请输入验证码"
type="tel" autocomplete="off" maxlength="6"> <input
id="btnSendCode" type="button" value="获取验证码"
onclick="sendMessage()" class="code-a">
<div class="clear"></div>
</div>
</div>
</div>
<div class="login">
<input type="button" value="注册" class="btn btn-bottom"
id="btn-register">
</div>
</div>
<div class="login2">
<div class="login-header">
<a></a>
<div>登录</div>
</div>
<div class="box">
<div class="content">
<div class="title-text">
请输入密码<span></span>
</div>
<input id="pass" value="" class="form-control pass"
placeholder="请输入密码" type="password" autocomplete="off"
maxlength="20"
onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')" required>
<div class="delete2" id="delete2">
<div></div>
</div>
<img src="${ctx}/static/images/password-icon.png" id="eyes_box"
class="eyes_box" data-show="1">
</div>
<div class="get-code">
<a id="get-code-a">忘记密码？</a>
</div>
</div>
<div class="login">
<input type="button" value="登录" class="btn btn-bottom"
id="btn-login">
</div>
</div>
<span class="clear"></span>
</div>
</div>
</div>
<div class="createid">
<div class="createid-font">
<img src="./images/logo.png">
<div>cakeboss</div>
</div>
<div class="load-container load2">
<div class="loader"></div>
<div>正在创建cakeboss账号</div>
</div>
</div>
<span class="clear"></span>
</div>
</body>
<script type="text/javascript">
//叉号删除所有输入内容
$('#delete').click(function() {
$('#phone').val('');
$('#phone').css('background','#fff');
$("#input-tip").html('');
$("#input-tip").css("display","none");
$("#btn").removeClass("btn-active-orange").css("background","#1d1d1d");
});
$('#delete1').click(function() {
$('#password').val('');
$('#password').css('background','#fff');
$("#btn-register").removeClass("btn-active-orange");
$("#pass-intension-section").css("display","none");
});
$('#delete2').click(function() {
$('#pass').val('');
$('#pass').css('background','#fff');
$("#btn-login").removeClass("btn-active-orange");
});
//手机号码弹出放大效果
$("#phone").keyup(function () {
$("#input-tip").css("display","block");
var phone=$(this).val();
var len=phone.length;
len=parseInt(len);
if(len==0){
$("#input-tip").css("display","none");
}
phone=$.trim(phone);
var h=phone.substring(0,3);
phone=phone.substring(3);
while(phone&&len>0){
h+=" "+phone.substring(0,4);
phone=phone.substring(4);
}
$("#input-tip").html(h);
});
//检查手机号码格式
function checkphone() {
var mbTest = /^(1)[0-9]{10}$/;
var phone = $(" .phone").val();
if (mbTest.test(phone)) { //手机号格式正确
$(".phone").css("background","#fbfdc9");
$("#btn").attr("value","下一步");
return 0;
}else{
$("#btn").attr("value", "请检查手机号码！");
$("#btn").css("background", "#d11111");
return -1;
}
}
//手机号码框监听事件
$(".phone").keyup(function (){
var mbTest = /^(1)[0-9]{10}$/;
var phone = $(".phone").val();
if (mbTest.test(phone)) {
$(".phone").css("background","#fbfdc9");
$("#btn").attr("value","下一步");
$("#btn").css("background","#1d1d1d");
}else{
$("#btn").css("background","#1d1d1d");
$(this).css("background","#fff");
}
});
//检查注册密码格式
function checkpwd() {
var pwd = $(".password").val();
if ((pwd.length>=6) && (pwd.length<=20)) { //登录密码格式正确
$("#btn-register").attr("value","注册/保存");
$(".password").css("background","#fbfdc9");
} else {
$("#btn-register").attr("value","请设置6-20位密码");
$("#btn-register").css("background","#d11111");
}
}
//检查短信验证码格式
function checkcode() {
var code = $(".code").val();
if (code.length==6) { //短信验证码格式正确
$(".code").css("background","#fbfdc9");
$("#btn-register").attr("value","注册/保存");
} else {
$("#btn-register").attr("value", "请检查短信验证码！");
$("#btn-register").css("background","#d11111");
}
}
/* //检查图形验证码格式
function checkverifyCode() {
var verifyCode = $(" .verifyCode").val();
var r="password="+pass+"&code="+code;
if(code==''){
$("#verification").focus();
return layer.msg("请输入图形验证码！");
}
if(verifyCode.length==4){
$.ajax({
url:"https://www.mayi121.com/mobile3/project/captcha",
data:r,
dataType:"json",
type:"post",
success:function(d){
if(d.status){//图形验证码输入正确
location.href="https://www.mayi121.com/mobile3/project/captcha";
$(".verifyCode").css("background","#fbfdc9");
$("#btn-register").attr("value","注册");
sendMessage();
return 0;
}else{
layer.msg(d.message);
}
},
error:function(){
layer.msg("提交异常");
}
})
}else{
$("#btn-register").attr("value", "请检查图形验证码！");
$("#btn-register").css("background","#d11111");
return -1;
}
}; */
//注册密码框监听事件
$(".password").keyup(function (){
var pwd = $(".password").val();
var strongRegex = new RegExp("^(?=.{8,})(((?=.*[A-Z])(?=.*[0-9])(?=.*\\W))|((?=.*[a-z])(?=.*[0-9])(?=.*\\W))).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*\\W)(?=.*[0-9]))|((?=.*\\W)(?=.*[A-Z]))|((?=.*\\W)(?=.*[a-z]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (pwd!=='') {
$("#pass-intension-section").css("display","block");
}
if (pwd=='') {
$("#pass-intension-section").css("display","none");
}
if ((pwd.length>=6) && (pwd.length<=20)) { //登录密码格式正确
$(this).css("background","#fbfdc9");
$("#btn-register").attr("value","注册/保存");
$("#btn-register").css("background","#1d1d1d");
$("#btnSendCode").addClass("code-blue")
}
else{
$("#btn-register").css("background","#1d1d1d");
$(this).css("background","#fff");
}
if (false == enoughRegex.test(pwd)) {
$('#pwdLevel_1').removeClass('ywz_zhuce_hongxian');
$('#pwdLevel_2').removeClass('ywz_zhuce_hongxian2');
$('#pwdLevel_3').removeClass('ywz_zhuce_hongxian3');
$('#pwdLevel_1').addClass('ywz_zhuce_huixian');
$('#pwdLevel_2').addClass('ywz_zhuce_huixian');
$('#pwdLevel_3').addClass('ywz_zhuce_huixian');
//密码小于六位的时候，密码强度图片都为灰色
}
else if (strongRegex.test(pwd)) {
$('#pwdLevel_1').removeClass('ywz_zhuce_huixian');
$('#pwdLevel_2').removeClass('ywz_zhuce_huixian');
$('#pwdLevel_3').removeClass('ywz_zhuce_huixian');
$('#pwdLevel_1').addClass('ywz_zhuce_hongxian');
$('#pwdLevel_2').addClass('ywz_zhuce_hongxian2');
$('#pwdLevel_3').addClass('ywz_zhuce_hongxian3');
//密码为八位及以上并且字母数字特殊字符三项都包括,强度最强
}
else if (mediumRegex.test(pwd)) {
$('#pwdLevel_1').removeClass('ywz_zhuce_huixian');
$('#pwdLevel_2').removeClass('ywz_zhuce_huixian');
$('#pwdLevel_3').removeClass('ywz_zhuce_hongxian3');
$('#pwdLevel_1').addClass('ywz_zhuce_hongxian');
$('#pwdLevel_2').addClass('ywz_zhuce_hongxian2');
$('#pwdLevel_3').addClass('ywz_zhuce_huixian');
//密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
}
else {
$('#pwdLevel_1').addClass('ywz_zhuce_hongxian');
$('#pwdLevel_2').removeClass('ywz_zhuce_hongxian2');
$('#pwdLevel_3').removeClass('ywz_zhuce_hongxian3');
$('#pwdLevel_1').removeClass('ywz_zhuce_huixian');
$('#pwdLevel_2').addClass('ywz_zhuce_huixian');
$('#pwdLevel_3').addClass('ywz_zhuce_huixian');
//如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的
}
return true;
});
//登录密码框监听事件
$(".pass").keyup(function (){
var pwd1 = $(".pass").val();
if ((pwd1.length>=6) && (pwd1.length<=20)) { //登录密码格式正确
$(this).css("background","#fbfdc9");
$("#btn-login").addClass("btn-active-orange");
}
});
//短信验证码监听事件
$(".code").keyup(function (){
var code = $(".code").val();
if (code.length==6) { //短信验证码格式正确
$(this).css("background","#fbfdc9");
$("#btn-register").attr("value","注册/保存");
$("#btn-register").css("background","#1d1d1d");
} else {
$("#btn-register").css("background","#1d1d1d");
$(this).css("background","#fff");
}
});
/* //图形验证码监听事件
$(".verifyCode").keyup(function (){
var verifyCode = $(".verifyCode").val();
if (verifyCode.length==4) { //短信验证码格式正确
$(this).css("background","#fbfdc9");
$("#btn-register").attr("value","注册");
$("#btn-register").css("background","#E1E1E1");
} else {
$("#btn-register").css("background","#E1E1E1");
$(this).css("background","#fff");
}
}); */
//输入手机号码页按钮变色
$(".phone").keyup(function (){
var mbTest = /^(1)[0-9]{10}$/;
var phone = $(".phone").val();
if ((mbTest.test(phone)) && ($(".reg-check").is(":checked"))) {
$("#btn").addClass("btn-active-orange");
}else{
$("#btn").removeClass("btn-active-orange");
}
});
//注册页按钮变色
$(".code,.password").keyup(function (){
var code = $(".code").val();
var pwd = $(".password").val();
if ((code.length==6) && (pwd.length>=6) && (pwd.length<=20)) {
$("#btn-register").addClass("btn-active-orange");
}else{
$("#btn-register").removeClass("btn-active-orange");
}
});
//去掉勾选checkbox，按钮不可点
$(".reg-check").click(function(){
var mbTest = /^(1)[0-9]{10}$/;
var phone = $(".phone").val();
if((mbTest.test(phone)) && ($(".reg-check").is(":checked"))) {
$("#btn").addClass("btn-active-orange");
$("#btn").val("下一步");
}
if((mbTest.test(phone)) && (!$(".reg-check").is(":checked"))) {
$("#btn").css("background","#d11111");
$("#btn").removeClass("btn-active-orange");
$("#btn").val("请同意协议！");
}
});
//点击判断是否已注册后跳转
$("#btn").click(function(){
var mbTest = /^(1)[0-9]{10}$/;
var phone = $(".phone").val();
if ((mbTest.test(phone)) && ($(".reg-check").is(":checked"))) {
$.ajax({
url: "/cakeboss/json/leaguerExist",
type: "post",
dataType: "json",
data: {"phone":phone},
success: function(data) {
if(data.code==200002){
$("#loginPhone").attr("value",phone);
$(".login2").css("display","block");
$(".login1").css("display","none");
$(".register").css("display","none");
$(".login2 .login-header a").click(function(){
$(".login1").css("display","block");
$(".login2").css("display","none");
$(".register").css("display","none");
});
}else if(data.code==111111){
$(".register").css("display","block");
$(".login1").css("display","none");
$(".login2").css("display","none");
$(".register .login-header a").click(function(){
$(".login1").css("display","block");
$(".register").css("display","none");
$(".login2").css("display","none");
});
}else{
return layer.msg("fail");
}
},
error:function(){
}
});
}else{
}
if ((mbTest.test(phone)) && (!$(".reg-check").is(":checked"))) {
return layer.msg("请同意协议！");
}
if ((!mbTest.test(phone)) && ($(".reg-check").is(":checked"))) {
return layer.msg("请检查手机号码！");
}
if ((!mbTest.test(phone)) && (!$(".reg-check").is(":checked"))) {
return layer.msg("请检查手机号码！");
return layer.msg("请同意协议！");
}
});
$("#btn-login").click(function(){
var mphone = $(".phone").val();
var mpassword = $("#pass").val();
$(this).attr("disabled","true");
$.ajax({
url:"/cakeboss/json/login",
data:{phone:mphone,password:mpassword},
dataType:"json",
type:"post",
success:function(d){
$("#btn-login").removeAttr("disabled");
if(d.code==111111){
layer.msg("登陆成功");
location.replace("${ctx}/redirect/redirectToPathJsp");
}else{
layer.msg("密码错误");
}
},
error:function(){
layer.msg("登录异常");
$("#btn-login").removeAttr("disabled");
}
});
});
//点击注册按钮判断和跳转
$("#btn-register").click(function(){
var password = $(".password").val();
var code = $(".code").val();
var phone = $(".phone").val();
$(this).attr("disabled","true");
if ((code.length==6) && (password.length>=6) && (password.length<=20)) {
var r="phone="+phone+"&password="+password+"&code="+code;
$.ajax({
url:"/cakeboss/json/register",
data:r,
dataType:"json",
type:"post",
success:function(d){
$("#btn-register").removeAttr("disabled");
if(d.code==111111){
location.replace("/cakeboss/redirect/redirectToPathJsp");
$(".createid").css({"display":"block","margin-top":"0"});
$(".loginall-all").css("display","none");
}else{
return layer.msg("验证码有误！");
}
},
error:function(){
return layer.msg("数据异常");
$("#btn-register").removeAttr("disabled");
}
});
}
});
//失去焦点时进行判断
$(function () {
var mbTest = /^(1)[0-9]{10}$/;
var phone = $(".phone").val();
var pwd = $(".password").val();
var code = $(".code").val();
$(".phone").focus(function () {
}).blur(function () {
checkphone();
});
$(".password").focus(function () {
}).blur(function () {
checkpwd();
});
$(".code").focus(function () {
}).blur(function () {
checkcode();
});
});
//获取手机验证码
var InterValObj; //timer变量，控制时间
var count = 59; //间隔函数，1秒执行
var curCount;//当前剩余秒数
function sendMessage() {
var phone=$(".phone").val();
var code=$(".code").val();
curCount = count;
//设置button效果，开始计时
$("#btnSendCode").removeClass("code-blue");
$(".phone").attr("disabled", "true");
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val( curCount + "秒后重新获取");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
//向后台发送处理数据
$.ajax({
type: "post", //用POST方式传输
dataType: "json", //数据格式:JSON
url: "/cakeboss/json/sendregistercode", //目标地址
data: "phone="+phone,
error: function (XMLHttpRequest, textStatus, errorThrown) {
},
success: function (data){
}
});
}
//timer处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#btnSendCode").addClass("code-blue");
$(".phone").removeAttr("disabled");
$("#btnSendCode").removeAttr("disabled");//启用按钮
$("#btnSendCode").val("重新获取验证码");
}
else {
curCount--;
$("#btnSendCode").val(curCount + "秒后重新获取");
}
}
var i = 10;
function remainTime(){
if(i==0){
location.href='${ctx}';
}
document.getElementById('endtime').innerHTML=i--;
setTimeout("remainTime()",300);
}
//查看密码
$(".eyes_box").click(function(){
if($(this).attr("data-show")==1){//明文
$(this).attr("data-show","2");
$(this).attr('src','${ctx}/static/images/password-icon1.png');
$(this).parent("div").children("input[maxlength='20']").attr('type','text');
return;
}
if($(this).attr("data-show")==2){//密文
$(this).attr("data-show","1");
$(this).attr('src','${ctx}/static/images/password-icon.png');
$(this).parent("div").children("input[maxlength='20']").attr('type','password');
return;
}
});
//忘记密码
$("#get-code-a").click(function(){
$(".login2").css("display","none");
$(".login1").css("display","none");
$(".register").css("display","block");
$("#btn-register").val("保存");
$(".title-text").css("visibility","hidden");
$(".register .login-header div").html("修改密码");
$(".register .login-header a").click(function(){
$(".login2").css("display","block");
$(".register").css("display","none");
$(".login1").css("display","none");
$(".register .login-header div").html("注册");
$(".title-text").css("visibility","visible");
});
});
</script>
</html>
登录注册页面实现
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- gitee：https://gitee.com/bestjarvan/user-register-nodejs-d...
- 首先直接上图最终效果图，由于动态效果不好录制，所以省略，后面直接看分享的演示DEMO 一、元件准备 1、文本标签两...
- 就剩一个登陆了，把这个小demo写完整。为了不会把新手带偏，这里在登录里我就不涉及session与cookie了，...
