이번 글에서는 유효성 검사 부분을 작성하겠다.
<!-- 주민등록번호 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로 비밀번호의 값을 넘긴다.
// 주민등록번호 유효성 검사를 위한 변수선언
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
변수의 들어있는 가중치와 곱하기 위해서이다.
출처
weight
를 곱한다.joomin.length-1 만큼 for문을 돌리는 이유는
주민등록번호의 마지막 자리 수는 그대로 냅둬야 되기 때문이다.
for(let i=0; i<joomin.length-1; i++){ joomin[i] = joomin[i] * weight[i]; }
let sum = 0; for(let i=0; i<joomin.length-1; i++){ sum += joomin[i]; } const last_joo = joomin[joomin.length-1]; // 주민등록증의 마지막 자리의 수를 미리 빼놓는다.
sum = sum % 11; // 11로 나누고 나머지 값 저장 sum = 11 - sum; // 나머지 값에서 11 빼기
if (sum > 9){ // 9보다 크면 10으로 다시 나누고 나머지 저장 sum = sum % 10; }
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
아래에 에러메시지를 출력한다.
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()