더북(TheBook)
ASP.NET & Core를 다루는 기술
더북(TheBook)

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 자바스크립트 함수를 호출해서 이름과 내용에 대한 유효성 검사를 진행하는 방식이다. 이렇게 폼에 대한 유효성 검사를 진행하는 방식은 아주 오래 전부터 사용하던 방식이며 가장 일반적인 방식이다.