[새싹x코딩온] 웹 개발자 부트캠프 과정 6주차 회고 | form 요청 보내기 / form validation

오늘은 1) form의 속성을 간단하게 복습한 뒤,
2) GET/POST 요청으로 서버에 form 데이터를 보내보고,
3) form 유효성 검사에 대해 블로깅 할 것이다.

---

form의 속성과 요소

form 속성

• action : 폼을 전송할 서버 주소 지정
• name : 폼을 식별하기 위한 이름 지정
• method : 폼을 서버에 전송할 HTTP 메소드 지정 (GET/POST)
• target : 현재 창에서 열지, 다른 창에서 열지 (_blank/_self)

 <form action="/get" method="get" target="_blank" name="login">

form 요소 / 각 요소의 속성

• input / type, name, readonly, autofocus, placeholder
• select - option : input의 객관식 버전
• label / for : for 속성에 연결할 요소의 id를 적어 label을 클릭해도 해당 요소로 가게 만듦
• fieldset - legend : 폼 태그 안에 있는 요소들을 그룹화

---

form 정보 받기 (GET / POST)

GET 요청

// index.ejs
<form action="/get" method="get" target="blank" name="login">
··· </form> // form 본문 생략

// index.js
app.get('/get', function(req, res) {
    console.log(req.query);
    res.render("result", {
        name: req.query.name
    })
    res.send('get 요청 성공!');
});

• req.query에 데이터가 담겨서 옴
• form 태그의 method를 get으로 해놓으면 get 요청
• 클라이언트가 get 요청으로 데이터를 보낼 때 url에 직접 query를 만들어서 전송 가능

POST 요청

// index.ejs
<form action="/post" method="post">
··· </form> // form 본문 생략

// index.js
app.post('/post', function(req, res){
    console.log(req.body);
    res.render("result", {
        name: req.body.name
    })
});

• post 요청에 대한 데이터는 req.body에 담아서 옴
• 정보가 숨겨짐. (url에 노출되지 않음) 데이터를 새로 생성하는 요청에 주로 사용

---

form validation (유효성 검사)

form validation
: form 요소들에 정보가 올바르게 입력되었는지 검사하는 것
input 태그에 유효성 검사 기능을 지정할 수 있음

input 태그에 지정 가능한 유효성 검사 기능

• required : 필수 값
• minlength / maxlength : 최소/최대 문자수
• min / max : 최소/최대 값
• type : 입력받는 정보 타입
• pattern : 정규식으로 검사

이 중 pattern 속성에 사용 가능한 정규식 regex(regular expression)을 알아보자.

정규식을 꼭 input 태그의 pattern 속성에 넣지 않아도 검사할 수 있는 방법이 있다.

비밀번호<input type="password" name="pw" id="error-px" oninput="vaildCheckPw(this)"/>
 <script>
        function vaildCheckPw(el){
            const regexPw = /^([a-z0-9]{8,})$/;
            const value = el.value;
            const error = document.getElementById("error-px");
            if(regexPw.test(value)){
            // regexPw.test("검사하고 싶은 값") => true or false return
                error.innerHTML = "";
                console.log("정규식 일치");
            } else {
                error.innerHTML = "소문자, 숫자로 조합된 8글자 이상으로 입력하시오";
                console.log("정규식 불일치");
            }
        }
    </script>