2015년 1월 9일 금요일

php 간단 일기장 - 유효성 검증 - 클라이언트 유효성 검증 - 글 생성 / 수정하기

이 문서는 지속적으로 갱신되는 내용을 다룹니다.
최신 버전의 문서는 언제든지 http://crealnet.blogspot.kr에서 얻을 수 있습니다.
문서가 업데이트 될 때마다 이메일로 받아보고 싶으시다면 http://crealnet.blogspot.kr/p/pdf.html 를 사용해 주세요.
기타 추가적으로 필요하신 사항은 http://crealnet.blogspot.kr/p/blog-page.html에서 연락주시면 됩니다.
읽어주셔서 감사합니다!


php 간단 일기장 - 유효성 검증 - 클라이언트 유효성 검증 - 글 생성 / 수정하기

요구사항 
글 쓰기와 글 수정에서 Contents 는 1글자 이상 들어가야 한다.


시나리오
  • 글 생성 / 수정시 값을 서버로 보내기 위해서는 유저가 input submit 버튼을 눌러야 한다.
  • 버튼이 눌릴 때 Contents 가 1글자 이상인지 자바스크립트로 체크한다.
     
할일
  • Contents 의 길이를 체크해야 하기 때문에 자바스크립트에서 contents 를 식별할 수 있어야 한다. 따라서 contents 에 id 항목을 넣는다.
  • 실제로 Contents가 1글자 이상인지 체크하는 자바스크립트 함수를 만든다.
  • 버튼이 클릭될 때 자바스크립트 함수가 작동할 수 있도록 이벤트를 추가한다.


contents 에 id 붙이기
diaryedit.php
diarywrite.php
파일에서
<textarea name="contents" rows="3" cols="50">
부분을 
<textarea name="contents" id="contents" rows="3" cols="50">
처럼 바꾼다.
 
  
Contents 길이 체크 자바스크립트 함수 만들기
코드 
    <script type="text/javascript">
      function checkContentsLength()
      {
        var contents = document.getElementById('contents');
        var contentsValue = contents.value;
        if (contentsValue.length == 0) {
          alert('contents length is 0.');
          return false;
        }        
        else
        {
          return true;
        }
      }
    </script>
 
html 태그의 <head>와 </head> 사이에 넣는다.
 
작동설명 
  • html 문서 내에서 contents 라는 id 를 가진 태그를 가지고 와서 contents 라고 이름붙인다.
  • contents 태그에는 '값' 말고도 'id'나 'name', 혹은 rows 같은 여러가지 Attribute 들이 있다. 이 중에서 '값'을 가지고 오기 위해서는 contents.value 라고 써야 한다.
    contents 의 '값' 에 contentsValue 라는 이름을 붙인다.
  • 만약 contents 값의 글자수가 0 이면 경고를 띄우고 false를 반환한다.
  • 만약 contents 값의 글자수가 0이 아니면 true를 반환한다.

diaryedit.php
diarywrite.php
파일을 수정 후 저장한다.
  

댓글 없음:

댓글 쓰기