待服务条款登录界面的html5手机登录界面

最新推荐文章于 2024-04-24 10:01:52 发布
最新推荐文章于 2024-04-24 10:01:52 发布
阅读量2k 收藏 3
点赞数 1
分类专栏： webApp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjsfdx/article/details/81356672
版权

html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>待服务条款登录界面的html5手机登录界面</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimun-scale=1.0,maximum-scale=0.5" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link href="css/resetDemo.css" rel="stylesheet" />
<link href="css/font.css" rel="stylesheet" />
<link href="css/ModularFormDemo.css" rel="stylesheet" />
<link href="css/swiper-3.3.1.min.css" rel="stylesheet" />
<link href="css/commonDemo.css" rel="stylesheet" />
<link href="css/LoginRegisterDemo.css" rel="stylesheet" />
<script src="js/Libs/jquery.min.js"></script>
<script src="js/Libs/jquery.json.js"></script>
<meta />
</head>

<body>
    <div class="wrapper">
            <!--页头-->
            <header class="header">
                <a href="#" class="return floatL"></a>
                <h3 class="floatL Logo headTit">登录</h3>
            </header>               
            <section class="main" id="groupForm">
                <div class="DeInfo_Inpet DeInfo_Inpet2">
                    <div class="DeInfoInput LoginInput">
                        <label class="icon-1 floatL"></label>
                        <label style="display: none;">用户名/手机号</label>
                        <input type="text" placeholder="请输入用户名/手机号" class="DeInfo_text" data-regtest="^1[3|4|5|7|8]\d{9}$ ">
                    </div>
                    <div class="DeInfoInput LoginInput">
                        <label class="icon-11 floatL"></label>
                        <label style="display: none;">密码</label>
                        <input type="password" placeholder="请输入密码" class="DeInfo_text" data-regtest="\d">
                    </div>
                    <p class="errorShow">不能为空</p>
                    <div class="optCont">
                        <div class="floatL OptContInfo">
                            <div class="floatL OptInfoL">
                                <input type="checkbox" data-style="checkeds" class="checkedNum" />
                                <label class="icon-30"></label>
                            </div>
                            <div class="floatL OptInfoR">是否记住用户名</div>
                        </div>
                        <div class="floatL OptContInfo">
                            <div class="floatL OptInfoL">
                                <input type="checkbox" data-style="checkeds" class="checkedNum" />
                                <label class="icon-30"></label>
                            </div>
                            <div class="floatL OptInfoR">是否记住密码</div>
                        </div>
                    </div>
                    <div class="optCont">
                        <div class="floatL OptContInfo OptContInfo2" >
                            <div class="floatL OptInfoL">
                                <input type="checkbox" data-style="checkeds" class="checkedNum" />
                                <label class="icon-30"></label>
                            </div>
                            <div class="floatL OptInfoR">已阅读及同意服务条款</div>
                        </div>
                    </div>
                </div>
                <!--按钮-->
                <div class="BtnCont">
                    <button class="BigBtn" id="yanzheng">立即登录</button>
                </div>
                <div class="loginLink">
                    <div class="loginLink_text"><a href="#">注册</a><span>|</span><a href="#">忘记密码</a></div>
                </div>
            </section>

        </div>
    <script src="js/Libs/swiper-3.3.1.jquery.min.js"></script>
    <script src="js/commonDemo.js"></script>
    <script src="js/yanzhengDemo.js"></script>
</body>
</html>

resetDemo.css:

