[Flask] AJAX 비동기 통신으로 주민등록번호 유효성 검사하기 - 2

mason.98·2021년 12월 8일
0

Flask

목록 보기
7/10

흐름 👀


  • 비밀번호 인증 -> 완료 시, 버튼 변경 (로그인 계정의 비밀번호와 비교)
  • 유효성검사 -> 완료 시, 버튼 변경
  • 전송하기 -> 1,2번 완료 시, flask에서 DB에 주민등록번호 추가/변경

이번 글에서는 유효성 검사 부분을 작성하겠다.


유효성검사 ✔



1. HTML 📝

<!-- 주민등록번호 area -->
<div class="joo_area">
  <!-- 제목 area -->
  <div class="joo_area_label">
    <h3><label for="fir_joo">주민등록번호</label></h3>
    <span class="alert_box point_color">변환된 주민등록번호를 확인해주세요.</span>
  </div>
  
  <!-- 입력 area -->
  <div class="joo_area_input">
    <input type="text" id="fir_joo" name="fir_joo" value="{{ fir_joo }}"
  	maxlength="6" onkeyup="this.value=this.value.replace(/[^0-9]/g,'');">
  	<input type="text" id="sec_joo" name="sec_joo" value="{{ sec_joo }}"
  	maxlength="7" onkeyup="this.value=this.value.replace(/[^0-9]/g,'');">
  </div>
  <span class="error_box" id="joo_error">주민등록번호가 유효하지 않습니다.</span>
  
  <!-- 유효성 검사 area -->
  <div class="val_area" >
  	<h3><label for="val_btn" id="val_label">유효성검사</label></h3>
  	<input type="submit" id="val_btn" name="val_btn">
  </div>
</div>

👉 제목 area
주민등록번호 제목 area 이다.

👉 입력 area
주민등록번호의 값은 id=fir_joo, id=sec_joo로 추출할 수 있다.
주민등록번호가 유효하지 않을 경우 css로 숨겨놓았던 span태그가 출력된다.

👉 유효성검사 area
비밀번호 확인 버튼 클릭 시, Javascript로 비밀번호의 값을 넘긴다.


2. JavaScript(AJAX) 📝

// 주민등록번호 유효성 검사를 위한 변수선언
const joo_input1 = document.querySelector("#fir_joo");
const joo_input2 = document.querySelector("#sec_joo");
const joo_btn = document.querySelector("#val_btn");
const joo_area = document.querySelector(".val_area");
const joo_label = document.querySelector("#val_label");
const joo_error = document.querySelector("#joo_error");
let joo_status = true; // 인증완료시 false 로 변경

// 주민등록번호 유효성 검사 버튼 클릭 시
joo_btn.addEventListener('click', ()=> {
  // 안내메시지 삭제
  document.querySelector(".alert_box").style.display = "none"; 
  let joomin = joo_input1.value + joo_input2.value; // 입력값 저장
  joomin = joomin.split(''); // 1자씩 저장
  const weight = [2,3,4,5,6,7,8,9,2,3,4,5]; // 가중치

  for(let i=0; i<joomin.length-1; i++){
  	joomin[i] = joomin[i] * weight[i];
  }
  const last_joo = joomin[joomin.length-1];

  let sum = 0;
  for(let i=0; i<joomin.length-1; i++){
  	sum += joomin[i];
  }
  sum = sum % 11;
  sum = 11 - sum;
  if (sum > 9){   // 9보다 크면 10으로 다시 나누고 나머지 저장
    sum = sum % 10;
  }

  // 주민등록번호가 유효할 때
  if(sum == last_joo){
  	successAlert(); // 성공 알림창 함수 실행
    // 비활성화 하기
    disabled(joo_input1, joo_input2, joo_btn, joo_area, joo_label, joo_error); 
    joo_status = false;
    
    // flask 에 전달할 input 값/종류를 JSON 형태로 선언
    const postdata = {  
      'kind': 'joo'
    }
    
    $.ajax({
    	type: 'POST',
        data: JSON.stringify(postdata),
        dataType : 'JSON',
        contentType: "application/json",
        success: function(result){
        },
      	error: function(result){
      	ajaxAlert(false); // 비동기 통신 실패시 알림창 실행
        }
    })
  }
  // 주민등록번호가 유효하지 않을 때
  else {  
    failedAlert();  // 실패 알림창 함수 실행
    error_msg(joo_input1, joo_input2, joo_error); // 에러메시지 관련 함수 실행
  }
});

한줄씩 해석해보자.


