글 작성자: juyoungit

데이터 유효성 검사

데이터 유효성 검사는 페이지 양식을 서버로 제출하기 이전에 사용자 입력값이 정확하며 문제가 없음을 확인하는 절차로서

페이지가 정상적으로 동작하고 서버단에서 잘못된 데이터로 문제가 일어나는 것을 막기 위해서 반드시 필요한 절차 입니다.

물론 위의 문제를 예방하기 위해서 양식이 서버측으로 전달된 후에 서버측에서도 데이터 유효성 검사를 수행합니다.

하지만 서버로 잘못된 형식의 양식을 제출한 후에 서버에서 유효성 검사를 하는 것 보다는 웹 브라우져에서 유효성 검사를

수행한 후에 문제가 있을 경우 미리 양식제출을 차단하는 것이 바람직합니다.

웹 브라우져에서 유효성 검사가 이루어지기 때문에 이를 "클라이언트 측 유효성 검사"라고 표현하기도 합니다.

 

이번 글에서 다룰 내용은 자바스크립트를 이용해서 데이터 유효성 검사를 수행하는 것입니다.

이 글에서 다루는 모든 유효성 검사는 모두 웹 브라우져에 의해서 일어나는 유효성 검사입니다.

 

Form의 사용

자바스크립트는 html의 input을 통해서 입력되는 값에 대한 유효성 검사 기능을 구현하는 데 사용할 수 있습니다.
여기서 말하는 유효성 검사란 각 항목에 대해서 입력형식을 지켜서 입력했지는 지(전화번호, 이메일 주소 등)
또는 필수로 입력해야하는 항목들에 대해서 모두 입력을 하였는 지 등을 말합니다.

function validateForm() {
  var x = document.forms[“myForm”][“name”].value;
  if (x == “”) {
    alert(“이름이 입력되지 않았습니다. 이름을 입력해주세요.”);
    return false;
  }
}

위의 코드는 name이라는 입력필드가 이름이 입력되지 않은 경우 경고 메시지를 출력하고 양식제출을 수행하지 않도록 하는
기능을 수행하는 함수를 정의한 것입니다.

 

그리고 다음과 같이 정의한 함수를 html 상에서 다음과 같이 작성함으로서 양식이 제출될 때 해당 함수를 호출할 수

있도록 코드를 작성할 수 있습니다.

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

위와 같이 코드를 구성하게 되면 웹 페이지 상에서 사용자가 submit 버튼을 클릭하여 양식을 제출하게 되면

양식을 제출하면서 유효성검사를 진행하는 함수 validateForm()을 호출하게 됩니다. 만약 해당 함수에서 규정한

조건을 제출하려는 양식이 충족하지 못한 경우 메시지를 띄워 경고하고 양식을 제출하지 못하도록

false를 반환합니다.

 

조금 다른 예시로 이번에는 사용자에게 1개의 자연수를 입력받되, 1에서 100사이의 정수를 입력받아야 하는 상황이라고

가정해보겠습니다. 이를 위해서 유효성 검사를 위한 함수정의와 html 요소 코드를 작성해보면 다음과 같습니다.

function validateForm() {
    var x = document.forms["myForm"]["number"].value;
    if(x < 1 || x > 100) {
        alert("지정한 범위 내의 수가 아닙니다.");
        return false;
    }
}
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  Number: <input type="text" name="number">
  <input type="submit" value="Submit">
</form>
<p><strong>주의! : </strong> 1 ~ 100 사이의 자연수를 입력하세요.<p/>

 

이와 같이 입력된 양식을 제출할 때 자바스크립트로 작성한 함수를 호출함으로서 입력된 값에 대한 유효성 검사를

수행하고 그 결과를 바탕으로 양식을 제출하거나 양식제출을 취소하고 사용자에게 재입력을 요청할 수도 있습니다.

 

그런데 아마 이 유효성 검사를 보시고 이러한 생각을 하실 수도 있습니다.

"html input 태그에서 required로도 내용이 입력되지 않은 것에 대한 유효성 검사는 할 수 있지 않나?"

"html input 태그에서 tel이나 email 타입의 경우에도 형식지정이 가능한데... 굳이 자바스크립트로 유효성 검사를?"

저도 처음으로 자바스크립트로 유효성검사를 진행하는 내용을 접했을 때 위와 같은 생각을 했습니다.

 

사실 required 같이 html input 태그 자체에서 유효성 검사를 진행할 수 있게 된 것은 HTML5에서 등장한 내용이라고

합니다. 즉, HTML5보다 이전 버전의 HTML 들에서는 자바스크립트를 이용해서 양식제출 시 유효성 검사를 진행

했던 것입니다. 물론 현 시점에서는 HTML6가 나왔고 그 기능들이 점점 좋아지겠지만 방법을 알지만 사용하지

않는 것과 방법을 몰라서 사용하지 못하는 것은 굉장히 큰 차이이기 때문에 이에 대해서 공부해보고자 합니다.

 