/*初始化*/
*{font-family:Microsoft YaHei,sans-serif,Arial;font-size:100%;}
html,body{
    background: #f2f2f2;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,p,th,td{padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial}
fieldset,img{border:0}
a{text-decoration:none;color:#000;outline:none}
li{list-style:none}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%;outline: none;}
a{-webkit-transition:all 0.3s linear;-moz-transition:all 0.3s linear;-ms-transition:all 0.3s linear;-o-transition:all 0.3s linear}
.clear:after{
  display:block; 
  content:"clear"; 
  height:0; 
  clear:both; 
  overflow:hidden; 
  visibility:hidden;
}
.clear{zoom:1;}
.floatL{float: left;}
.floatR{float: right;}

font.css:

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot@4rggux');
  src:  url('../fonts/icomoon.eot@4rggux#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf@4rggux') format('truetype'),
    url('../fonts/icomoon.woff@4rggux') format('woff'),
    url('../fonts/icomoon.svg@4rggux#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}
[class^="icon-"]:before, [class*=" icon-"]:before{
    font-size: 1.5rem;
    color: #009b63;
}
.icon-1:before {
  content: "\e900";
}
.icon-2:before {
  content: "\e901";
}
.icon-3:before {
  content: "\e902";
}
.icon-4:before {
  content: "\e903";
}
.icon-6:before {
  content: "\e904";
}
.icon-7:before {
  content: "\e905";
}
.icon-8:before {
  content: "\e906";
}
.icon-9:before {
  content: "\e907";
}
.icon-10:before {
  content: "\e908";
}
.icon-11:before {
  content: "\e909";
}
.icon-12:before {
  content: "\e90a";
}
.icon-13:before {
  content: "\e90b";
}
.icon-14:before {
  content: "\e90c";
}
.icon-15:before {
  content: "\e90d";
}
.icon-16:before {
  content: "\e90e";
}
.icon-17:before {
  content: "\e90f";
}
.icon-18:before {
  content: "\e910";
}
.icon-19:before {
  content: "\e911";
}
.icon-20:before {
  content: "\e912";
}
.icon-21:before {
  content: "\e913";
}
.icon-22:before {
  content: "\e914";
}
.icon-23:before {
  content: "\e915";
}
.icon-24:before {
  content: "\e916";
}
.icon-26:before {
  content: "\e917";
}
.icon-28:before {
  content: "\e918";
}
.icon-30:before {
  content: "\e919";
}

ModularFormDemo.css:

.ModularBox{
    background: #fff;
    padding: 0 1rem;
    overflow: hidden;
    margin:0.8rem 0;
}
.ModularTitle{
    padding:0.8rem 0;
    color: #009b63;
    font-size: 1rem;
    overflow: hidden;
}
.ModularTitle:before{
    content: "";
    display: block;
    width: 0.2rem;
    height: 1.2rem;
    border-radius: 0.5rem;
    background:#009b63 ;
    float: left;
    margin: 0.1rem 0.3rem 0 0;
}
.ModularTitle .OptContInfo{
    margin: 0.1rem 0 0 0.8rem;  
}
.DeInfoInput{
    height: 2.4rem;
    line-height: 2.4rem;
    padding: 0 0.5rem;
    border:1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    background: #fff;
    clear: both;
}
.DeInfoInput label{
    padding: 0 0.4rem 0 0;
    color: #666;
    float: left;
}
.DeInfoInput .DeInfo_text{
    border: none;
    height: 100%;
    font-size: 0.9rem;
    color: #333;
    float: left;
}
.DeInfoInput_Job{
    height: auto;
    overflow: hidden;
}
.DeInfoInput_Job textarea{
    resize: none;
    margin: 0.6rem 0;
}
.DeInfoInputSub{
    float: left;
    width: 42.33%;
    clear: inherit;
}
.InfoInputTwo .DeInfoInputSub:last-child{
    float: right;
}
#registerBtn .BigBtn{
    display: block;
}
#registerBtn .BigBtnTwo{
    display:none ;
}
/*下拉框begin*/
.btn-select { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    overflow:hidden;
    font-size: 0.9rem;
    color: #333; 
    border:1px solid #ccc; 
} 
.btn-select .cur-select {  
    position: absolute; 
    display: block; 
    width:100%;
    line-height:2.4rem;
    color: #333;
} 
.btn-select .cur-select:before{
    content:"";
    width:32px; 
    height:100%;
    display:block;
    float:right;
}
.btn-select .cur-select:after{
    content:"";
    width:0; 
    height:0;
    border-top:7px solid #999;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    display:block;
    position: absolute;
    top: 50%;
    margin-top: -3.5px;
    right: 7px;
}
.btn-select select { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    filter: alpha(opacity: 0;); 
    color: #333;
} 
.btn-select select option { 
    text-indent: 10px; 
} 
/*下拉框end*/
.InfoInputTwo,
.InfoInputthree{
    overflow: hidden;
}
.InfoInputthree .DeInfoInput{
    width:60%;
    float: left;
}
.InfoInputthree .serInfoBtn{
    width:30%;
    float: right;
    height: 2.4rem;
    line-height: 2.4rem;
    padding: 0;
    margin: 0;
}
.switchMode{
    color: #009B63;
    clear: both;
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    text-indent: 0.5rem;
}
.errorShow{
    color:#f19625;
    margin:0 0 0.8rem 0;
    font-size:0.9rem;
    display:none;
}
.InfoInputUser .tishi{
    color:#f19625;
    background: none;
    width:7rem;
    text-align: right;
}
.DeInfoIphone{
    display:none;
}

