JavaScript 로그 인 인증 기본 튜 토리 얼

5797 단어 js로그 인 인증
본 논문 의 사례 는 js 로그 인 검증 의 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.의 세 가지 용법:
   1.에 넣 기
   2.에 넣 기

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>   ，    ！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <script type="text/javascript">alert('  javascript  ')</script>
</head>
<body>
<p id="demo">www</p>
<script>
 document.getElementById('demo').innerHTML = Date()
</script>
<div id="container" style="width: 400px" align="center">
 <div id="header" style="background-color: aquamarine">
  <h2 align="center">  </h2>
 </div>
 <div id="content">
  <form>
   <p align="center">  :
    <input id="uname" type="tex" name="user" placeholder="      ">
   </p>
   <p align="center">  :
    <input id="upass" type="password" name="psw">
   </p>
   <div id="error_box"><br></div>
   <br>
   <button onclick="fnLogin()">  </button>
   &nbsp&nbsp&nbsp
   <input type="button" name="regist" value="  ">
  </form>
 </div>
 <div style="background-color: aquamarine">
  <i>    @</i>
 </div>
</div>
</body>
</html>
   3.외부 JS 파일 에 넣 기
document.getElementById('demo').innerHTML = Date() 
캡 처 실행:

세 가지 출력 데이터 방식:
   1.document.write()방법 으로 내용 을 HTML 문서 에 쓴다.
   2.window.alert()를 사용 하여 경고 상 자 를 팝 업 합 니 다.
   3.innerHTML 을 사용 하여 HTML 요소 에 기록 합 니 다.
      1)."id"속성 을 사용 하여 HTML 요 소 를 표시 합 니 다.
      2).document.getElement ById(id)방법 으로 HTML 요 소 를 방문 합 니 다.
      3).innerHTML 로 요소 내용 을 가 져 오 거나 삽입 합 니 다.
코드 는 다음 과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>   ，    ！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <script type="text/javascript">alert('  javascript  ')</script>
</head>
<body>
<p id="demo">www</p>
<script>
 document.getElementById('demo').innerHTML = Date()
</script>
<button type="button" onclick=window.alert("number")>press</button>
</body>
</html>
캡 처 실행:

3.로그 인 페이지 준비:
    1.오류 알림 상자 추가.
    2.HTML+CSS 파일 을 작성 합 니 다.
    3.모든 입력 요소 의 id 설정
4.자 바스 크 립 트 함 수 를 정의 합 니 다.
      1.사용자 이름 검증 6-20 비트
       2.비밀번호 6-20 자리 검증
5.onclick 에서 이 함 수 를 호출 합 니 다.
 html 코드 는 다음 과 같 습 니 다:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>   ，    ！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <link rel="stylesheet" type="text/css" href="../static/css/lx.css" rel="external nofollow" >
</head>
<body>
<div class="div" id="container">
 <div id="header" >
  <h2 class="h">  </h2>
 </div>
 <div id="content">
   <p class="p">  :
    <input id="uname" type="text" placeholder="      ">
   </p>
   <p class="p">  :
    <input id="upass" type="password" >
   </p>
   <div id="error_box"><br>
   </div>
   <button onclick="fnLogin()">  </button>
   &nbsp&nbsp&nbsp
   <input type="button" name="regist" value="  ">
 </div>
 <div>
  <i>    @</i>
 </div>
</div>

</body>
</html>
js 파일 코드 는 다음 과 같 습 니 다:

function fnLogin() {
 var oUname = document.getElementById("uname")
 var oUpass = document.getElementById("upass")
 var oError = document.getElementById("error_box")
 if (oUname.value.length > 20 || oUname.value.length < 6) {
  oError.innerHTML = "   6-20   "
 }

 if (oUpass.value.length > 20 || oUpass.value.length < 6) {
  oError.innerHTML = "   6-20   "
 }
}
CSS 코드 는 다음 과 같 습 니 다.

.div {
 border: 5px solid #cccccc;
 width: 400px;
 text-align: center;
}
.p{
 font-family:     ;
}
.h{
 font-family:     ;
}
캡 처 실행:

 이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
vue-cli 프로젝트 에서 json-sever 로 mock 서버 구축
vue 포장 후 공백 올 바른 처리 방법 표시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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