JS实现京东表单注册

最新推荐文章于 2021-06-05 23:52:17 发布

爱学习的啵啵仔

最新推荐文章于 2021-06-05 23:52:17 发布

阅读量1.1k

点赞数 2

分类专栏： JavaScript 文章标签： js javascript html

rmh

本文链接：https://blog.csdn.net/qq_46232829/article/details/109889923

版权

JavaScript 专栏收录该内容

36 篇文章 6 订阅

订阅专栏

首先看下效果图
在这里插入图片描述
HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            margin: 0px auto;
            width: 950px;
            height: 750px;
            /* border: 1px red solid; */
            
        }
        .div2{
            width: 300px;
            height: 700px;
            float: left;
            /* border: 1px red solid; */
        }
        .div21{
            width: 300px;
            height: 100px;
            float: right;
            /* border: 1px red solid; */
        }
        
        .p21{
           line-height: 100px;
           float: right;
           font-size: 15px;
           color: #999999;    
           margin-right: 20px;
          
        }
        .div3{
            width: 300px;
            height: 700px;
            float: left;
            /* border: 1px red solid; */
        }
        .div4{
            width: 300px;
            height: 700px;
            float: left;
            /* border: 1px red solid; */
        }
        span{
            color: red;
        }

       .div31{
            border: solid 1px #E8E8E8;
            line-height: 100px;
            width: 285px;
            height: 50px;
            margin-top: 25px;
            margin-left: 5px;
            background-color: #F8F8F8;

       }

        .inpu1{
            border: 1px #999999 solid;
            line-height: 100px;
            width: 300px;
            height: 50px;
            margin-top: 25px;
            margin-left: 0px;
        }



        .inpu1:hover{
            border: 2px #94AA85 solid;
            line-height: 100px;
            width: 300px;
            height: 50px;
            margin-top: 25px;
            margin-left: 0px;
        }
    

       .input2{
            border: 1px #999999 solid;
            line-height: 50px;
            width: 300px;
            height: 50px;
            margin-top: 25px;
            margin-left: 0px;
            background-color: #E64348;
            color:white;
             font-size: 20px;
             text-align: center;
       }
       .input3{
           line-height: 100px;
       }

        .p2{
            text-align: center;
            line-height: 100px;
            font-size: 12px;
       }
       .p3{
           text-align: center;
           line-height: 50px;
           font-size: 12px;
       }
       .div{
            margin: 0px auto;
            width: 1050px;
            height: 750px;
            /* border: 1px red solid; */
        }
        .div ul{
            margin-top: 10px;
            margin-left: 240px;
            width: 800px;
            height: 100px;
            list-style: none;
        }
        .div ul li{
            float: left;
             margin-left: 5px;
             height: 70px;
        }
        .div ul li a{
            display: block;
            box-sizing: border-box;
            padding: 10px 28px;
            border: 1px silver solid;
            font-weight: bold;
        }
        .div ul li a:hover{
            display: block;
            box-sizing: border-box;
            padding: 10px 28px;
            border: 1px silver solid;
            font-weight: bold;
            color: red;
        }
      .clear{
          clear: both;
      }     
      #pv1,#pv2,#pv3,#pv4,#pv5{
          display: none;
      }

    </style>
     <script src="jd.js"></script>
     <script src="jdcode.js"></script>
</head>
<body>
    <div class="div">
        <ul>
          <li><a href="#">个人用户</a></li>
          <li><a href="#">企业用户</a></li>
          <li><a href="#">internatioal Customers</a></li>
        </ul>
   <div class="clear"></div>
  <div class="div1">
   <div class="div2">

    <div class="div21">
        <p class="p21"><span>*</span>用户名：</p>
    </div>
    <div class="div21">
        <p class="p21"><span>*</span>请设置密码：</p>
    </div>
    <div class="div21">
        <p class="p21"><span>*</span>请确认密码：</p>
    </div>
    <div class="div21">
        <p class="p21"><span>*</span>验证手机：</p>
    </div>

  
    <div class="div21">
        <p class="p21"><span>*</span>短信验证：</p>
    </div>
  
  
   </div>
   <div class="div3">
      <div class="div21">
       <input class="inpu1" type="text" name="yhm" id="t1" onblur="no1()" onfocus="yes1()"/>

      </div>
      <div class="div21">
        <input  class="inpu1" type="password" name="yhm" id="t2"  onblur="no2()" onfocus="yes2()"/>
 
       </div>
       <div class="div21">
        <input class="inpu1" type="password" name="yhm" id="t3" onblur="no3()" onfocus="yes3()"/>
 
       </div>
       <div class="div21">
        <input class="inpu1" type="text" name="yhm" id="t4" onblur="no4()" onfocus="yes4()"/>
 
       </div>
       <div class="div21">
        <input class="inpu1" type="text" name="yhm" id="t5"  onblur="no()" onfocus="yes()"/>
 
       </div>
       <div class="div21">
       <p class="p2"><input type="checkbox" class="input3"/>&nbsp;&nbsp;我以阅读并同意<a href="#">《京东用户注册协议》</a></p>
       </div>
       
       <div class="div21">
        <input class="input2" type="button" value="立即注册" onclick="check()" id="qidong"/>
       </div>
         



   </div>
   <div class="div4">
    
    <div class="div21" >
        <div class="div31" id="pv1">
            <p class="p3">4-20为字符，支持中英文，数字及“. ,—”组合</p>  
        </div>
    </div>
    <div class="div21">
        <div class="div31" id="pv2">
            <p class="p3">密码最少8位，必须同时包括英文，数字</p>  
        </div>
    </div>
    <div class="div21">
        <div class="div31" id="pv3">
            <p class="p3">必须与密码保持一致</p>  
        </div>
    </div>
    <div class="div21">
        <div class="div31" id="pv4">
            <p class="p3">手机号码为11为数字不能为空</p>  
        </div>
    </div>
    <div class="div21">
        <div class="div31" id="pv5">
            <p class="p3" >验证码为4位数字，请注意查收短信</p>  
        </div>
    </div>



   </div>
  </div>
    </div>