자바스크립트를 이용한 유효성 검사

우선 간단하게 필수 입력항목에 대한 유효성 검사를 진행하는 예시를 다뤄보도록 하겠습니다.

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="post">
  <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

<p>이름은 필수 입력 항목입니다. 정확히 입력했는 지 확인해주세요.</p>
</body>
</html>

 

위는 사용자에게 이름을 입력받는 소스입니다. 다음과 같이 input 필드에 이름을 입력하고 Submit 버튼을 클릭하면

서버로 입력된 양식에 제출됩니다. 그런데 필수입력 항목과 같이 반드시 내용을 가진 상태로 제출되어야하는 항목인 경우

우리는 이전에 input 태그에 대해 공부하면서 다음과 같이 require를 추가하면 이를 구현할 수 있음을 공부하였습니다.

<form action="/action_page.php" method="post">
  <input type="text" name="name" required>
  <input type="submit" value="Submit">
</form>

위와같이 form에 대한 코드를 작성하고 아무런 값을 입력하지 않은 상태로 Submit 버튼을 클릭하면 

다음과 같이 양식제출이 이뤄지지 않고 알림을 사용자에게 표시해주는 것을 확인할 수 있습니다.

 

하지만 이번에는 자바스크립트를 예외성 검사함수를 만들고 이 함수를 실행하여 예외성 검사를 수행할 수 있도록

만들어 보겠습니다.

function validate_name() {
  var x = document.forms["myform"]["name"].value;
  if(x == '') {
    alert('이름이 입력되지 않았습니다. 이름은 필수항목 입니다.');
    return false;
  }
}

위와 같이 이름이 입력되었는 지에 대한 여부를 판단하는 유효성 검사 함수를 정의하고

<form name="myform" action="/action_page.php" onsubmit="return validate_name()" method="post">
  <input type="text" name="name">
  <input type="submit" value="Submit">
</form>

HTML 상의 form을 작성함으로서 required를 사용한 효과와 동일하게 내용이 입력되지 않은 것에 대한

검사를 수행하고 양식제출이 진행되지 않도록 중단시킬 수 있습니다.

 

자바스크립트로 함수를 정의하는 부분에서 var x에 대한 다음 부분이 어떻게 구성된 것인지 궁금하실 겁니다.

var x = document.forms["myForm"]["name"].value;

해당 코드는 자바스크립트의  document.forms 객체를 이용해서 html에서 작성한 form의 요소들에 접근하는 것인데,

이는  HTML상에서 작성한 form을 배열의 형식을 이용해서 접근합니다.

그래서 위에서는 name 속성값을 이용해서 접근하였지만 해당 자리에 배열의 인덱스값이 들어가도 동일하게

접근할 수 있습니다. 즉, 위의 코드는 다음과 같이 작성하여도 동일한 의미를 가집니다.

var x = document.forms[0][0].value;

인덱스번호를 0, 0 으로 사용한 이유는 해당 접근하고자 하는 input 요소를 포함하는 해당 form이 html 코드상에서 첫번째로 위치하는 form이고 그 다음으로 접근하고자 하는 input 요소 또한 해당 form에서 첫번째로 위치하기 때문입니다.

 

하지만 다음과 같이 인덱스 번호를 이용해서 작성하게 되면 코드의 가독성이 떨어져 해당 변수가 어떤 요소의 값을 가져오는 것인지를 알 수가 없기 때문에 이전의 예시처럼 name 속성값을 이용해서 접근하는 것이 좋습니다.

 

저의 설명이 다소 부실한 부분이 있었습니다. 해당 부분의 내용에 대해서  잘 설명된 블로그가 있으니

해당 블로그의 글을 주소로 첨부하도록 하겠습니다. 위 내용이 이해가 잘 되시지 않는 분들은 참고하시기 바랍니다.

https://blog.naver.com/akira54055/60035061694

 

document.forms 객체

form에서 사용되는 각종 양식(input, select, textarea) 역시 자바스크립트를 이용하여 제어할 수 있다. 자...

blog.naver.com

 

 

유효성 검사 API

이번 글에서 유효성 검사 API 까지 다루고 싶었지만 아쉽게도 다루지 못하였습니다.

차후에 유효성 API와 관련된 글로 돌아오거나 해당 글에 유효성 검사 API 관련 내용을 업데이트 하는 것으로 하겠습니다.

 

 

 

 

 

 

 

 

부족한 글 읽어주셔서 감사합니다.

'Web Basic > JavaScript' 카테고리의 다른 글

자바스크립트 - HTML BOM  (0) 2020.07.31
자바스크립트 - HTML DOM  (0) 2020.07.28
자바스크립트 - 정규식(Regular Expressions)  (0) 2020.07.28
자바스크립트 - 반복문, break, continue  (0) 2020.07.28
자바스크립트 - Math 객체  (0) 2020.07.28

티스토리툴바