회원가입 시 <form> 데이터 유효성 검사(onsubmit)하기

---

 

회원 가입 시에 입력한 정보를 제출(submit)하기 전, 데이터 유효성 검사를 거쳐 최종 제출

---

 

 

onsubmit
<form>의 데이터를 전송하기 전에 입력된 데이터의 유효성을 체크하기 위해 사용되는 이벤트

즉, 회원가입 버튼(input type="submit)을 누르면 제출이 실행되는데, 제출 전 유효성 검사가 시행 된 후 <form>데이터가 전송

<form   onsubmit = "return formCheck( ) "> </form>

 

 

 

1. <form> 양식

• 회원가입 버튼(submit)을 누르면, 제출 이전 formCheck 메서드가 먼저 실행되어 유효성 검사를 수행
• <form  onsubmit = "return formCheck( ) ">  :  formCheck 메서드 내의 리턴 값을 전달받기 위해서는 반드시 return을 사용하여 작성

<form action="/login/register" method="POST" onsubmit="return formCheck(this)">

    <input type="text" id="id" name="user_id" placeholder="아이디">
    <input type="text" name="passwd" placeholder="비밀번호">
    <input type="text" name="name" placeholder="이름">
    <input type="text" name="email" placeholder="비밀번호 분실시 확인용 이메일"> 
    <input type="text" name="birth" placeholder="생년월일 8자리(-포함)">

    <div class="sns">
        <label><input type="checkbox" name="sns" value="facebook"/>페이스북</label>
        <label><input type="checkbox" name="sns" value="instagram"/>인스타그램</label>
        <label><input type="checkbox" name="sns" value="kakaotalk"/>카카오톡</label>
    </div>

    <input type="submit" value="회원 가입"> 
    
</form>

 

 

2. formCheck 메서드 : <form>을 전송하기 전, 데이터의 유효성 검사

• formCheck 메서드 실행 후의 리턴 값이 <form onsubmit = "return formCheck( ) "> 에 전달
  • 리턴 값이 false인 경우,  return false가 되어 submit이 취소
  • 리턴 값이 true인 경우,  return true가 되어 submit이 완료

<script>
    function formCheck(form) {

        // id의 길이가 4글자 미만인 경우, 제출 취소
        if(form.user_id.value.length < 4) {
        	form.user_id.focus(); // 아이디 창에 마우스 커서 생김

         	return false; // 제출 취소
        }
        return true; // 제출
    }
</script>

 

 

 

 

 

---

 

참고  https://valar.tistory.com/9

---