[HTML5] HTML form과 유효성 검사

---

알고있으면 좋은 HTML5 Tip✨

---

Form

• 사용자가 정보를 입력 / 선택할 때 사용하는 HTML 태그이다.
• 사용자가 웹 사이트에 정보를 전송하는 것을 허용한다.
• text field, button field, select field 등의 역할을 수행한다.

(1) form의 기본 형태

<form action="receive" name="" target="" method="get">
	...
</form>

• action : 사용자가 입력한 데이터를 전송하는 방법, 어느 서버로 데이터를 보낼지 결정한다.
• name : form의 이름을 정한다. 거의 사용되지 않는다.
• target : a 태그에서 사용되는 target 속성과 같다. _self, _blank
• method : 일반적으로 get 방식과 post 방식이 있다.

<div class="button">
	<button type="submit">등록</button>
</div>

• submit : action 속성에 정의된 웹페이지로 전송한다.
• reset : 모든 폼 위젯을 기본 값으로 바꾼다.
• button : 기본 행동이 없으며, 클릭했을 때 아무것도 하지 않는다.

 

유효성 검사

• label 태그사이에 위치한 text, checkbox, radio 등은 클릭 가능 영역이 텍스트로 확장 된다.
• label 태그는 input 태그를 도와주는 역할이다.
• input 태그가 디자인 하기 힘들 때 label 태그로 연결해서 쉽게 디자인하거나 클릭 편의성을 높일 수 있다.

 

(1) form의 유효성 검사

• 서버로 데이터를 제출하기 전, 포함되어야 할 정보들이 올바른 형식이고, 입력 조건에 맞게 잘 입력되었는지 확인하는 것을 말한다.
• 회원 가입 시 : 아이디, 비밀번호, 이메일 주소 등을 필수 값으로 입력하도록 하는 것
• 비밀번호 입력 시 : 문자, 숫자, 기호 조합 8자리 이상 지정하도록 하는 것
• form의 유효성 검사 방법은 HTML5의 유효성 검사 기능(built-in form validation)을 사용하는 것과 JavaScript를 이용한 유효성 검사 방법이 있다.

(2) HTML5의 form의 유효성 검사

<form>
	<label for="choose"</label>
	<input id="choose" name="like" required>
	<button>Submit</button>
</form>

• required : 필수로 입력해야한다.
• minlength / maxlength : 최소 또는 최대 글자수를 지정한다.
• min / max : 숫자의 최소 값 또는 최대 값을 설정한다.
• type : 입력받을 데이터의 타입을 지정한다.
• pattern : 입력받을 데이터가 준수해야 할 정규 표현식을 설정한다.

(3) Javascript의 유효성 검사

        /* !!!아이디 중복 검사 */
        function idCheck() {
            let form = document.getElementById('form_membership');

            axios({
                method: 'post',
                url: '/user/id_check',
                data: {
                    user_id: form.id.value,
                }
            }).then((rep) => {
                return rep.data;
            }).then((data) => {
                // data는 UserController에서 true, false 형식으로 msg와 함께 보낸다.
                if (data.return) {
                    alert(data.msg);
                } else {
                    alert(data.msg);
                    form.reset();
                }
            });
        }

        /* !!!닉네임 중복 검사 */
        function nickCheck() {
            let form = document.getElementById('form_membership');

            axios({
                method: 'post',
                url: 'user/nick_check',
                data: {
                    nickName: form.nick.value,
                }
            }).then((rep) => {
                return rep.data;
            }).then((data) => {
                console.log(data);
                // data는 UserController에서 true, false 형식으로 보낸다.
                if (data.return) {
                    alert(data.msg);
                } else {
                    alert(data.msg);
                    form.reset();
                }
            });
        }


        /* 가입하기 버튼 클릭 시*/
        function membership() {
            let form = document.getElementById('form_membership');

            // 유효성 검사
            if (!form.checkValidity()) {
                form.reportValidity();
                return false;
            }

            axios({
                method: 'post',
                url: '/user/membership',
                data: {
                    user_id: form.id.value,
                    pw: form.pswd1.value,
                    name: form.name.value,
                    nickName: form.nick.value,
                    tel: form.mobile.value,
                    email: form.email.value,
                    gender: form.gender.value,
                    age: form.age.value
                }
            }).then((rep) => {
                return rep.data;
            }).then((data) => {
                console.log(data.return);
                alert('회원가입을 축하드립니다.');
                document.location.href = '/';
            })
        }

• 자바스크립트를 통해 미리 정의 해놓은 HTML과 연결하여 제약 조건 검증을 진행 할 수 있다.