스파르타 코딩클럽 11일 메이킹 챌린지 - 5

회원가입 페이지

보기와 같이 입력하지 않고 다음 input으로 넘어가면 가입하기 버튼이 비활성화 되면서 경고문이 뜨게 된다.

$("#rpw").focusout(function () {
let pw = $("#pw").val()
if ($(this).val() == '') {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_rpw").text("* 비밀번호를 입력하세요!");
} else if ($(this).val() != pw) {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_rpw").text("* 비밀번호가 일치하지 않습니다!");
} else {
$(this).css({"border-color": "#2eb82e"});
$('#submit').attr('disabled', false);
$("#error_rpw").text("");
}
});

비밀번호 재입력 부분에는 처음 입력한 비밀번호와 다를 경우 비밀번호가 일치하지 않습니다! 라는 경고를 띄우며 가입하기 비활성화 설정

$("#phone").focusout(function () {
$pho = $("#phone").val();
if ($(this).val() == '') {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_phone").text("* 휴대전화 번호를 입력하세요!");
} else if ($pho.length != 11) {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_phone").text("* 휴대전화 번호는 11자리 입력하세요!");
} else if (!$.isNumeric($pho)) {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_phone").text("* 휴대전화 번호는 숫자여야 합니다!");
} else {
$(this).css({"border-color": "#2eb82e"});
$('#submit').attr('disabled', false);
$("#error_phone").text("");
}
});

휴대전화 번호는 11자리 및 숫자가 아닐 경우 경고문과 함께 가입하기 버튼 비활성화 설정

 

@app.route('/review', methods=['POST'])
def write_review():
id_receive = request.form.get('id_give', False)
pw_receive = request.form.get('pw_give', False)
myName_receive = request.form.get('myName_give', False)
dob_receive = request.form.get('dob_give', False)
gender_receive = request.form.get('gender_give', False)
phone_receive = request.form.get('phone_give', False)

doc = {
'id': id_receive,
'pw': pw_receive,
'myName': myName_receive,
'dob': dob_receive,
'gender': gender_receive,
'phone': phone_receive
}

db.member.insert_one(doc)

return jsonify({'msg': '회원가입 완료!'})

 

else if ($("#phone").val() != '' && $("#rpw").val() != '' && $("#pw").val() != '' &&
$("#dob").val() != '' && $("#id").val() != '' && $("#myName").val() != '') {
$.ajax({
type: "POST",
url: "/review",
data: {
id_give: id,
pw_give: pw,
myName_give: myName,
doc_give: doc,
gender_give: gender,
phone_give: phone
},
success: function (response) {
swal({
title: "회원가입 완료!",
text: "",
icon: "success",
});
setTimeout('go_url()', 1000)
}
})
}

모든 창에 기입하고 가입하기 클릭시 member DB에 저장 후 회원가입 완료 메시지창 보여주기

정보 기입 시 가입하기 버튼 활성화

가입하기 버튼 클릭 시 메시지 창

 

회원 정보 DB에 저장

 

DB에 없는 회원정보로 로그인 시 메시지 창

DB에 등록된 아이디 및 비밀번호로 로그인 시 메시지 창

member DB에 저장된 아이디 및 비밀번호로만 로그인이 가능하며 로그인 성공 시 1초 뒤 메인 페이지로 이동하도록 소스 코드 작성