Project Lab 14. 유효성 검사(javascript) - 1

Javsacript를 사용하여 입력값(text, file) 유효성 검사 과정을 소개한다.
github: https://github.com/scribnote5/lab
github commit: https://github.com/scribnote5/lab/commit/d56a9dc8d29344f4640f474d41ad86e2169ae7f4
최신 프로젝트 코드와 형상이 다를 수 있습니다. 게시글 코드는 참고만 하시되, 최신 코드는 github에서 확인 부탁드립니다.

유효성 검사(Validation)

유효성 검사를 수행하는 이유는 웹페이지에 접근하는 사용자를 신뢰할 수 없기 때문이다. 사용자는 개발자가 예상하지 못하는 행동을 할 수 있다. 예를 들어 회원가입을 해야하는 사용자는 필수 항목(비밀번호 등)을 입력하지 않고 신청 버튼을 누를 수 있고 영어로 입력해야 하는 항목에 한글을 입력할 사용자도 있을 수 있다.
유효성 검사는 프론트엔드(html, javascript), 백엔드(java) 둘 다 진행해야 한다. 사용자가 실수로 비정상적인 값을 입력하는 경우 프론트엔드에서 유효성 검사를 하면 백엔드에 전달되지 않는다. 하지만 프론트엔드는 개발자 도구로 편집이 가능하며, 이를 통해 프론트엔드 유효성 검사를 회피하여 비정상적인 요청을 시도할 수 있다. 또한 javascript는 브라우저 엔진에 따라 다르게 동작할 수 있고, 개발자가 예상하지 못하는 다양한 예외를 고려해야 한다. 그러므로 개발자는 백엔드에서도 요청에 대한 유효성 검사를 수행해야 한다.
게시글에서는 프론트엔드엔드 text와 file 입력값 유효성 검사 과정을 소개한다.

출처: https://www.theteams.kr/teams/1092/post/67641
https://jojoldu.tistory.com/157

Util

Javascript: 유효성 검사에서 사용되는 함수다.
validateByLength: 문자열이 공백 문자 및 공란이거나 제한한 최대 문자열 개수보다 큰 경우 alert 메시지를 출력한다.
validateBySize: 문자열이 제한한 최대 byte 보다 큰 경우 alert 메시지를 출력한다.
validateImageFile: 유효한 이미지 파일 확장자(“.jpg”, “.jpeg”, “.png”)이 아닌 경우 alert 메시지를 출력한다.
validateFile: 유효하지 파일 확장자(“.exe”, “.jar”, “.js”, “.swf”, “.swf”, “.bin”, “.wmf”, “.class”, “.chm”, “.pgm”, “.pcx”, “.hlp”, “.acc”, “.css”, “.sh”, “.com”, “bat”, “cmd”, “.scf”, “.lnk”, “.inf”, “.reg”)인 경우 alert 메시지를 출력한다. 해당 확장자를 사용하는 파일은 악의적인 공격을 할 수 있기에 의심되므로 차단한다.

  
<module-app-web/src/main/resources/static/js/validation.js>

/* 공백 문자 검사 */
function validateSpaceChar(str) {
   if(str.search(/\s/) != -1) {
       return true;
   } else {
       return false;
   }
}

/* 공백 문자 및 공란 검사 */
function validateEmpty(str) {
   if(str.search(/\s/) != -1 || str.length == 0) {
       return true;
   } else {
       return false;
   }
}

