아래에서 사용한 코드는 ↓↓ github.com/ohse-emily/JavaScript_join_login ohse-emily/JavaScript_join_login Contribute to ohse-emily/JavaScript_join_login development by creating an account on GitHub. github.com 1. text 글자 길이 제한하기text 글자 길이 제한은 주민등록증, 전화번호, 핸드폰 번호 등, 정해져 있는 형식에 주로 쓰인다. 회원가입할 때 이름을 20글자로 제한 두는 방법 views - user - join.html
생각보다 간단하게 maxlength만 쓰면 된다. 회원가입할 때 20글자 이상은 자동으로 제한됨. minlength도 되나 싶어서 해보니 된다!
2. 패스워드 확인 (두 번 입력 모두 일치하는지 여부)2-1. 먼저 패스워드 입력하는 type=password 2개 만들기 views - user -join.html
name과 id 값 설정해주기 2-2. function 만들기 views- user - join.html
console.log확인 pwd1.value와 pwd2.value 를 사용하기 ! 2-3. 수정 및 추가해서 전체 코드 ↓↓↓
input type = "sumbit" 을 js 로 처리할 수 있다. input type = "button" 으로 수정 , form id 지정해서 .submit() 함수를 지정하면 된다. 3. 아이디 중복 체크 (userid = unique)마우스가 focusout 커서를 밖으로 옮겼을 때 ajax를 통해 아이디 중복 여부 알리기 3-1. p tag 만들기
3-2. script 추가 views - join.html
login_flag라는 변수에 기본값을 true로 설정 -> ajax를 통해 요 값을 전달할 예정 3-3. 아이디 text 에 id값 만들고 addEventlistener('focusout') 주기 html table
아래 script
3-4. 이제 Ajax 를 통해 요청하기 ajax axios 사용 위한 소스 script추가 (axios 사용하려면 반드시 추가 / 내장객체 x )
3-5. url 요청하는 ajax 변수에 넣기 (axios.get의 결과는 == promise 객체)
data라는 변수에 ajax으로 요청해서 받은 값을 넣겠다. 넣는 값은 promise 객체다. url http://localhost:3000/user/userid_check을 보낼건데 userid값을 get 값으로 넘기겠다. (js쪽에서 userid값을 DB와 비교해야하기 때문) 아직 /user/userid_check 이라는 url 받는 server쪽 만든 적이 없으니 이제 만들기 3-6. routers - user - index.js 추가
3-7. routers - user - user.controller.js추가
3-8. views - join.html 에 넘겨받은 data 값 console.log로 확인해보기 잘
들어왔군 3-9. 마지막!!!!!! data.data.login 을 loginflag 값으로 넣어 주기
data 라는 변수의 data라는 객체의 login 이라는 속성 값을 login_flag 에 넣는다 (true or false) 3-10. server on 하고 췤 이렇게 해서 page reloading 없이 중복체크 가능 ! 파일 요렇게 생김 질문 : 왜 user.controller.js 에서 바로 alert같은 js 함수 못쓰는지? |