html+js实现简单的登陆页面

效果图

image.png

html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<!--导航开始-->
<div class="nav">
     
</div>
<!--导航结束-->

<div class="divAll"> 
   <div id="titles">提交信息</div> 
   <div id="contents"> 
   <form action="#" onSubmit="return checkForm()"> 

      <div id="form-itemGroup">
      <p for="userName">姓名：<span class="default" id="nameErr" style="float: right;"></p> </span>
      <input type="text" id="userName" class="user" onBlur="checkUserName()" oninput="checkUserName()" placeholder="请输入至少2位的姓名"> 
      </div>

      <div id="form-itemGroup">
      <p for="IDcard">身份证号：<span class="default" id="IDcardErr" style="float: right;"></span></p> 
      <input type="text" id="IDcard" class="user" onBlur="checkIDcard()" oninput="checkIDcard()" placeholder="请输入18位的身份证号"> 
      <span class="default" id="IDcardErr" ></span>
      </div>
      
      <div id="form-itemGroup">
      <p for="userNameJ">监护人姓名：<span class="default" id="nameJErr" style="float: right;"></span></p>
      <input type="text" id="userNameJ" class="user" onBlur="checkUserNameJ()" oninput="checkUserNameJ()" placeholder="请输入至少2位的姓名"> 
      </div>

      <div id="form-itemGroup">
      <p for="IDcardJ">监护人身份证号：<span class="default" id="IDcardJErr" style="float: right;"></span></p> 
      <input type="text" id="IDcardJ" class="user" onBlur="checkIDcardJ()" oninput="checkIDcardJ()" placeholder="请输入18位的监护人身份证号">
      </div>

      <div id="form-itemGroup">
      <p for="PhoneNum">手机号码：<span class="default" id="PhoneNumErr" style="float: right;"></span></p> 
      <input type="text" id="PhoneNum" class="user" onBlur="checkPhoneNum()" oninput="checkPhoneNum()" placeholder="请输入手机号码">
      </div>

      <div id="form-itemGroup">
      <p for="YanZheng">验证码：<span class="default" id="YanZhengErr" style="float: right;"></span></p>
      <input type="text" id="YanZheng" class="user" onBlur="checkYanZheng()" oninput="checkYanZheng()" placeholder="请输入手机验证码" style="width: 200px; ">
      <button type="button" class="hqyzm">获取验证码</button>
      </div>

      <div id="form-itemGroup" align="center">
      <div class="checkbox" id="YongHuXieYi">
        <label>
          <input type="checkbox" onclick="yhxy()"> 用户协议
        </label>
      </div>
      </div>

      <div align="center">
      <button type="submit" class="divBtn">提交</button>
      </div>
     <!-- -->
   </form> 

   </div> 
 </div>

 <div class="foot">

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

css样式

<style type="text/css"> 
*{
    font-family: '微软雅黑';
  padding: 0px;
  margin:0px;
}
 .nav{
  background-color: #F93;
  width: 100%;
  height: 50px;
 } 
 .divAll{ 
   width:325px; 
   margin:50px auto; 
   }
 #titles{ 
   font-weight:bold; 
   font-size:18px; 
   height:50px; 
   line-height:50px; 
   background:#FFF9F3; 
   text-align:center;  
   border:1px solid #CCC;; 
   }
 #contents{ 
    margin-top:20px; 
    background:#FFF9F3; 
    border:1px solid #CCC;; 
    }
  #form-itemGroup{ 
   padding:10px;  
   width:300px; 
    }
  #form-itemGroup p{ 
    width:300px;
    display:inline-block; 
    height:32px; 
    line-height:32px; 
    color:#666; 
    margin-bottom: 0px;
    }
  #form-itemGroup .user{ 
    width:300px; 
        height:25px; 
    line-height:40px; 
    border:1px solid #CCC;
    }  
  #form-itemGroup .default{ 
    width:200px; 
    height:32px; 
    line-height:32px; 
    color:#999; 
    font-size: 14px;
    } 
  #form-itemGroup .error{ 
    height:32px; 
    line-height:32px; 
    color:#F00; 
    font-size: 14px;
    }
  #form-itemGroup .success{ 
    height:32px; 
    line-height:32px; 
    color:#096; 
    font-size: 14px;
    }  
  #form-itemGroup .hqyzm{ 
    width:90px; 
    height:25px;
    background-color:#F93; 
    color:#ffffff; 
    border:none; 
    }
   #form-itemGroup #YongHuXieYi { 
    font-size: 12px;
    text-decoration: underline;
   }
  .divBtn{ 
    margin-top:20px; 
    width:100px; 
    height:32px; 
    line-height:32px; 
    background-color:#F93; 
    margin-bottom:30px; 
    color:#ffffff; 
    font-weight:bold; 
    border:none; 
    } 
  .foot {
    width: 100%;
    height: 200px;
    background-color: #F93;
  }

</style>

js正则验证输入的信息是否符合规定