/* 특수 문자 검사 */
function validateSpecialChar(str) {
   var regExp = /[`~!@#$%^&*|\\\'\";:\/?]/gi;
   if(regExp.test(str) == true) {
       return true;
   } else {
       return false;
   }
}

/* 바이트 수 반환 */
function getByteSize(el){
   var codeByte = 0;
   for (var idx = 0; idx < el.length; idx++) {
       var oneChar = escape(el.charAt(idx));
       if ( oneChar.length == 1 ) {
           codeByte ++;
       } else if (oneChar.indexOf("%u") != -1) {
           codeByte += 2;
       } else if (oneChar.indexOf("%") != -1) {
           codeByte ++;
       }
   }
   return codeByte;
}

/* input tag validation - 문자열 길이 */
function validateByLength(inputName, maxStrLength, title) {
   var strLength = document.getElementsByName(inputName)[0].value.length;

   if(strLength > maxStrLength) {
       alert("The " + title + " is up to " + maxStrLength + " characters long." +
           "\n(Number of characters currently entered: " + strLength + ")");
       document.getElementsByName(inputName)[0].focus();

       return false;
   } else if(validateEmpty(document.getElementsByName(inputName)[0].value)) {
       alert("The " + title + " must not be blank.");
       document.getElementsByName(inputName)[0].focus();

       return false;
   } else {
       return true;
   }
}

/* input tag validation - 문자열 크기 */
function validateBySize(inputName, maxByteSize, title) {
   var byteSize = getByteSize(document.getElementsByName(inputName)[0].value);

   if(byteSize > maxByteSize) {
       alert("The " + title + "is up to " + maxByteSize + " bytes size." +
           "\n(Size of characters currently entered: " + byteSize + " bytes).");
       document.getElementsByName(inputName)[0].focus();

       return false;
   } else {
       return true;
   }
}

/*
* 파일 validation - 필수 확장자
*
* [전역 변수 선언 필요]
* var totalFileSize = 0;
*/
function validateImageFile(file) {
   // file validation - 필수 확장자
   var includeArray = [ ".jpg", ".jpeg", ".png" ];
   // 파일 이름
   var fileName = file.name;
   // 파일 확장자명(대문자를 소문자로 변경)
   var extensionName = fileName.substring( fileName.lastIndexOf(".")).toLowerCase();
   // 필수 확장자명 사용 여부 판단
   var result = false;
   // 첨부 파일 크기
   var fileSize = file.size;
   // 업로드 가능한 파일 크기: 20 MB
   var maxSize = 20 * 1024 * 1024;

   // 첨부 파일이 있는 경우
   if (fileName != "") {
       /* 확장자명 검사 */
       for (var j = 0; j < includeArray.length; j++) {
           if (extensionName == includeArray[j]) {
               result = true;
               break;
           }
       }

       if (!result) {
           alert("The attached file only uses [" + includeArray.join(', ') + "] extension. ");
           $("#file").replaceWith($("#file").clone(true));
           $("#file").val('');

           return false;
       }

       /* 파일 크기 검사 */
       if (fileSize > maxSize) {
           alert("The attached file can upload within 20 MB size.");
           $("#file").replaceWith($("#file").clone(true));
           $("#file").val('');

           return false;
       }

       /* 모든 파일 크기 검사 */
       if(fileSize + totalFileSize > maxSize) {
           alert("All attached files must be within 20 MB size.");
           $("#file").replaceWith($("#file").clone(true));
           $("#file").val('');

           return false;
       }

       totalFileSize += fileSize;
   }

   return true;
}

/*
* 파일 validation - 유효한 파일 확장자
*
* [전역 변수 선언 필요]
*  var totalFileSize = 0;
*/
function validateFile(file) {
   // file validation - 제외 파일 확장자
   var excludeArray = [ ".exe", ".jar", ".js", ".swf", ".swf", ".bin", ".wmf", ".class", ".chm", ".pgm", ".pcx", ".hlp", ".acc", ".css", ".sh",
       ".com", "bat", "cmd", ".scf", ".lnk", ".inf", ".reg" ];
   // 파일 이름
   var fileName = file.name;
   // 파일 확장자명(대문자를 소문자로 변경)
   var extensionName = fileName.substring( fileName.lastIndexOf(".")).toLowerCase();
   // 첨부 파일 크기
   var fileSize = file.size;
   // 업로드 가능한 파일 크기: 20 MB
   var maxSize = 20 * 1024 * 1024;

   if (fileName != "") {
       /* 확장자명 검사 */
       for (var i = 0; i < excludeArray.length; i++) {
           if (extensionName == excludeArray[i]) {
               alert("[" + extensionName + "] extension doesn't support uploading attached file." );
               $("#file").val('');
               $("#file").replaceWith($("#file").clone(true));

               return false;
           }
       }

       /* 파일 크기 검사 */
       if (fileSize > maxSize) {
           alert("The attached file can upload within 20 MB size.");
           $("#file").replaceWith($("#file").clone(true));
           $("#file").val('');

           return false;
       }

       /* 모든 파일 크기 검사 */
       if(fileSize + totalFileSize > maxSize) {
           alert("All attached files must be within 20 MB size.");
           $("#file").replaceWith($("#file").clone(true));
           $("#file").val('');

           return false;
       }

       totalFileSize += fileSize;

   }

   return true;
}

View

유효성 검사 예제는 user/form.html 페이지로 설명한다.
usernameVaildation(ID 중복 검사 여부), passwordVaildation(password와 passwordCheck 값이 같은지 검사 여부), emailVaildation(유효한 이메일 주소 검사 여부), privateEmailVaildation(유효한 이메일 주소 검사 여부), contactVaildation(유효한 연락처 검사 여부) 전역 변수를 선언하여 각 해당되는 유효성 검사가 통과된 경우에만 서버에 요청을 보낼 수 있다.
validateImageFile: 업로드 하려는 파일이 유효한 이미지 파일 확장자(“.jpg”, “.jpeg”, “.png”) 인지 검사한다. 드래그앤드랍 이벤트로 파일 업로드 하는 경우와 input type=”file”를 사용하여 파일 업로드 하는 경우 모두 유효성 검사를 수행한다.

  
<module-app-web/src/main/resources/templates/user/form.html>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- css -->
    <th:block th:replace="layout/css.html"></th:block>

    <title>NoticeBoard Form</title>

    <style>
        .fileDrop {
            width: 300px;
            height: 75px;
            margin: 10px 0px 10px;
            border: 1px dotted blue;
        }
    </style>
</head>
<body>
<!-- header -->
<div th:replace="layout/header::header"></div>

<div class="container">
    <form name="form" id="form" th:object="${noticeBoardDto}" action="#">

        <div class="page-header">
            <h1 th:if="!*{idx}">NoticeBoard Register</h1>
            <h1 th:if="*{idx}">NoticeBoard Update</h1>
        </div>
        <br/>
        <table class="table" style="table-layout:fixed; word-break:break-all;">
            <colgroup>
                <col width="15%"/>
                <col width="85%"/>
            </colgroup>
            <tr>
                <th>Active Status</th>
                <td>
                    <div class="pull-left">
                        <select name="activeStatus" th:field="*{activeStatus}" class="form-control input-sm">
                            <option th:value="ACTIVE">Active</option>
                            <option th:value="INACTIVE">Inactive</option>
                        </select>
                    </div>
                </td>
            </tr>
            <tr th:if="*{idx}">
                <th>Created Date</th>
                <td><input type="text" class="col-md-1 form-control input-sm" readonly="readonly"
                           th:value="*{#temporals.format(createdDate,'yyyy-MM-dd HH:mm')}"/></td>
            </tr>
            <tr th:if="*{idx}">
                <th>Modified Date</th>
                <td><input type="text" class="col-md-1 form-control input-sm" readonly="readonly"
                           th:value="*{#temporals.format(lastModifiedDate,'yyyy-MM-dd HH:mm')}"/></td>
            </tr>
            <tr>
                <th>Title</th>
                <td><input type="text" name="title" id="title" class="col-md-1 form-control input-sm"
                           th:value="*{title}"/></td>
            </tr>
            <tr>
                <th>Attached File</th>
                <td>
                    <input type="file" multiple="multiple" name="file" id="file"/>
                    <div id="fileDrop" class="fileDrop"></div>
                </td>
            </tr>
            <tr>
                <th>Total file size</th>
                <td>
                    <div><span id="totalFileSize"> 0 MB</span>, Up to 20 MB</div>
                </td>
            <tr>
                <th>Upload Attached File</th>
                <td>
                    <div id="attachedFileList"></div>
                </td>
            </tr>
            <tr>
                <th>Uploaded Attached File</th>
                <td>
                    <div id="uploadedAttachedFileList" th:each="attachedFile : *{attachedFileList}">
                        <div th:id="imgData + ${attachedFileStat.index}">
                            <span th:text="${attachedFile.fileName} + ',&nbsp;' + 'File Size: ' + ${attachedFile.fileSize} + '&nbsp;'"></span>
                            <img th:attr="src=@{|/images/cancel.png|}, onclick=|deleteFile('${attachedFileStat.index}','${attachedFile.idx}','${attachedFile.savedFileName}')|"
                                 th:style="'width: 16px; height: 16px'"/>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>

        </table>

        <div class="pull-left">
            <a href="/notice-board/list" class="btn btn-default">Move to List</a>
        </div>
        <div class="pull-right">
            <button th:if="!*{idx}" id="insert" type="button" class="btn btn-primary">Register</button>
            <button th:if="*{idx}" id="update" type="button" class="btn btn-info">Update</button>
        </div>

        <!-- input type="hidden" -->
        <input type="hidden" name="idx" th:value="*{idx}"/>
        <input type="hidden" name="createdBy"
               th:value="*{#strings.isEmpty(createdBy)} ? ${#authentication.principal.username} : *{createdBy}"/>
        <input type="hidden" name="lastModifiedBy" th:value="${#authentication.principal.username}"/>

    </form>
</div>

<!-- footer -->
<div th:replace="layout/footer::footer"></div>

<!-- script file -->
<th:block th:replace="layout/script.html"></th:block>

<!-- javascript -->
<script th:inline="javascript">
   var totalFileSize = 0;
   var exit = null;
   var usernameVaildation = false;
   var passwordVaildation = false;
   var emailVaildation = false;
   var privateEmailVaildation = false;
   var contactVaildation = false;

   function deleteUser(userIdx) {
       // 회원 삭제
       $.ajax({
           url: "http://localhost:8081/api/users/" + document.getElementsByName("idx")[0].value,
           type: "delete",
           dataType: "text",
           contentType: "application/json",
           async: false,
       })
           .done(function (msg) {

           })
           .fail(function (msg) {
               console.log("Delete user is fail.");
           });
   }

   /* username 검사 */
   $("#username").on("change", function () {
       var strLength = document.getElementsByName("username")[0].value.length;

       if (strLength > 16 || strLength < 6) {
           alert("The ID can be used for more than 6 characters and less than 16 characters." +
               "\n(Number of characters currently entered: " + strLength + ").");
           document.getElementsByName("username")[0].focus();
           document.getElementsByName("username")[0].value = "";
           document.getElementById("usernameCheckResult").innerHTML = "";

           return false;
       } else if (validateEmpty(document.getElementsByName("username")[0].value) || validateSpecialChar(document.getElementsByName("username")[0].value)) {
           alert("The ID must not be blank or contain special character.");
           document.getElementsByName("username")[0].focus();
           document.getElementsByName("username")[0].value = "";
           document.getElementById("usernameCheckResult").innerHTML = "";

           return false;
       } else {
           return true;
       }

   });

   /* username 중복 검사 */
   $("#validationUsername").click(function () {
       $.ajax({
           url: "http://localhost:8081/api/users/validation/username/" + document.getElementsByName("username")[0].value,
           type: "get",
           dataType: "text",
           contentType: "application/json",
           async: false,
       })
           .done(function (msg) {
               if (msg == "false") {
                   document.getElementById("usernameCheckResult").innerHTML = "This user id is not duplicated.";
                   document.getElementById("usernameCheckResult").style.color = "blue";
                   usernameVaildation = true;
               } else {
                   document.getElementById("usernameCheckResult").innerHTML = "This user id is already in use.";
                   document.getElementById("usernameCheckResult").style.color = "red";
                   usernameVaildation = false;
               }
           })
           .fail(function (msg) {
               alert("User id duplicate fail!");
           })
   });

   /* passowrd 검사 */
   function validatePassword() {
       var password = document.getElementsByName("password")[0].value;
       var checkPassword = document.getElementsByName("checkPassword")[0].value;

       if (password.length >= 6 && password.length <= 16) {
           if (document.getElementById("password").value != "" && document.getElementById("checkPassword").value != "") {
               if (document.getElementsByName("password")[0].value == document.getElementById("checkPassword").value) {
                   document.getElementById("passwordCheckResult").innerHTML = "Password matches.";
                   document.getElementById("passwordCheckResult").style.color = "blue";
                   passwordVaildation = true;
               } else {
                   document.getElementById("passwordCheckResult").innerHTML = "Passwords do not match.";
                   document.getElementById("passwordCheckResult").style.color = "red";
                   passwordVaildation = false;
               }
           } else {
               passwordVaildation = false;
           }
       } else {
           alert("The password can be used for more than 6 characters and less than 16 characters.");
           document.getElementsByName("password")[0].value = "";
           document.getElementById("checkPassword").value = "";
           document.getElementById("passwordCheckResult").innerHTML = "";
       }
   }

   /* email 검사 */
   $("#email").on("change", function () {
       var regExp = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
       var email = document.getElementsByName("email")[0].value;

       if (regExp.test(email)) {
           document.getElementById("emailCheckResult").innerHTML = "Email format is valid.";
           document.getElementById("emailCheckResult").style.color = "blue";
           emailVaildation = true;
       } else {
           document.getElementById("emailCheckResult").innerHTML = "Email format is not valid.";
           document.getElementById("emailCheckResult").style.color = "red";
           document.getElementsByName("email")[0].value = "";
           emailVaildation = false;
       }
   });

   /* private email 검사 */
   $("#privateEmail").on("change", function () {
       var regExp = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
       var email = document.getElementsByName("privateEmail")[0].value;

       if (regExp.test(email)) {
           document.getElementById("privateEmailCheckResult").innerHTML = "Email format is valid.";
           document.getElementById("privateEmailCheckResult").style.color = "blue";
           privateEmailVaildation = true;
       } else {
           document.getElementById("privateEmailCheckResult").innerHTML = "Email format is not valid.";
           document.getElementById("privateEmailCheckResult").style.color = "red";
           document.getElementsByName("privateEmail")[0].value = "";
           privateEmailVaildation = false;
       }
   });

   /* 연락처 검사 */
   $("#contact").on("change", function () {
       var regExp = /(01[016789])-([1-9]{1}[0-9]{2,3})-([0-9]{4})$/;

       var contact = document.getElementsByName("contact")[0].value;

       if (regExp.test(contact)) {
           document.getElementById("contactCheckResult").innerHTML = "Contact format is valid.";
           document.getElementById("contactCheckResult").style.color = "blue";
           contactVaildation = true;
       } else {
           document.getElementById("contactCheckResult").innerHTML = "Contact format is not valid.";
           document.getElementById("contactCheckResult").style.color = "red";
           document.getElementsByName("contact")[0].value = "";
           contactVaildation = false;
       }
   });

   $("#file").on("change", function () {
       if (validateImageFile(this.files[0])) {
           document.getElementById("imgData").innerHTML = this.files[0].name + ", File size: " + convertFileSize(this.files[0].size);
           readURL(this);
       } else {
           return false;
       }

   });

   function readURL(input) {
       if (input.files && input.files[0]) {
           var reader = new FileReader();

           reader.onload = function (e) {
               $('#imgPreview').attr('src', e.target.result);
           }

           reader.readAsDataURL(input.files[0]);
       }
   }
</script>

<script th:if="!${userDto?.idx}">
   $("#insert").click(function () {
       // validation
       if (!usernameVaildation) {
           alert("Please check ID duplication.");
           document.getElementById("username").focus();

           return false;
       } else if (!passwordVaildation) {
           alert("Please check password.");
           document.getElementById("password").focus();

           return false;
       } else if (validateEmpty(document.getElementsByName("koreanName")[0].value)) {
           alert("Please check korean name.");
           document.getElementById("koreanName").focus();

           return false;
       } else if (validateEmpty(document.getElementsByName("englishName")[0].value)) {
           alert("Please check english name.");
           document.getElementById("englishName").focus();

           return false;
       } else if (validateEmpty(document.getElementsByName("birthDate")[0].value)) {
           alert("Please check birth date.");
           document.getElementById("birthDate").focus();

           return false;
       } else if (!emailVaildation) {
           alert("Please check email.");
           document.getElementById("email").focus();

           return false;
       } else if (!privateEmailVaildation) {
           alert("Please check private email.");
           document.getElementById("privateEmail").focus();

           return false;
       } else if (validateEmpty(document.getElementsByName("messangerId")[0].value)) {
           alert("Please check messanger id.");
           document.getElementById("messangerId").focus();

           return false;
       } else if (!contactVaildation) {
           alert("Please check contact.");
           document.getElementById("contact").focus();

           return false;
       }

       // 회원 업로드
       var jsonData = $("#form").serializeObject();
       var userIdx = 0;

       $.ajax({
           url: "http://localhost:8081/api/users",
           type: "post",
           data: JSON.stringify(jsonData),
           dataType: "json",
           contentType: "application/json",
           async: false,
       })
           .done(function (msg) {
               userIdx = msg;
               exit = false;
           })

           .fail(function (msg) {
               console.log("Register user is fail.");
               exit = true;
           });

       if (exit) return false;

       // 파일 업로드
       var formData = new FormData();

       formData.append("files", document.getElementsByName("file")[0].files[0]);
       formData.append("idx", userIdx);
       formData.append("createdBy", document.getElementsByName("createdBy")[0].value);

       $.ajax({
           url: "http://localhost:8081/api/users/attachedFile",
           type: "post",
           data: formData,
           dataType: "text",
           enctype: "multipart/form-data",
           processData: false,
           contentType: false,
           async: false,
       })
           .done(function (msg) {
               location.href = "/user?idx=" + userIdx;
           })
           .fail(function (msg) {
               console.log("Upload attached file is fail.");
               deleteUser(userIdx);
           });

   });
</script>
<script th:if="${userDto?.idx}" th:inline="javascript">
   // 초기 valdiation을 모두 true로 설정한다.
   passwordVaildation = true;
   emailVaildation = true;
   privateEmailVaildation = true;
   contactVaildation = true;

   $("#update").click(function () {
       // validation
       var oriUsername = [[${userDto.username}]];

       if ((document.getElementsByName("username")[0].value != oriUsername) && !usernameVaildation) {
           alert("Please check ID duplication.");
           document.getElementById("username").focus();

           return false;
       } else if (!(passwordVaildation)) {
           alert("Please check password.");
           document.getElementById("password").focus();

           return false;
       } else if (validateEmpty(document.getElementsByName("koreanName")[0].value)) {
           alert("Please check korean name.");
           document.getElementById("koreanName").focus();

           return false;
       } else if (validateEmpty(document.getElementsByName("englishName")[0].value)) {
           alert("Please check english name.");
           document.getElementById("englishName").focus();

           return false;
       } else if (validateEmpty(document.getElementsByName("birthDate")[0].value)) {
           alert("Please check birth date.");
           document.getElementById("birthDate").focus();

           return false;
       } else if (!emailVaildation) {
           alert("Please check email.");
           document.getElementById("email").focus();

           return false;
       } else if (!privateEmailVaildation) {
           alert("Please check private email.");
           document.getElementById("privateEmail").focus();

           return false;
       } else if (validateEmpty(document.getElementsByName("messangerId")[0].value)) {
           alert("Please check messanger id.");
           document.getElementById("messangerId").focus();

           return false;
       } else if (!contactVaildation) {
           alert("Please check contact.");
           document.getElementById("contact").focus();

           return false;
       }

       // 회원 수정
       var jsonData = $("#form").serializeObject();
       var userIdx = +document.getElementsByName("idx")[0].value;

       $.ajax({
           url: "http://localhost:8081/api/users/" + userIdx,
           type: "put",
           data: JSON.stringify(jsonData),
           dataType: "json",
           contentType: "application/json",
           async: false,
       })
           .done(function (msg) {
               // 만일 첨부 파일이 수정되지 않은 경우 '파일 업로드' 및 '파일 삭제'를 수행하지 않음
               if (typeof document.getElementsByName("file")[0].files[0] == "undefined") {
                   location.href = "/user?idx=" + userIdx;
                   exit = true;
               } else {
                   exit = false;
               }
           })
           .fail(function (msg) {
               console.log("Update user is fail.");
               exit = false;
           })

       if (exit) return true;

       // 파일 삭제
       $.ajax({
           url: "http://localhost:8081/api/users/attachedFile/" + userIdx,
           type: "delete",
           contentType: "application/json",
           async: false,
       })
           .done(function (msg) {
               exit = false;
           })
           .fail(function (msg) {
               console.log("Delete attached file is fail.");
               exit = true;
           });

       if (exit) return flase;

       // 파일 업로드
       var formData = new FormData();

       formData.append("files", document.getElementsByName("file")[0].files[0]);
       formData.append("idx", userIdx);
       formData.append("createdBy", document.getElementsByName("createdBy")[0].value);

       $.ajax({
           url: "http://localhost:8081/api/users/attachedFile",
           type: "post",
           data: formData,
           dataType: "text",
           enctype: "multipart/form-data",
           processData: false,
           contentType: false,
       })
           .done(function (msg) {
               location.href = "/user?idx=" + userIdx;
           })
           .fail(function (msg) {
               console.log("Upload attached file is fail.");
           });
   });
</script>

프로젝트 실행 및 결과

유효성 검사에 실패하면 alert 경고창을 확인할 수 있다.

Project Lab 14. 유효성 검사(javascript) - 1

유효성 검사(Validation)

Util

View

프로젝트 실행 및 결과

Further Reading

Project Lab 0. 연구실 홈페이지 개발 프로젝트 소개

Project Lab 1-1. 개발 환경 구축(IntelliJ)

Project Lab 1-2. 개발 환경 구축(Eclipse)

Trending Tags