From 025e127ebaa4b681716c5e27e9d6ad60e6fa3691 Mon Sep 17 00:00:00 2001 From: chenbiao Date: Fri, 22 Apr 2022 15:28:52 +0800 Subject: [PATCH] add 综合平台入口 登录添加验证码以及校验功能 --- css/login.css | 28 +++++++++++++++++++++++++++- img/yzm.png | Bin 0 -> 392 bytes js/config.js | 12 +++--------- js/login.js | 248 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------------------------------------------------------------------------------- js/unit.js | 4 ++-- login.html | 7 +++---- 6 files changed, 140 insertions(+), 159 deletions(-) create mode 100644 img/yzm.png diff --git a/css/login.css b/css/login.css index ce47d54..4c8ee6e 100755 --- a/css/login.css +++ b/css/login.css @@ -69,6 +69,14 @@ html,body{ height: 40px; background:rgba(170,171,171,.8) url("../img/login-pwd-bg.png") no-repeat center center; } +.login-yzm-bg{ + float: left; + display: inline-block; + vertical-align: middle; + width: 40px; + height: 40px; + background:rgba(170,171,171,.8) url("../img/yzm.png") no-repeat center center; +} .form-control{ border-radius: 0; } @@ -319,7 +327,7 @@ input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ text-align: center; line-height: 40px; font-size: 14px; - background-color: rgba(255,255,255,.75); + /*background-color: rgba(255,255,255,.75);*/ border: none; } @@ -386,3 +394,21 @@ img { border:none; } #supersized img { max-width: none !important } +/* 验证码 */ +.login_input_txtSmall{ + float: left; + width: 150px !important; +} + +#code { + margin-left: 10px; + float: left; + width: 90px; + height: 40px; + font-weight: bold; + border: 0; + letter-spacing: 2px; + color: #D71D20; + font-size: 24px; + /*background: #f7f7f7;*/ +} diff --git a/img/yzm.png b/img/yzm.png new file mode 100644 index 0000000..9e61b97 Binary files /dev/null and b/img/yzm.png differ diff --git a/js/config.js b/js/config.js index 1c8a7b6..4142709 100644 --- a/js/config.js +++ b/js/config.js @@ -1,14 +1,8 @@ //阿里云正式环境，别删 +// baseUrl = 'http://sys.service.renniting.cn/';// 鉴权URL公用地址 - // baseUrl = 'http://sys.service.renniting.cn/';// 鉴权URL公用地址 - -//阿里云环境，别删 丹阳 -// baseUrl='http://106.15.191.5:8088/' - - -//阿里云测试环境，别删 - baseUrl = 'http://39.98.54.240:8088/';// url公用地址 - +//赤峰测试环境，别删 + baseUrl = 'http://dev.renniting.cn/sys/';// url公用地址 //demo环境，别删 // baseUrl = 'http://47.96.41.88:18088/';// url公用地址 diff --git a/js/login.js b/js/login.js index 918121d..dc8e691 100755 --- a/js/login.js +++ b/js/login.js @@ -1,77 +1,4 @@ -function slide() { - var slideBox = $('#slide_box')[0]; - var slideXbox = $('#slide_xbox')[0]; - var btn = $('#btn')[0]; - var slideBoxWidth = slideBox.offsetWidth; - var btnWidth = btn.offsetWidth; - //pc绔� - btn.ondragstart = function () { - return false; - }; - btn.onselectstart = function () { - return false; - }; - btn.onmousedown = function (e) { - var disX = e.clientX - btn.offsetLeft; - document.onmousemove = function (e) { - var objX = e.clientX - disX + btnWidth; - if (objX < btnWidth) { - objX = btnWidth - } - if (objX > slideBoxWidth) { - objX = slideBoxWidth - } - $('#slide_xbox').width(objX + 'px'); - }; - document.onmouseup = function (e) { - var objX = e.clientX - disX + btnWidth; - if (objX < slideBoxWidth) { - objX = btnWidth; - } else { - objX = slideBoxWidth; - locked = true; - $('#slide_xbox').html('验证通过
'); - } - $('#slide_xbox').width(objX + 'px'); - document.onmousemove = null; - document.onmouseup = null; - }; - }; - //绉诲姩绔� - var cont = $("#btn"); - var startX = 0, sX = 0, moveX = 0,leftX = 0; - cont.on({//缁戝畾浜嬩欢 - touchstart: function (e) { - startX = e.originalEvent.targetTouches[0].pageX;//鑾峰彇鐐瑰嚮鐐圭殑X鍧愭爣 - sX = $(this).offset().left;//鐩稿浜庡綋鍓嶇獥鍙杞寸殑鍋忕Щ閲� - leftX = startX - sX;//榧犳爣鎵€鑳界Щ鍔ㄧ殑鏈€宸︾鏄綋鍓嶉紶鏍囪窛div宸﹁竟璺濈殑浣嶇疆 - }, - touchmove: function (e) { - e.preventDefault(); - moveX = e.originalEvent.targetTouches[0].pageX;//绉诲姩杩囩▼涓璛杞寸殑鍧愭爣 - var objX = moveX - leftX + btnWidth; - if (objX < btnWidth) { - objX = btnWidth - } - if (objX > slideBoxWidth) { - objX = slideBoxWidth - } - $('#slide_xbox').width(objX + 'px'); - }, - touchend: function (e) { - var objX = moveX - leftX + btnWidth; - if (objX < slideBoxWidth) { - objX = btnWidth; - } else { - objX = slideBoxWidth; - locked = true; - $('#slide_xbox').html('验证通过
'); - } - $('#slide_xbox').width(objX + 'px'); - } - }); -} -slide(); +// edit by chenbiao 2022/04/22 /** * 输入框内容检测插件 */ @@ -160,63 +87,77 @@ function password(obj){ $('#password').on("blur", function() { //验证邮箱地址 password($(this)); }); -//验证码验证 -//function verification(obj) { -// var _this = obj; -// if(_this.val() !== '1234'){ -// _this.prev().addClass('glyphicon glyphicon-remove'); -// return false; -// }else{ -// _this.prev().removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok'); -// } -//} -//$('#login_imgCode_value').on("input blur", function() { //验证邮箱地址 -// verification($(this)); -//}); -//点击登陆 +var fun={ + init:function () { + $('#login_code_ifo').text(''); + //获取验证码 + createCode(); + } +}; +fun.init(); +$(document).on('click','#code',function () { + //获取验证码 + createCode(); +}) + + +//点击登录 $('#login-btn').on('click',function () { var obj1 = $('#userName'); var obj2 = $('#password'); username(obj1); password(obj2); - //verification($('#login_imgCode_value')); - if(flagAjax){ - var verificationText = $('#slide_xbox').text(); - if(verificationText != '验证通过'){ - $('#login_error_ifo').text("请拖动滑块验证"); - }else{ + // 验证码 + var imgCode=document.getElementById("code").value; + var imgCodeId=$('#code').attr('data-id'); + var inputCode = document.getElementById("codedate").value.toUpperCase(); //取得输入的验证码并转化为大 + //校验 验证码是否匹配正确 + if(inputCode.length <= 0) { //若输入的验证码长度为0 + //alert("请输入验证码！"); //则弹出请输入验证码 + $('#login_error_ifo').text("请输入验证码！"); + return; + } + if(inputCode != imgCode ) { //若输入的验证码与产生的验证码不一致时 + //alert("验证码输入错误!"); //则弹出验证码输入错误 + $('#login_error_ifo').text("验证码输入错误!"); + createCode();//刷新验证码 + document.getElementById("codedate").value = "";//清空文本框 + return; + } - var Username= $('#userName').val(); - var Password= $('#password').val(); - // var imageCode = $imageCodeValue.val(); - // alert("username is "+username+"password is"+password+"code is "+imageCode); + $('#login_error_ifo').text(''); + if(flagAjax){ + var Username= $('#userName').val(); + var Password= $('#password').val(); + // var imageCode = $imageCodeValue.val(); + // alert("username is "+username+"password is"+password+"code is "+imageCode); - var opts = {}; - opts.method = "POST"; - opts.url = dataUrl.util.getLogin(); - opts.success = loginSuccess; - var data = { - 'terminalSource':6, - }; - data.clientType = sysComm.clientType; - data.sysCode = sysComm.sysCode; - data.grantType = sysComm.grantType; - data.username = Username; - data.password = Password; - //data.imgCode = imageCode; + var opts = {}; + opts.method = "POST"; + opts.url = dataUrl.util.getLogin(); + opts.success = loginSuccess; - data.expiresIn = 60 * 60 * 12;//榛樿12灏忔椂 - opts.data = JSON.stringify(data); - sysAjax(opts); - } + var data = { + // 'terminalSource':6, + }; + data.clientType = sysComm.clientType; + data.sysCode = sysComm.sysCode; + data.grantType = sysComm.grantType; + data.username = Username; + data.password = Password; + data.imgCodeId = imgCodeId; + data.imgCode = imgCode; + data.expiresIn = 60 * 60 * 12;//默认12小时 + opts.data = JSON.stringify(data); + sysAjax(opts); } - // window.location.href='index.html'; + }); //回车事件 $('#login_imgCode_value').keyup(function(event){ @@ -238,29 +179,45 @@ $('.verification-logo').on('click',function () { $("#login_imgCode_value").val(""); $('.verification-logo').removeClass('glyphicon glyphicon-remove'); }); -getImgCode(); -//点击换验证码 -$('#login_imgCode').on('click', function () { - getImgCode(); -}); -function getImgCode() { - var opt = { - method: "get", - url: dataUrl.util.getLoginImageCode(), - success: imgCodeSuccess - } - sysAjax(opt); -} -function imgCodeSuccess(res) { - if (res.code === '8888') { - var imageCodeStr = res.data.imageCodeStr; - var base64ImgStr = 'data:image/jpeg;base64,' + imageCodeStr; - fn.setToken(res.data.authTokenid); - $imageCode.attr('src', base64ImgStr); - } +/** + * 验证码获取 请求接口 + * Get getloginimgcode + * @param + */ + +var syscode; //在全局定义验证码 +function createCode() { + // 发出Ajax请求 + $.ajax({ + type: "GET", + url: dataUrl.util.imageCodeStr(), + data: null, + dataType: null, + processData: true, + traditional: true, + success: function (res) { + + if (res.code === '8888') { + var data = res.data; + var imgCodeId=data.authTokenid; + var imgCode=data.imageCodeStr; + syscode=imgCode; + + $('#code').val(imgCode); + $('#code').attr('data-id',imgCodeId); + + } else { + console.log(res.msg); + } + + }, + error: function (err) { + console.log(err); + } + }) +}; -} //登录成功的函数 function loginSuccess(res) { if (res.code === '8888') { @@ -279,33 +236,38 @@ function loginSuccess(res) { //alert("success"); fn.setUserAccount(res.data.userName); window.location.href = "index.html"; - } else if (res.code == "2000" || res.code === '1004') { + } else if (res.code == "1012") { + + $('#login_error_ifo').text("验证码不匹配"); + createCode();//刷新验证码 + + }else if (res.code == "2000" || res.code === '1004') { //账号密码不匹配 $('#login_error_ifo').text("账号密码不匹配"); //$error.text("账号或密码错误!"); - getImgCode(); + createCode(); } else if (res.code == "2001") { //账号无有效角色，非有效用户 $('#login_error_ifo').text("账号无效"); //$error.text("账号无有效角色，非有效用户!"); - getImgCode(); + createCode(); } else if (res.code == "2002") { //验证码错误 // $('.verification-logo').addClass('glyphicon glyphicon-remove'); $('#login_error_ifo').text("验证码错误"); //return false; // $imageCodeValue.focus(); - getImgCode(); + createCode(); } else if(res.code == "2010"){ $('#login_error_ifo').text("用户没有关联停车场"); - getImgCode(); + createCode(); } else { console.log(res.code); $('.verification-logo').removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok'); $('#login_error_ifo').text("系统错误"); // $error.text(res.msg); - getImgCode(); + createCode(); } } diff --git a/js/unit.js b/js/unit.js index ca1afa6..07c609a 100755 --- a/js/unit.js +++ b/js/unit.js @@ -29,8 +29,8 @@ dataUrl.util = { return baseUrl + 'sysLoginLog/queryLoginLog'; }, //获取验证码 - getLoginImageCode: function () { - return baseUrl + 'oauth/imageCode?' + Math.random() + imageCodeStr: function () { + return baseUrl + 'oauth/imageCodeStr' }, //登录 getLogin: function () { diff --git a/login.html b/login.html index 34ab8ff..828b3dd 100755 --- a/login.html +++ b/login.html @@ -55,10 +55,9 @@
-
-
-
- 拖动滑块验证 + + +
-- libgit2 0.21.4