form 이름,패스워드 검사

이름 5자 이상 입력 검사

 

window.onload=function(){

  var elUsername = document.getElementById('username'); // input 지정
  var elMsg = document.getElementById('feedback');  // 피드백이 나올 곳 지정

  function checkUsername() {  // 함수 생성

    if (this.value.length < 5) {                         
    	elMsg.textContent = 'Username must be 5 characters or more'; 
    } else {
    	elMsg.textContent = '';
    }
  }

  elUsername.addEventListener('blur', checkUsername, false);  // 함수에게 이벤트리스너
}

<div id="page">
  <h1>List King</h1>
  <h2>New Account</h2>
  <form method="post" action="">

    <label for="username">Create a username: </label>
    <input type="text" id="username"/>
    <div id="feedback"></div>

    <label for="password">Create a password: </label>
    <input type="password" id="password" />

    <input type="submit" value="sign up!" />

  </form>
</div>

 

 

 

패스워드 재확인 검사

window.onload = function () {
  //문서 객체 가져오기
  var form = document.getElementById('form');
  var password = document.getElementById('password');
  var check = document.getElementById('password-check');

  //유효성 검사 
  form.onsubmit = function () {
    if (password.value == check.value && password.value != '') {
    } else {
      alert('비밀번호를 다시 입력해주세요');
      //기본 이벤트 제거 
      return false;  //false 값을 return하면 이벤트가 제거되어 처리되지 않는다.
    };
  };
};

<form id="form" action="">
  <p>아이디 <input id="id" type="text" /></p>
  <p>비밀번호 <input id="password" type="password" /></p>
  <p>비밀번호 확인 <input id="password-check" type="password" /></p>
  <p><input id="Submit1" type="submit" value="제출" /></p>
</form>