js 로그 인 및 등록 인터페이스 구현

5318 단어 js로그 인책.
로그 인 및 등록 페이지 의 HTML+CSS+JS 를 완 료 했 습 니 다.입력 항목 검 사 는 다음 과 같 습 니 다.
아 이 디 6-12 위
이니셜 은 숫자 가 안 돼 요.
알파벳 과 숫자 만 포함 할 수 있 습 니 다.
비밀번호 6-12 비트
등록 페이지 두 번 비밀번호 일치 여부
html 코드:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>   ，    ！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <link rel="stylesheet" href="../static/css/lx.css">

</head>
<body>
<div class="box">
 <h2>  </h2>

 <div class="input_box">
  <input id="uname" type="text" name="user" placeholder="      ">
 </div>
 <div class="input_box">
  <input id="upass" type="password" name="psw" placeholder="     ">
 </div>
 <div id="error_box"><br></div>
 <div class="input_box">
  <button type="button" class="btn btn-primary" onclick="fnLogin()">  </button>&nbsp&nbsp&nbsp&nbsp
  <a href="regist.html"><input type="button" class="btn btn-info" name="regist" value="  "></a>
 </div>



</div>
</body>
</html>
css 코드:

*{
 margin: 0;
 padding: 0;
 font-family:     ;
 font-size: 12px;
}
.box{
 width: 390px;
 height: 320px;
 border: solid 1px #ddd;
 background: #FFF;
 position: absolute;
 left: 50%;
 top:42%;
 margin-left: -195px;
 margin-top: -160px;
 text-align: center;
}
.box h2{
 font-weight: normal;
 color:#666;
 font-size: 16px;
 line-height: 40px;
 overflow: hidden;
 text-align: center;
 border-bottom: solid 1px #ddd;
 background: #f7f7f7;
}
.input_box{
 width:350px;
 padding-bottom: 15px;
 margin: 0 auto;
 overflow: hidden;
}
javascript 코드:

function fnLogin() {
 var oUname = document.getElementById("uname")
 var oUpass = document.getElementById("upass")
 var oError = document.getElementById("error_box")
 var isError = true;
 if (oUname.value.length > 20 || oUname.value.length < 6) {
  oError.innerHTML = "      6-20   ";
  isError = false;
  return;
 }else if((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
  oError.innerHTML = "        ";
  return;
 }else for(var i=0;i<oUname.value.charCodeAt(i);i++){
  if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57) && (oUname.value.charCodeAt(i)<97)||(oUname.value.charCodeAt(i)>122)){
   oError.innerHTML = "          ";
   return;
  }
 }

 if (oUpass.value.length > 20 || oUpass.value.length < 6) {
  oError.innerHTML = "     6-20   "
  isError = false;
  return;
 }
 window.alert("    ")
}
등록 인터페이스 html 코드:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>   ，    ！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container" style="width: 400px" align="center">
 <div id="header" style="background-color: aquamarine">
  <h2 align="center">  </h2>
 </div>
 <div id="content">
  <p align="center">  :
   <input id="uname" type="text" name="user" placeholder="        ">
  </p>
  <p align="center">  :
   <input id="upass" type="password" name="psw" placeholder="     ">
  </p>
  <div id="error_box"><br></div>
  <br>

  <button onclick="fnLogin()" class="btn btn-info">  </button>
 </div>
 <div style="background-color: aquamarine">
  <i>    @</i>
 </div>
</div>
</body>
</html>
실행 결 과 는 다음 과 같 습 니 다.


이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
vue 포장 후 공백 올 바른 처리 방법 표시
Vue 구성 요소 구현 tips 의 총 결

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage