<form action="/postfrom_regex" name="login" method="post">
<input
type="text"
name="id"
placeholder="ID 입력"
pattern="^([a-zA-Z0-9가-힣]{4,})$"
title="대소문자, 한글, 숫자, 4글자 이상"
required
>
<input
type="password"
name="pw"
placeholder="pw"
pattern="^([a-z0-9]){8,12}$"
title="소문자, 숫자로 8자리 이상 12자리 이하"
required
>
</form>
<!-- /:정규식을 사용한다는 의미 > 정규식을 //으로 감싼다. > 자바스크립트에서 쓰임 (html은 쓰일 필요 없어서 안씀)
데이터의 시작점(^)과 데이터의 끝점($)
범위[a-z]:a부터 z까지 중 문자 하나
[가-힣]:한글의 모든 음절 범위 표현
개수 {} >{2, 4}:2개부터 4개까지
():그룹 검색 및 분류
.:임의의 글자 하나
+:1개 이상의 글자
*:0개 이상의 모든 문자
?:0~1번 반복되는 문자열 -->
/ :정규식을 사용한다는 의미 > 정규식을 //으로 감싼다. > 자바스크립트에서 쓰임 (html은 쓰일 필요 없어서 안씀)?? 데이터 : 시작점(^)과 데이터의 끝점($) 범위 [a-z] : a부터 z까지 중 문자 하나 [가-힣] : 한글의 모든 음절 범위 표현 개수 {2, 4} : 2개부터 4개까지 ( ) : 그룹 검색 및 분류 . : 임의의 글자 하나 + : 1개 이상의 글자 * : 0개 이상의 모든 문자 ? : 0~1번 반복되는 문자열
javascript 응용 유효성 검사
정규표현식.test(“검사할 문자열”)
검사를 통과하면 true
검사를 통과하지 못하면 false
\d{3} 세개의 숫자
휴대폰번호 3글자 - 3글자아니면 4글자 - 4글자
통과하지 않으면 아래 텍스트가 뜬다.
정규식을 썻다해서 유효성 검사가 아님
인풋값에 대해서 검사를 진행 => 올바르고 올바르지 않은 값에 대해 검사를 진행 했을때 유효성 검사를 햇다고 한다.
<input
type="text"
name="phone"
pattern="/^\d{3}-\d{3,4}-\d{4}$"
placeholder="010-0000-0000"
oninput="phone_validation(this);"
required
>
<div class="error"></div>
<script>
function phone_validation(obj){
var regPhone = /^\d{3}-\d{3,4}-\d{4}$/;
if (regPhone.test(obj.value) === false ) {
$(".error").text('휴대폰 번호를 000-0000-0000 형식에 맞게 입력해주십시오.');
} else {
$(".error").text("");
}
}
</script>
<!-- 정규표현식.test('검사할 문자열')
-검사를 통과하면 true
-검사를 통과하지 못하면 false
\d{3} 세개의 숫자
-->
test()메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를true또는false로 반환합니다.
.text()
선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다.
var jb = $( 'h1' ).text();
는 h1 요소의 내용을 변수 jb에 저장합니다.
.text( textString )
이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어
$( 'div' ).html( '<h1>Lorem</h1>' );
는 div 요소의 내용을 <h1>Lorem</h1>로 바꿉니다. HTML 태그는 텍스트로 처리합니다.
일반 form 전송은
<input type = " submit " > 이나 < button type=" submit " > 을 이용해 전송
<input method = "get or post"> 인풋 태그에 메소드 지정
전송 시 페이지 이동
동적 form 전송
네이버같은 경우 비번이 틀리면, 페이지가 바뀌지않고 메세지가 뜸
> 비동기 hppt 통신 이라고 한다.
동기 방식
한번에 하나만 처리 > 페이지를 아예 이동해 서버가 데이터 처리
비동기 방식
서버에 데이터를 보내 놓고, 서버의 응답을 기다리면서 다른 처리 가능!
일반 폼 전송과 동적 폼 전송의 차이점
dynamic
웹 문서가 정적으로 멈춘 것이 아닌 일부 내용이 실시간으로 변경되는 것
비동기 http통신 : 폼의 데이터를 서버와 dynamic하게 송수신 하는 것
ex) 메일이 새로오면, 숫자만 새로 추가 됨
특정한 부분만 실시간으로 변화 = 웹문서를 다이나믹하게 설정했다
비동기 http 통신의 방법은 3가지가 있다.
Ajax
xml 마크업 언어
html과 비슷한 마크업 언어
html과 달리 정해져 있는 것이 아니라 사용자가 정의해서 사용 가능하다.
js를 이용해 클라이언트와 서버간 데이터를 주고 받는 비동기 http 통신
장점
제이쿼리 통해 쉽게 구현 가능
Error, Success, Complete 의 상태를 통해 실행 흐름을 조절할 수 있다.
이때 보내는 요청 데이터가 axios({data: {여기가 데이터 들어갈 부분 ( key:value 형태로 )})
json은 딕셔너리 형태 { 키: 벨류 }로 되어있는 데이터 표현식 데이터를 json으로 나타낼 수 있다. (경량의 DATA 교환 형식)
쓰는 이유 : 서버 클라이언트와 왓다갓다 할때 json으로 하자 라는 규약이 있다.
2. 서버가 요청값 데이터를 받는다
서버에서는 클라이언트의 요청 데이터를
get 방식일 경우에는 params로 보낸 걸 req.query로 받고,
post 방식일 경우에는 data로 보낸 걸req.body로 받는다.
즉, 클라이언트에서 data: { a: 1 } 이렇게 보냈으면 > 서버에서 req.body = { a: 1 } 비동기 http 통신을 할 때는 요청을 보냈으면 그에 대한 응답을 무조건 보내야 한다. 만약, 응답을 보내지 않으면 클라이언트(요청을 보낸 쪽)은 무한정 기다린다. ( 대기상태 )
3. 서버는 정해진 작업을 하고, 응답한다.
서버에서는 추가작업을 하고, 클라이언트에게 응답한다. 이때,
응답하는 함수가 res.send()
promise 기반 > return 받아오는 것은 함수 실행하고 .then으로 받는다.
예시
res.send로 서버가 요청에 대한 응답을 보내줫다
값이 정확히 나오지 않는다.
이런식으로 저장되어있는 객체.key
res.data = {aa: ~~~} 객체에 대한 원하는 키를 정확히 해야 정확한 값을 받을 수 있다.
res.data.aa 이런식으로 정확한 값을 받아 올 수 있다.
4. 클라이언트가 응답을 받는 곳 .then
클라이언트는 보낸 요청에 대한 응답을 .then( function(rrr){ }) 으로 받는데,
이때 rrr에 들어오는 값이 res.send(~~~~) 에서 보낸 ~~~~ 값이다.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<body>
<button type="button" onclick="sendGet()">get</button>
<button type="button" onclick="sendPost()">Post</button>
<form id="form_info">
<input type="text" name="name">
</form>
</body>
<script>
function sendGet(){
var form = document.getElementById('form_info');//name
//form.name.value (폼 태그 안에 네임속성이 네임인 벨류를 가져오겠다)
//form.age.value (age속성의 값) 이런식이 가능해서 모든 fom에 이름지정 필용 ㅓㅄ다.
//네임속성 지정해서 값을 가져오는 방법
//axios get 전송
//axios 는 값으로 메소드형식, url주소 받을 데이터는 parms?
axios({
method : "get",
url: "/form",
params: { name: form.name.value } //입력창값을 보내겟다
}).then(function(res){
// console.log(res); //then으로 받은 형태 확인(요청에 대한 답을 다 보내준다.)
//res.data = {msg: ~~~} 객체에 대한 원하는 키를 정확히 해야 정확한 값을 받을 수 있다.
alert(res.data.msg);
});
}
function sendPost(){
var form = document.getElementById('form_info');
axios({
method : "post",
url : "/form", //post는 body에서 받아서 data에 담긴다 외워! get은 params!!
data: { name: form.name.value
}
}).then(function(res){
alert(res.data.msg);
});
}
</script>