<script type="text/javascript"> 
 function checkForm(){ 
  var nametip = checkUserName(); 
  var IDcardip=checkIDcard();
  var namejtip = checkUserNameJ(); 
  var IDcardJip=checkIDcardJ();
  var phonenumip=checkPhoneNum();
  var yanzhengip=checkYanZheng()
  return nametip&&IDcardip&&namejtip&&IDcardJip&&phonenumip&&yanzhengip; 
  } 
  //验证姓名   
  function checkUserName(){ 
  var username = document.getElementById('userName'); 
  var errname = document.getElementById('nameErr'); 
  var pattern = /^\w{2,}$/;  //姓名格式正则表达式：用户名要至少2位 
  if(username.value.length == 0){ 
    errname.innerHTML="姓名不能为空"
    errname.className="error"
    return false; 
    } 
  if(!pattern.test(username.value)){ 
    errname.innerHTML="姓名不合规范"
    errname.className="error"
    return false; 
    } 
   else{ 
     errname.innerHTML="格式正确"
     errname.className="success"; 
     return true; 
     } 
  }
  //验证身份证号 
  function checkIDcard(){ 
  var idcard = document.getElementById('IDcard'); 
  var erridcard = document.getElementById('IDcardErr'); 
  var pattern = /^\w{18,18}$/;  //身份证格式正则表达式：身份证要18位 
  if(idcard.value.length == 0){ 
    erridcard.innerHTML="身份证号不能为空"
    erridcard.className="error"
    return false; 
    } 
  if(!pattern.test(idcard.value)){ 
    erridcard.innerHTML="身份证号不合规范"
    erridcard.className="error"
    return false; 
    } 
   else{ 
     erridcard.innerHTML="格式正确"
     erridcard.className="success"; 
     return true; 
     } 
  }
  //验证监护人姓名   
  function checkUserNameJ(){ 
  var usernamej = document.getElementById('userNameJ'); 
  var errnamej = document.getElementById('nameJErr'); 
  var pattern = /^\w{2,}$/;  //姓名格式正则表达式：用户名要至少2位 
  if(usernamej.value.length == 0){ 
    errnamej.innerHTML="姓名不能为空"
    errnamej.className="error"
    return false; 
    } 
  if(!pattern.test(usernamej.value)){ 
    errnamej.innerHTML="姓名不合规范"
    errnamej.className="error"
    return false; 
    } 
   else{ 
     errnamej.innerHTML="格式正确"
     errnamej.className="success"; 
     return true; 
     } 
  }
  //验证监护人身份证号 
  function checkIDcardJ(){ 
  var idcardj = document.getElementById('IDcardJ'); 
  var erridcardj = document.getElementById('IDcardJErr'); 
  var pattern = /^\w{18,18}$/;  //身份证格式正则表达式：身份证要18位 
  if(idcardj.value.length == 0){ 
    erridcardj.innerHTML="身份证号不能为空"
    erridcardj.className="error"
    return false; 
    } 
  if(!pattern.test(idcardj.value)){ 
    erridcardj.innerHTML="身份证号不合规范"
    erridcardj.className="error"
    return false; 
    } 
   else{ 
     erridcardj.innerHTML="格式正确"
     erridcardj.className="success"; 
     return true; 
     } 
  }

  //验证本人手机号码
  function checkIDcardJ(){ 
  var idcardj = document.getElementById('IDcardJ'); 
  var erridcardj = document.getElementById('IDcardJErr'); 
  var pattern = /^\w{18,18}$/;  //身份证格式正则表达式：身份证要18位 
  if(idcardj.value.length == 0){ 
    erridcardj.innerHTML="身份证号不能为空"
    erridcardj.className="error"
    return false; 
    } 
  if(!pattern.test(idcardj.value)){ 
    erridcardj.innerHTML="身份证号不合规范"
    erridcardj.className="error"
    return false; 
    } 
   else{ 
     erridcardj.innerHTML="格式正确"
     erridcardj.className="success"; 
     return true; 
     } 
  }

  //验证本人手机号码
  function checkPhoneNum(){ 
  var phonenum = document.getElementById('PhoneNum'); 
  var errphonenum = document.getElementById('PhoneNumErr'); 
  var pattern = /^\w{11,11}$/;  //手机号码格式正则表达式：手机号码要11位 
  if(phonenum.value.length == 0){ 
    errphonenum.innerHTML="手机号码不能为空"
    errphonenum.className="error"
    return false; 
    } 
  if(!pattern.test(phonenum.value)){ 
    errphonenum.innerHTML="手机号码不合规范"
    errphonenum.className="error"
    return false; 
    } 
   else{ 
     errphonenum.innerHTML="格式正确"
     errphonenum.className="success"; 
     return true; 
     } 
  }

  //验证手机验证码
  function checkYanZheng(){ 
  var yanzheng = document.getElementById('YanZheng'); 
  var erryanzheng = document.getElementById('YanZhengErr'); 
  var pattern = /^\w{4,4}$/;  //手机号码格式正则表达式：手机号码要11位 
  if(yanzheng.value.length == 0){ 
    erryanzheng.innerHTML="验证码不能为空"
    erryanzheng.className="error"
    return false; 
    } 
  if(!pattern.test(yanzheng.value)){ 
    erryanzheng.innerHTML="验证码不合规范"
    erryanzheng.className="error"
    return false; 
    } 
   else{ 
     erryanzheng.innerHTML="格式正确"
     erryanzheng.className="success"; 
     return true; 
     } 
  }

  //用户协议
  function yhxy(){
    alert("用户协议用户协议用户协议用户协议！");
  }
  
  
</script>