/*图形验证码*/
.codeMain{
    width: 6rem;
    height: 2.455rem;
    background: #f6f6f6 url(../img/line.png) no-repeat center;
    float: right;
    font-size: 1.7rem;
    cursor: pointer;
    line-height: 2.455rem;
    text-align: center;
}
.code{
    display: inline-block;
}
.code span{
    color: #506d30;
    display: block;
    float: left;
    font-size: 1.8rem;
}
.code span:nth-child(2){
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.code span:nth-child(3){
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
    margin-top: -5px;
}
.code span:nth-child(4){
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}
.code span:nth-child(5){
    margin-top: -3px;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.RegCodeMain{
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    height: 2rem;
    border-radius: 0 4px 4px 0;
}
.RegCodeMain .code span{
    font-size: 1.5rem;
}
@media only screen and  (max-width: 330px) {
    .InfoInputUser .tishi{
        font-size: 0.8123rem;
        width: 6rem;
    }
    #checkCode{
        width: 5rem;
    }
}

commonDemo.css:

.wrapper{
    padding-top: 3.4rem;
    overflow: hidden;
}
/*头部*/
.header{
    height:3.4rem;
    width: 100%;
    background: #fff;
    position: fixed;
    top:0;left:0;
    z-index: 999;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.header a{
    display: block;
    color: #fff;
    line-height:3.4rem;
    font-size:1rem;
    position: relative;
    padding:0 1rem;
    z-index: 99;
}
/*返回*/
.return:before{ 
    content:''; 
    height:12px; 
    width:12px; 
    display:block; 
    float: left;
    border:2px solid #009b63; 
    border-right-width:0; 
    border-bottom-width:0;   
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    position: absolute;
    top:17px;
    left:1.1rem;
}
/*选择城市*/
.header a.CityBtn{
    font-size:0.96rem;
    color: #009b63;
    padding-left: 2.1rem;
}
.header a.CityBtn:before{
    width: 0.6rem;
    height: 0.6rem;
    top:1.15rem;
    transform:rotate(-135deg);
    -webkit-transform:rotate(-135deg);
    -moz-transform:rotate(-135deg);
    -o-transform:rotate(-135deg);
    -ms-transform:rotate(-135deg);
    left:1rem;
}

.Logo{
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 98;
    height: 100%;
    line-height: 3.4rem;
    font-size: 1.07rem;
    color: #333;
}
.Logo span{
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.Logo img{
    width:40%;
    height: auto;
    vertical-align: middle;
}



/*内容*/
.main{
    overflow: hidden;
}

/*-------尾部导航-------*/
.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
}
.footerNav{
    position: fixed;
    z-index: 92;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .115em 0;
    background: #f8f8f8;
    border-top: 1px solid #e5e5e5;
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: -ms-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    -o-box-orient: horizontal;
}
.footerNav a{
    display: block;
    height: 100%;
    position: static;
    -webkit-box-flex: 1;
    box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -o-box-flex: 1;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}
.footerNav a span{
    display: inline-block;
}
.footerNav a span:before{
     font-size: 1.6rem;
     color: #999;
}
.footerNav a:last-child span{
    margin: 0.2rem 0;
}
.footerNav a:last-child span:before{
    font-size: 1.4rem;
}
.footerNav a i{
    display: block;
    font-style: normal;
    font-size: 0.9rem;
    color: #999;
    margin-top: -0.2rem
}
.footerNav a:hover span:before,
.footerNav a:hover i,
.footerNav a.fN_curr span:before,
.footerNav a.fN_curr i{
    color: #009b63;
}


/*按钮*/
.BtnCont{
    margin:0.3rem 1rem;
    overflow: hidden;
}
.BigBtn{
    padding: 0.7rem 0;
    background: #009b63;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 0.92rem;
    text-align: center;
    margin:0.8rem 0 0;
    display: block;
    width: 100%;
}
.BigBtnTwo{
    background: #f19625;
}
/*弹框*/
.modal{
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 990;
    opacity: 0;
    background: rgba(109,127,144,0.4);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.MetalInfo{
    padding: 1.2rem 0.5rem 1.2rem;  
}
.medalCont{
    width:280px;
    min-height: 160px;
    background: #fff;
    margin: -110px 0 0 -140px;
    position: fixed;
    top:50%;
    left:50%;
    z-index: 991;  
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-backface-visibility: hidden;
    -webkit-transition-property:-webkit-transform;
    -moz-transition-property:-moz-transform;
    transition-property: transform;

    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;

}
.medalContCurr{
   opacity: 1;
   visibility: visible;   
   -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
   -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
   transition: opacity 0.3s 0s, visibility 0s 0s;
}
.medalContCurr .medalCont{
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.md_close{
    height:1rem; 
    width:1rem; 
    display:block; 
    position:relative;
}
.md_close:before, .md_close:after{
    content:''; 
    height:2px; width:12px; 
    display:block; 
    background:#88898e; 
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px; 
    position:absolute; 
    top:12px; right:6px;
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
}
.md_close:after{
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
}
.md_main{
    padding:2.5rem 1rem 2rem;
}

LoginRegisterDemo.css:

.logoImg{
    width: 200px;
    height: auto;
    display: block;
    margin:0.3rem auto 1.2rem;
}
@media only screen and  (max-width: 360px) {
    .logoImg{
        width: 170px;
    }
}

.DeInfo_Inpet{
    padding: 1rem;
}
.DeInfo_Inpet2{
    /*padding:0 1rem;*/
}
.LoginInput{
    position: relative;
}
.LoginInput label{
    line-height: 1rem;
    padding: 0 0.6rem 0 0.1rem;
    margin:0.65rem 0.6rem 0.65rem 0;
    border-right: 1px solid #ccc;
}
.LoginInput label:before{
    font-size: 1.4rem;
}
.optCont{
    overflow: hidden;
}
.OptContInfo{
    margin:0 0.8rem 0.8rem 0;
}
.OptContInfo2{
    margin: 0;
}
.OptInfoL{
    margin:0 0.4rem 0 0;
}
.OptInfoR{
    font-size: 0.9rem;
    color: #009b63;
}
/*复选框、单选框*/
.checkedNum[data-style="checkeds"]{
    display: none;
}
.checkedNum[data-style="checkeds"] + label{
    border:1px solid #009b63;
    padding: 6px;
    border-radius: 2px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: 0.4rem;
    height: 0.4rem;
}
.checkedNum[data-style="checkeds"]:checked + label{
    background-color: #009b63;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}
.checkedNum[data-style="checkeds"] + label:before{
    position: absolute;
    top:0.15rem;
    content:"\e919";
    color: #009b63;
    width: 100%;
    text-align: center;
    left:0rem;
    font-size: 0.8rem;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;

}
.checkedNum[data-style="checkeds"]:checked + label:before{
    color: #fff;
}


.loginLink{
    text-align: center;
    margin-top: 0.8rem;
}
.loginLink_text{
    display: inline-block;
}
.loginLink_text a{
    font-size: 0.92rem;
    color: #009b63;
}
.loginLink_text a:last-child{
    color: #333;
}
.loginLink_text span{
    margin:0 0.3rem;
    height: 0.9rem;
}

/*注册*/
.regUseBtn{
    overflow: hidden;
    padding: 0.8rem 1rem 0;
}
.regUseBtn a{
    display: block;
    width: 48%;
    float: left;
    transition: background 0.5s ease;
    -webkit-transition: background 0.5s ease;
}
.regUseBtn a i{
    font-style: normal;
}
.regUseBtn a:last-child{
    float: right;
}
.yanzhengBtn{
    position: absolute;
    right: 0.4rem;
    top: 0.09rem;
    padding: 0.35rem 0;
    font-size: 0.85rem;
    width: 5rem;
}
.yanzhengNumOn{
    background: #ccc;
}
.regUseBtn .regUseCurr{
    background: #048858;
}
.regUseBtn .regUseCurr.BigBtnTwo{
    background: #de871b;
}
/*团险个险*/
.addPolicyBtn a span{
    display: inline-block;
}
.addPolicyBtn a span:before{
    color: #fff;
    font-size: 1.3rem;
    float: left;
}
.addPolicyBtn a i{
    font-size: 0.9rem;
    display: inline;
    line-height: 1.4rem;
    margin-left: 0.2rem;
}
/*我*/
.UserList{
    overflow: hidden;
    margin:1rem 0;
}
.UserList li{
    background: #fff;
    border-bottom: 1px solid #ccc;
}
.UserList li a{
    display: block;
    padding:0.8rem 1rem;
    position: relative;
    overflow: hidden;
    color: #666;
    line-height: 1.3rem;
    font-size: 0.95rem;
}
.UserList li a:before{
    content:''; 
    height:0.6rem; 
    width:0.6rem; 
    display:block; 
    border:2px solid #999; 
    border-left-width:0; 
    border-top-width:0; 
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg); 
    position:absolute; 
    top: 50%;
    right:1rem;
    margin-top: -0.3rem;
}
.UserList li a i:before{
    font-size: 1.3rem;
    float: left;
    margin: 0.06rem 0.8rem 0 0;
}
.UserList li.UserPic{
    margin-bottom: 1rem;
    border-bottom: none;
}
.UserList li.UserPic img{
    display: block;
    width: 4rem;
    height:4rem;
    border-radius: 50%;
    float: left;
    margin-right:0.8rem;
}
.UserList li.UserPic a{
    color: #009B63;
    line-height: 4rem;
}

commonDemo.js:



$(function(){
    function CountSize(){
        //  计算input宽度
        /*$(".DeInfoInput .DeInfo_text").each(function(){
            var DeInfoLabel = $(this).parent().find("label").outerWidth(true);
            $(this).css("width",$(this).parent().width() - DeInfoLabel -6 + "px");
        }); */
        // 计算input宽度
        $(".LoginInput .DeInfo_text").each(function(index, element) {
            var DeInfoLabel = $(this).parent().find("label").outerWidth(true);
            console.log(DeInfoLabel);
            $(this).css("width",$(this).parent().width() - DeInfoLabel - 25 + 'px');
        });
    }

    CountSize();
    //  复选框选中样式,遍历复选框
    $(".checkedNum").each(function(i, element) {
        var InputVal = $(this).parent().siblings().find("p:first-child span").text();
        $(this).attr({"id":"checked" + i,"value":InputVal});           //  设置复选框id和value值
        $(this).next("label").attr("for","checked" + i);               //  label标签                                         
    });
});

yanzhengDemo.js:

$(function(){
    //  section 立即登录按钮
    RegInputDiv($('#groupForm'),$('#yanzheng'));    

    var pwdAnswer = "";                                             //  定义变量                                        
    function RegInputDiv(formId,yanzhengDiv){
        formId.find(".DeInfoInput .DeInfo_text").on("blur",function(){              //  文本框失去焦点事件
            RegInput($(this),formId);                              //  文本框 section
        })
        // 立即登录点击事件 判断input不能为空
        yanzhengDiv.on("click",function(){
            //  遍历文本框
            formId.find(".DeInfoInput .DeInfo_text").each(function(){
                return RegInput($(this),formId);                   //  文本框 section 
            });
        })
    }
});

function RegInput(InputThis,formId){
    var errorTishi = InputThis.parent().find("label").text();       //  获取label内容
    var testVal = new RegExp(InputThis[0].dataset.regtest);     //  账号正则表达式
    var Regshow = InputThis.is(":visible");                         //  如果文本框可见 
    if(Regshow == false){                                           //  如果文本框不可见，不做操作   
        return true;
    }
    if(testVal.test(InputThis.val())){                              //  如果内容合法              
        formId.find(".errorShow").hide();                           //  隐藏错误提示  
        return true;
    }else{                                                          //  如果非法
        formId.find(".errorShow").show().text("请输入正确的" + errorTishi);           //  提示错误
        return false;
    }
}

这里写图片描述

UIEngineer
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 手机页面开发（easyui mobile）——登录页面
weixin_30492601的博客
02-20 4082
1. html5 HTML5大家早就不陌生了，HTML最新版本，提供了很多富客户端功能支持，但是在台式系统因为受到某些浏览器限制发展缓慢，而移动设备因为没有旧包袱，所有厂家都在向HTML5靠齐，因此移动设备（特别是最新的设备）的浏览器对HTML5支持度非常高。所以大多数智能移动设备上都能跑HTML5应用。 关于HTML5，并不是你想像中的那么神秘。说白了，HTML5功能也是由HTML标签...
手机端登入界面
01-16
支持手机端移动优化,对该页面确实是话费了很多的时间和精力,还请参考
html5和css3很酷的手机端登录表单动画效果_jquery登录界面
ICode联盟
12-26 482
下载地址 $("input[type="submit"]").click(function () { $(".login").addClass("test"); setTimeout(function () { $(".login").addClass("testtwo"); }, 300); setTimeout(function () { $(".authent").show().animate({ right: -320 }, { easing: "easeOutQuint", duration:
前端H5动态背景登录页面（下）
最新发布
qq_43826289的博客
04-24 921
前端H5动态背景登录页面（下）
用html来设置一个用户登录网页
weixin_30569033的博客
05-20 449
这是如何用html标签来写一个网页用户登录的页面，大家可以试着尝试一下多熟悉这些标签<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><form action...
移动端登录页面-(1)HTML结构搭建练习
qq_41421033的博客
03-10 4211
目标: 利用css样式布局, 实现登录页面效果 效果图: 步骤一: 搭建html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-sc
Vue移动端登录页面（H5）
weixin_43549003的博客
10-26 4153
话不多说 上代码 使用的是vant组件，如果需要可以去官网学习，链接↓ vant组件官网 <div class="center"> <div class="background"> <img src="@/assets/background.jpg" width="100%" height="100%" alt="" /> </div> <d
flex 保持 宽高比_一个简单的手机的登录界面，用flex布局，无数据处理后台「218」...
weixin_39558754的博客
10-27 176
传统布局会用到margin，float，position。这个例子，我用flex，弹性布局。完成这个例子有三个文件，两个图片是我用ps做的，大的有640*1040，小的是300*300，其实大小无所谓，关键还是在布局。一、先看一下完成后的界面，我不想搞太多图，因为我的PS水平一般，这个标识图还是从wps里拿来的，好了，重点在布局。根据图片，我规划为flex的列布局，我也划分了比例，大概如下图：二、...
基于HTML5手机登录注册表单代码
weixin_34066347的博客
07-13 1754
分享一款基于HTML5手机登录注册表单代码。这是一款鼠标点击注册登录按钮弹出表单，适合移动端使用。效果图如下： 在线预览    源码下载 实现的代码。 html代码： &lt;div class="demo"&gt; &lt;nav class="main_nav"&gt; &lt;ul&gt; &lt;...
html5编写一个手机app的首页
热门推荐
lanseguhui的博客
06-09 2万+
头部和底部固定不动，用fixed固定定位中间用overflow:scroll;&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width&am
三无老旧系统单点登录技术
qq_25460159的博客
11-20 1213
关于多系统单点登录，这并非陌生概念。然而在企业应用系统的建设过程中，多个应用系统一般是在不同时期开发完成的，各应用系统由于功能侧重、设计方案和开发技术有所不同，也就形成了各自独立的用户库和用户认证体系。这也是在实施单点登录改造时，面临的最大问题，而其中尤以大量存在的“三无系统”成为单点登录改造实施的最大拦路虎。 关于单点登录技术，最近在研究，单点登录包含好几个方面，接入前后端分离的单点登录系统，这个相对比较简单些，选择的鉴权验证机制也比较多，因为大多数前后端分离的系统是基于token...
漂亮html登陆页面-支持H5源码
12-18
漂亮html登陆页面-源码 支持手机端和PC端，支持H5源码
Html5协议模板，alipay协议+weibo协议
10-19
alipay协议+weibo协议，html静态页面，仅供参考，不允许商业用途
HTML5登录界面
12-10
HTML5登录界面，用户名密码的输入，HTML5后台登录界面响应式模板
HTML5之一个简单的登录界面
Mr_White01的博客
06-04 1万+
一个简单的登录界面<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .jieshao{ width: 300px; bor
h5手机页面注册处理(短信验证)
weixin_30609287的博客
11-02 1326
//获取验证码 var wait = 60; function time(o) { if(wait == 0) { o.removeAttribute("disabled"); o.value = "获取验证码"; wait = 60; } else { o.setAttribute("disabled", true...
html5手机的注册页面,H5页面结合vue实现登录注册组件
weixin_35726575的博客
06-03 1669
介绍结合`vue`框架作手机H5页面的登录注册组件登录注册相关知识点1.cookie和token的作用(个人理解，如果不到位，恳请指出)token：我的电脑通过http请求登录某一个网页，登录成功之后，服务器会返回一个token给我的电脑。然后我只要把这个token保存下来,等下一次用我的电脑请求同一个页面时，服务器会自动验证我的token。它会用它自己才知道的密钥解析这个token是不是它上一次...
移动端漂亮登录界面
Ahacker_L的博客
04-17 1万+
使用html少量css3 js vue.js开发 由于原项目与android交互 调用了安卓的方法 下面是效果图 下面是实现代码 <!-- 即时通讯训练项目,登录页 --> <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesh...
某婚恋网站用户服务协议最新文档.docx
11-30
协议强调用户在使用服务前需仔细阅读条款，特别是涉及责任免除和会员权利限制的部分。用户接受协议意味着同意所有条款，包括未来可能的更新。XX网有权随时更新协议，用户继续使用服务则视为接受更新。服务分为线上和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值