<%@ 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.;
$(".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了，...
