회원 가입 기능을 구현하였다.
완성 페이지를 우선 살펴보도록 하자.
회원 가입 기능은 어떻게 구현할까?
구현해야 하는 기능을 먼저 살펴보자.
기본 기능
1. id 중복 확인
2. 비밀번호 재확인
추가 기능
1. 아이디 포맷 확인
2. 비밀번호 포맷 확인
구현 순서
1. 회원 가입 페이지로 왔을 때 get 요청 처리
2. 아이디 중복 확인을 클릭 했을 때, db로 부터 id 중복 확인
3. 가입하기 버튼을 클릭 했을 때, 아이디 포맷 확인, 비밀번호 포맷 확인, 비밀번호 재확인
4. 모든 조건을 만족하는 경우 db에 사용자 정보 저장
1. 회원 가입 페이지로 왔을 때 get 요청 처리
이전에 좋아요 기능을 처리할 때는 get 요청 이 왔을 때 처리해야 하는 부분들이 많았다.
이번에는 그것과는 다르게 처리할 내용이 없다.
바로 createAccount.html로 화면을 전환해주면 된다.
@app.route('/members/new', methods=['GET'])
def createAccount_get():
return render_template("createAccount.html")
아주 편하다
다음 단계로 넘어가보자.
2. 아이디 중복 확인을 클릭 했을 때, db로 부터 id 중복 확인
id를 입력하는 input 태그, "input-id" 라는 id 를 일단 기억하자
중복 확인 button이다.
중복 확인을 누르게 되면 check_dup() 함수가 실행된다.
<div class="box2">
<div class="icon"><ion-icon name="person"></ion-icon></div>
<input id="input-id" type="text">
<input type="button" id="dup-button" onclick="check_dup()" value="중복 확인" >
</div>
조금 까다로울 수 있는 아이디 중복 확인하는 부분이다.
차근 차근 살펴보자
중복 확인하려는 아이디를 받아와야 한다.
jquery를 이용하여 받아보자
아까 input-id 라는 id 를 기억하고 있는가?
그것을 이용하여 사용자로 부터 id 값을 받아온다.
let input_id = $("#input-id").val()
우선 아이디를 입력하지 않은 경우를 먼저 처리해보자
아이디를 입력하지 않았다면 "아이디를 입력해주세요" 문구를 추가하고 focus를 id쪽으로 돌려준다.
if (input_id == "") {
$("#help-id").text("아이디를 입력해주세요.").removeClass("is-safe").addClass("is-danger")
$("#input-id").focus()
return;
}id의 포맷을 확인하자
check_nickname_regex 라는 함수를 이용하여 id 포맷을 확인한다.
포맷을 통과하지 못한다면 아이디 형식을 확인하라는 문구를 보내주고 focus를 넘겨준다.
if (!check_nickname_regex(input_id)) {
$("#help-id").text("아이디의 형식을 확인해주세요. 영문과 숫자, 일부 특수문자(._-) 사용 가능. 2-10자 길이").removeClass("is-safe").addClass("is-danger")
$("#input-username").focus()
return;
}아이디 포맷을 확인하는 코드이다.
정규 문자를 이용하여 포맷을 확인하는 코드입니다.
정규 표현식 형태로 만든 객체는 test라는 메서드를 사용하여 포맷을 확인할 수 있습니다.
https://webclub.tistory.com/95
function check_nickname_regex(asValue) {
var regExp = /^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/;
return regExp.test(asValue);
}
회원 가입 기능의 거의 마지막 부분입니다!
post 요청을 보내고 처리해봅시다
$.ajax({
type: "POST",
url: "/members/new/check_dup",
data: {
userid_give: input_id
},
success: function (response) {
}
});post 요청이 왔습니다.
회원 아이디를 request.form을 이용하여 받고
db에서 중복되는 회원 아이디가 있는지 확인하고 반환합시다!
@app.route('/members/new/check_dup', methods=['POST'])
def check_duplicate_userId():
# 회원 아이디 중복 확인
# 데이터 베이스에서 회원 아이디가 존재하는지 확인하고
# 중복 유무를 exists 변수에 담아서 반환
userid_receive = request.form['userid_give']
exists = bool(db.test1User.find_one({"userid": userid_receive}))
return jsonify({'result': 'success', 'exists': exists})ajax에서 reponse 부분을 마무리 해 봅시다.
id가 존재하는 경우에는 존재한다고 알려주고 is-danger 클래스를 이용하여 텍스트 색상을 변경해줍시다
is-danger, is-safe 이런 클래스는 우리가 bulma를 불러왔기 때문에 사용가능한 것입니다.
$.ajax({
type: "POST",
url: "/members/new/check_dup",
data: {
userid_give: input_id
},
success: function (response) {
if (response["exists"]) {
$("#help-id").text("이미 존재하는 아이디입니다.").removeClass("is-safe").addClass("is-danger")
$("#input-username").focus()
} else {
$("#help-id").text("사용할 수 있는 아이디입니다.").removeClass("is-danger").addClass("is-success")
}
}
});
짠!!
지금까지 아이디 중복 확인 기능을 만들어 보았습니다.
다음 시간에는 회원 가입 기능을 마무리 해 보겠습니다.