一个简单通用的登录页js逻辑

登录页部分很简单

只有一个（图标）/用户名

（图标）/密码

四位数的随机验证码

登录按钮

HTML部分

<div class=" login-box boxLineColor positionHorn">
<i class="leftBottom"></i>
<i class="rightBottom"></i>
<div class="login-title">欢迎登录CNITSEC</div>
<ul>
<li class="li-ipt">
<span class="smallIcon usaenameIcon"></span>
<i>用户名：</i>
<input type="" name="" class="username">
</li>
<li class="li-ipt">
<span class="smallIcon pwdIcon"></span>
<i>密码：</i>
<input type="password" name="" class="pwd">
</li>
<li class="li-vcode">
<input type="" name="" placeholder="验证码" class="verification">
<span class="verificationimg fb whiteColor">
<img src="/system/check_code" class="identifyImg" onclick="this.setAttribute('src', '/system/check_code?nocache='+Math.random());" title="看不清？点击更换"/>
</span>
</li>
<li>
<input class="btnSubmit search-button js-btnSubmit" type="button" name="" value="登录">
</li>
</ul>
<div class="errSign">
<i class="errimg"></i>
<span>用户名或密码错误</span>
</div>
</div>

css部分

/*登录页错误提示*/
.login-box {
position: absolute;
width: 400px;
height: 420px;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.login-box .login-title {
color: #01fef9;
font-weight: bold;
height: 90px;
line-height: 90px;
text-align: center;
font-size: 22px;
}
.login-box ul {
padding: 0 30px;
}
.login-box ul li {
margin-bottom: 20px;
}
.login-box ul .li-ipt {
width: 340px;
height: 50px;
border: 1px solid #1e82be;
}
.login-box ul .li-ipt i {
line-height: 30px;
color: #7db9df;
font-size: 14px;
display: block;
float: left;
margin-top: 10px;
border-left: 1px solid #1e82be;
padding-left: 10px;
}
.login-box ul .li-ipt .smallIcon {
background: url("../images/icon.png") no-repeat;
display: block;
width: 20px;
height: 20px;
float: left;
margin: 14px 10px 0 10px;
}
.login-box ul .li-ipt input {
height: 30px;
width: 220px;
border: none;
background: rgba(0, 0, 0, 0);
padding-left: 5px;
margin-top: 10px;
color: #7db9df;
}
.login-box ul .li-ipt .usaenameIcon {
background-position: -184px -33px;
}
.login-box ul .li-ipt .pwdIcon {
background-position: -206px -33px;
}
.login-box ul .li-vcode .verification,
.wrapper .login-box ul .li-vcode .verificationimg {
height: 50px;
}
.login-box ul .li-vcode .verification {
width: 200px;
border: 1px solid #1e82be;
background: rgba(0, 0, 0, 0);
padding-left: 20px;
font-size: 14px;
color: #7db9df;
float: left;
margin-bottom: 20px;
}
.login-box ul .li-vcode input::-webkit-input-placeholder {
color: #7db9df;
opacity: 1;
}
.login-box ul .li-vcode .verificationimg {
width: 120px;
display: block;
float: left;
margin-left: 18px;
font-size: 24px;
line-height: 50px;
text-align: center;
background: #7cc2c1;
}
.login-box ul .li-vcode .verificationimg img {
width: 100%;
height: 100%;
vertical-align: inherit;
}
.login-box ul .btnSubmit {
width: 100%;
height: 50px;
font-size: 18px;
}
.login-box .errSign {
display: none;
width: 340px;
margin: 0 30px 0 30px;
height: 30px;
line-height: 30px;
border: 1px solid #e93683;
background: rgba(233, 54, 131, 0.2);
}
.login-box .errSign .errimg {
display: inline-block;
width: 14px;
height: 14px;
margin: 0 10px 0 10px;
background: url("../images/icon.png") no-repeat;
background-position: -91px -20px;
}
.login-box .errSign > span {
color: #e93683;
}
/*错误信息提醒*/

js部分

$(function(){
fnGetfocus($('.li-ipt'));

   $('.js-btnSubmit').on('click',function(){//点击登录
       fnLogin();
   });

   $('.verification').on('keydown',function(e){//回车键登录
       if(e.keyCode == 13){
           fnLogin();
       }
   });

   $('.username').on('blur',function(){
       var result = $(this).val().IsUserName();
       result == true ? $('.errSign').hide():$('.errSign').show().find('span').html('请输入有效字段');
   });

   $('.pwd').on('blur',function(){
       var result = $(this).val().IsPassword();
       // result == true ? $('.errSign').hide():$('.errSign').show().find('span').html('请输入有效字段');
       if(result == true && $(this).val().trim() !=''){
           $('.errSign').hide();
       }
       if(result == false){
           $('.errSign').show().find('span').html('请输入有效字段');
       }
   });

   /*登录*/
   function fnLogin(){
       var username = $('.username').val().trim();
       var password = $('.pwd').val().trim();
       var verification = $('.verification').val().trim();
       if(username == null || username ==''){
           $('.username').focus();
           $('.errSign').show().find('span').html('请输入用户名');
           return;
       }else{
           $('.errSign').hide();
       }
       if(password == null || password == ''){
           $('.pwd').focus();
           $('.errSign').show().find('span').html('请输入用密码');
           return;
       }else{
           $('.errSign').hide();
       }
       if(verification == null || verification ==''){
           $('.verification').focus();
           $('.errSign').show().find('span').html('请输入验证码');
           return;
       }else{
           $('.errSign').show().hide();
       }

   /*获取焦点*/
   function fnGetfocus(obj){
       obj.on('click',function(){
           $(this).find('input').focus();
       });
   }

   /*验证用户名格式*/
   function fnUsername(str){
       var Regex = /^[\u4E00-\u9FA5a-zA-Z0-9_]*$/;
       if(Regex.test(str)){
           return true;
       }else{
           return false;
       }
   }

   /*验证密码*/
   function fnPwd(str){
       var Regex = /^[a-zA-Z0-9][^('"\\?)]+$/;
       if(Regex.test(str)){
           return true;
       }else{
           return false;
       }
   }
})

一个简单通用的登录页js逻辑

猜你喜欢