// 주민등록번호 유효성 검사 버튼 클릭 시
joo_btn.addEventListener('click', ()=> {
  // 안내메시지 삭제
  document.querySelector(".alert_box").style.display = "none"; 
  let joomin = joo_input1.value + joo_input2.value; // 입력값 저장
  joomin = joomin.split(''); // 1자씩 저장
  const weight = [2,3,4,5,6,7,8,9,2,3,4,5]; // 가중치

유효성검사 버튼을 눌렀을 때 실행된다.
만약 alert_box가 사용자에게 보인다면, 안보이게 수정한다.
joomin 변수에 입력받은 주민등록번호 13자리를 저장한다.
joomin 변수를 split()함수로 1자씩 저장한다.
weight 변수의 들어있는 가중치와 곱하기 위해서이다.


주민등록번호 유효성검사 흐름 👀

다음 코드는 주민등록번호 유효성검사 코드이다. 출처


1. 주민등록번호의 각 자리의 숫자와 가중치 weight 를 곱한다.

joomin.length-1 만큼 for문을 돌리는 이유는 
주민등록번호의 마지막 자리 수는 그대로 냅둬야 되기 때문이다.
for(let i=0; i<joomin.length-1; i++){
  	joomin[i] = joomin[i] * weight[i];
}

2. 주민등록번호의 각 자리의 수와 가중치를 합한다.

let sum = 0;
for(let i=0; i<joomin.length-1; i++){
  sum += joomin[i];
}
const last_joo = joomin[joomin.length-1]; // 주민등록증의 마지막 자리의 수를 미리 빼놓는다.

3. 합한 값을 11로 나눈 뒤, 나머지 값에서 11을 뺀다.

sum = sum % 11; // 11로 나누고 나머지 값 저장
sum = 11 - sum; // 나머지 값에서 11 빼기

4. 나머지가 10의자리가 되면 10의자리를 버린다.

if (sum > 9){   // 9보다 크면 10으로 다시 나누고 나머지 저장
  sum = sum % 10;
}

5. 결과가 주민등록번호의 마지막 자리의 수와 같으면 유효한 주민등록번호이다.

sum == last_joo

// 주민등록번호가 유효할 때
if(sum == last_joo){
  successAlert(); // 성공 알림창 함수 실행
  // 비활성화 하기
  disabled(joo_input1, joo_input2, joo_btn, joo_area, joo_label, joo_error); 
  joo_status = false;
  const postdata = {  // flask 에 전달할 input 값/종류를 JSON 형태로 선언
    'kind': 'joo'
  }
  $.ajax({
    type: 'POST',
    data: JSON.stringify(postdata),
    dataType : 'JSON',
    contentType: "application/json",
    success: function(result){
    },
    error: function(result){
      ajaxAlert(false); // 비동기 통신 실패시 알림창 실행
    }
  })
}
// 주민등록번호가 유효하지 않을 때
else {
    failedAlert();  // 실패 알림창 함수 실행
    error_msg(joo_input1, joo_input2, joo_error); // 에러메시지 관련 함수 실행
}

유효한 주민등록번호일 때 😃
successAlert(): 성공 알림 함수를 실행한다. sweerAlert2를 사용했다.
disabled(): 버튼 및 css를 변경하는 함수이다.
joo_status: 유효성검사를 완료했다는 표시이다.
postdata: 서버에 보낼 JSON 변수를 생성한다.
$.ajax(): Python과 비동기 통신을 하기 위한 제이쿼리 함수이다.
📌비동기 통신 성공시 아무런 작업을 하지 않는다. -> successAlert()를 실행했기 때문
📌비동기 통신 실패시 비동기 통신 실패 알림창 함수를 실행한다.


유효하지 않은 주민등록번호일 때 😥
failedAlert(): 주민등록번호가 유효하지 않다는 알림 함수를 실행한다.
error_msg(): 비밀번호 input 아래에 에러메시지를 출력한다.


3. Python(FLASK) 📝

import flask import Blueprint, request, jsonify
from werkzeug.security import check_password_hash
from models import User

bp = Blueprint('ocr', __name__, url_prefix='/ocr')

@bp.route('/print/', methods=['POST', 'GET'])
def print():
	if request.method == 'POST':
    	user = User.query.filter_by(username=g.user.username).first()
        
        if request.get_json():  # 비동기 통신의 경우
            result = request.get_json()  # 비동기 통신 데이터 저장
            
            if result['kind'] == 'password':  # 데이터의 종류가 password 일 경우
                ...
            elif result['kind'] == 'joo':  # 데이터의 종류가 joo 일 경우
            	return jsonify(result="success", data=result)

한줄씩 해석해보자.


if request.method == 'POST':
   user = User.query.filter_by(username=g.user.username).first()

POST 형식으로 데이터가 왔을 때 응답한다.
user 변수에는 현재 로그인되어있는 계정의 정보들을 담는다.


if request.get_json():  # 비동기 통신의 경우
   result = request.get_json()  # 비동기 통신 데이터 저장

JSON 형태로 비동기 통신으로 왔을 경우에 result 변수에 전해준 데이터를 저장한다.


elif result['kind'] == 'joo':  # 데이터의 종류가 joo 일 경우
     return jsonify(result="success", data=result)

kind키의 값이 joo일 경우에 jsonify() 함수로 자바스크립트에 반환한다.
반환할 때, result,data를 사용하는 이유는 나중에 혹시 쓸 일이 있을까 싶어서 써놨다. ㅎㅎ


아래처럼 간단하게 작성해도 된다!

elif result['kind'] == 'joo':  # 데이터의 종류가 joo 일 경우
     return jsonfiy()
profile
wannabe---ing

0개의 댓글