</body>

JS的jdcode.js代码如下

function $(str){
    return document.getElementById(str);
}

function check(){
    if(name()&&pass()&&rpass()&&phone()&&note()){
        document.write("<h2>恭喜您注册成功</h2>");
    }
}

function name(){
    var nameObj=$("t1");
    var strName=nameObj.value;
    if(strName.length==0){
        alert("用户名不能为空");
        nameObj.focus;
        return false;
    }
    if(strName.length<4||strName>16){
        alert("用户名应有4-20的字符组成");
        nameObj.select();
        return false;
    }
    return true;
}

function pass(){
   var passObj=$("t2");
   var strPass=passObj.value;
   if(strPass.length==0){
    alert("密码不能为空");
    passObj.focus();
    return false;
}
   if(strPass.length<8){
       alert("密码最小长度应该8位");
       passObj.select();
       return false;
   }
   var english=false;
   var figure=false;
   for(var i=0;i<strPass.length;i++){
       if((strPass[i]>='a'&&strPass[i]<='z')||(strPass[i]>='A'&&strPass[i]<='Z'))
       {
           english=true;
       }
       if(strPass[i]>='0'&&strPass[i]<='9'){
           figure=true;
       }
   }
   if(!(english==true&&figure==true)){
       alert("密码必须同时包括英文，数字");
       return false;
   }
    return true;
}

function rpass(){
    var passObj=$("t2");
    var rPssObj=$("t3");
    var strPass=passObj.value;
    var strRpass=rPssObj.value;
    if(strPass!=strRpass){
        alert("密码与原密码不一致");
        rPssObj.select();
        return false;
    }
    return true;
}

function phone(){
    var phoneObj=$("t4");
   var strPhone=phoneObj.value;
   if(strPhone.length==0){
       alert("手机号码不能为空");
       phoneObj.focus();
       return false;
   }
   if(strPhone.length!=11){
       alert("手机号码长度应为十一位数");
       phoneObj.select();
       return false;
   }
   for(var i=0;i<strPhone.length;i++){
      //  strPhone.charAt(i) --> str[i] 返回下标为I 的字符 
      if(!(strPhone.charAt(i)>='0'&&strPhone.charAt(i)<='9')){
            alert("手机号码自能为数字");
            phoneObj.select();
            return false;
      }
   } 
   return true;
}

function note(){
    var noteObj=$("t5");
    var strNote=noteObj.value;
    if(strNote.length!=6){
        alert("验证码应为六位");
        noteObj.select();
        return false; 
    }
    if(isNaN(strNote)){
          alert("验证码应该为数字");
          noteObj.select();
          return false;
    }
    return true;
}

JS中 jd.js的代码如下



function yes(){
   document.getElementById("pv5").style.display="block";
}

function no(){
   document.getElementById("pv5").style.display="none";
}
function yes1(){
   document.getElementById("pv1").style.display="block";
}

function no1(){
   document.getElementById("pv1").style.display="none";
}
function yes2(){
   document.getElementById("pv2").style.display="block";
}

function no2(){
   document.getElementById("pv2").style.display="none";
}
function yes3(){
   document.getElementById("pv3").style.display="block";
}

function no3(){
   document.getElementById("pv3").style.display="none";
}
function yes4(){
   document.getElementById("pv4").style.display="block";
}

function no4(){
   document.getElementById("pv4").style.display="none";
}

爱学习的啵啵仔

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
JS实现京东表单注册

首先看下效果图HTML代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东</title> <style> *{
复制链接

扫一扫

专栏目录