회원가입
1. 아이디값
아이디값을 받고 중복확인 버튼을 누르면
1.입력값이 비어있는지 2.규칙에 맞는 값인지 3.이미 DB에 저장되어있는 아이디인지
위 1,2,3을 확인하고 모두 통과하면 DB에 새로운 아이디정보를 저장한다
<!--html--> <input id="id" class="input" type="text" placeholder="아이디"> <!--중략--> <button class="button is-sparta" onclick="check_dup()">중복확인</button> <!--중략-->
//js // 입력받을 값의 규칙을 아래와 같이 정해준다 function is_nickname(asValue) { var regExp = /^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/; //[]는 문자열 중 하나를 {}는 숫자를 선택한단 의미이다 //[ab]이면 a,b중 하나를 선택하겠다란 의미로 볼 수 있다 //[문자-문자]아스키 코드상 해당문자와 해당문자 사이 모든 문자를 선택한다 //[a-z]이면 아스키코드상 a와z사이의 모든 문자의 선택을 말한다 //[^(클래스조합)]은 클래스 조합안의 문자는 제외한다는 이야기로 //[^A-Za-z]라면 아스키코드상 A와 Z사이, a와 z사이를 제외한 문자를 선택한다는 이야기다 // /^는 특수문자 "/"를 입력할 수 있게한다 // $/는 줄의 끝을 뜻한다 // ?=는 전방 탐색기호라고 한다(찾아봐도 잘 모르겠다 넘어가자) // 이외에도 엄청많음 그래도 내가 이해하기에 // https://justkode.kr/data-science/regex-1 // 위 링크가 잘정리됨 나중에 찾아봐 보람악 return regExp.test(asValue); // 어떤 값을 asValye란 파라미터에 담아오면 regExp에 정의된 규칙에 맞는지 // 확인하여 내뱉을 것이다 } function is_password(asValue) { var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/; return regExp.test(asValue); }
//위 input#id값을 받아 username에 담아서 사용할것이다 let username = $("#id").val()
//먼저 1.입력값이 비어있는지를 확인한다 if (username == "") { //만약 username에 담아온 값이 비어있다면 $("#help-id").text("아이디를 입력해주세요.").removeClass("is-safe").addClass("is-danger") //위의 코드를 실행하라 //여기서는 어딘가에 있는 #help-id의 내용을 "아이디를 입력해주세요"로 바꿔주고 //원래 가지고있던 .is-safe의 스타일값을 버리고 .is-danger의 스타일값을 사용하여 //값이 담기지않음을 알리고 있 //이렇게 사용하려면 .is-safe .is-danger의 css가 먼저 정의되어있어야겠딩 $("#id").focus() //그리고 input#id영역을 포커스해준다 //반대되는 코드로는 blur()가 있다고 한다 나중에 찾아볼거다 return; 위의 내용을 내뱉어라 }
//값이 있다면 다음으로 2.규칙에 맞는 값인지를 확인한다 if (!is_nickname(username)) { //만약 is_nickname가 false라면 $("#help-id").text("아이디의 형식을 확인해주세요. 영문과 숫자, 일부 특수문자(._-) 사용 가능. 2-10자 길이").removeClass("is-safe").addClass("is-danger") //위의 코드를 실행해라 $("#id").focus() return; }
// 만약 1,2번을 통과했다면 서버에 입력값이 이미 있지는 않은지 확인한다 // 입력받은 값을 서버로 보내서 있는지 확인요청을 해야겠지??! Ajax를 이용해서 확인요청 ㄱㄱ // Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다 //더 궁금하면 http://www.tcpschool.com/ajax/ajax_intro_basic 읽어보기 $.ajax({ type: "POST", //프스트형식으로 url: "/sign_up/check_dup", // /sign_up/check_dup에 data: { username_give: username //username을 username_givedp에 담아서 서버로 보낼거야 }, success: function (response) { //요청이 성공했다면 이 함수를 실행해 줘 if (response["exists"]) { //만약 받은 값이 true라면 $("#help-id").text("이미 존재하는 아이디입니다.").removeClass("is-safe").addClass("is-danger") //#help-id에 "이미존재한다"는 텍스트로 바꿔주고 .is-safe클래스를 빼주고 .is-danger클래스를 붙여줘 $("#id").focus() } else { // false라면 $("#help-id").text("사용할 수 있는 아이디입니다.").removeClass("is-danger").addClass("is-success") //#help-id에 "사용할수있다"란 텍스트로 바꿔주고 .is-danger을 빼주고 .is-success클래스를 붙여줘 // is-success를 붙여주는 이유는 //나중에 회원가입 버튼을 눌렀을때 //중복검사가 완료되었는지를 확인하기 위해서야 } $("#help-id").removeClass("is-loading") } });
#python @app.route('/sign_up/check_dup', methods=['POST']) def check_dup(): username_receive = request.form['username_give'] #username_give로 받아온 값을 여기서는 username_receive에 넣어서 사용할거야 exists = bool(db.users.find_one({"username": username_receive})) #db에서 하나를 찾을건데 db의 username값중 받아온 username_receive값과 동일한 친구가 있는지 찾아 #찾았다면 그 값을 불린형식으로 바꿔서 exists에 넣어줘 #0이라면 false를 1이상이라면 true가 넣어질거야 return jsonify({'result': 'success', 'exists': exists}) #결과 값을 클라이언트의 success에 보내주고
오늘 한 질문:
exists = bool(db.users.find_one({"username": username_receive}))
return jsonify({'result': 'success', 'exists': exists})
위 코드사용하는 부분인데요
서버에서 클라이언트가 보내온 데이터와 db의 username에 있는 값 중 같은게 있는지를
찾아서 불린값으로 exists에 담아서 클라이언트로 보내고 있는거잖아요..?!
그럼 펄스로 갈수도 트루로 갈수도 있는거 아닌가요?..
이거를 이용해서 클라이언트에는
success: function (response) {
if (response["exists"]) {
$("#help-id").text("이미 존재하는 아이디입니다.").removeClass("is-safe").addClass("is-danger")
$("#id").focus()
} else {
$("#help-id").text("사용할 수 있는 아이디입니다.").removeClass("is-danger").addClass("is-success")
}
$("#help-id").removeClass("is-loading")
}
이렇게 사용하고 있는데
그럼 if (response["exists"]) 이 조건문이 계속 바뀌어서 false일때와 true일때 모두를 충족하게 되는거 아닌가요?...
근데 얘는 제가 해석한거와 다르게 너무 잘 트루일때 존재한다는 텍스트를 띄워주고 그렇지 않을때 사용할 수 없다는 텍스트를 띄워주고 있어서
혹시 코드를 제가 잘못이해하고 잇는걸까요
_
오늘 한 질문의 답
if문의 조건이 참일때 참이 아닐때 실행하는 함수이다
이미 서버에서 참 또는 거짓을 보내온것이다 그렇기때문에 참일때 response["exists"]여기에 참이오면
바로 밑줄부터 실행할테고 거짓이라면 else밑줄부터 실행할것이다
