ASP.NET & Core를 다루는 기술: 28.5.3 따라하기 2: 순수 HTML과 자바스크립트를 사용한 유효성 검사

2. Html 액션에 해당하는 Html.cshtml 뷰 페이지를 다음과 같이 작성한다. 순수한 HTML 코드로 폼과 자바스크립트를 사용한 고전적인 방식의 유효성 검사 코드가 들어 있다.

▼ /Views/FormValidationDemo/Html.cshtml

@{ 
  Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <title>순수 HTML</title>
  <script>
      function CheckForm() {
          var name = document.getElementById("txtName");
          var content = document.getElementById("txtContent");
          if (name.value.length < 1 || content.value.length < 1) {
              window.alert("이름과 내용을 입력하시오.");
              name.focus();
              name.select();
              return false;
          }
          return true; 
      }
  </script>
</head>
<body>
<h2>HTML 태그로 폼 구성</h2>
<form action="/FormValidationDemo/HtmlProcess" method="post" 
      onsubmit="return CheckForm();">
  이름: <input type="text" name="txtName" id="txtName" value="" /><br />
  내용: <input type="text" name="txtContent" id="txtContent" value="" /><br />
  <input type="submit" value="입력" />
</form>
</body>
</html>

입력 버튼을 클릭해서 폼의 내용을 전송(Submit)할 때 onsubmit 이벤트 처리기로 CheckForm 자바스크립트 함수를 호출해서 이름과 내용에 대한 유효성 검사를 진행하는 방식이다. 이렇게 폼에 대한 유효성 검사를 진행하는 방식은 아주 오래 전부터 사용하던 방식이며 가장 일반적인 방식이다.

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.