프론트에서 값 체크하는 방법 문의

직접 검증 같은거 만들기 힘들면 밸리데이션 플러그인을 사용하세요.

저는 프로젝트에서 사용하는 플러그인이 있으면 그걸 사용하고, 직접 만들어야 하는 경우 validation 함수를 만들어두고 데이터를 보내기 전에 실행합니다

웹 폼 데이터를 보내기 전에 값 체크하는 방법에는 여러 가지가 있습니다. 여기서는 간단한 자바스크립트 및 jQuery 기반의 솔루션을 소개하겠습니다. 1. 순수 자바스크립트를 이용한 값 체크: 이 방법에서는 HTML input 태그에 특정 클래스를 지정하고, 폼 제출 전에 JavaScript 함수를 실행하여 유효성을 확인합니다. 2. jQuery와 jQuery Validation 플러그인 사용: 이 방법에서는 jQuery 및 jQuery Validation 플러그인을 사용하여 유효성 검사를 수행합니다. 이 플러그인은 강력한 기능을 제공하며 사용하기 쉽습니다. #2-1 먼저, jQuery 및 jQuery Validation 플러그인을 프로젝트에 추가하세요. #2-2 그런 다음, 폼의 유효성 검사를 설정하세요. 협업 시 고려해야 할 사항: - 코드의 가독성과 일관성을 유지하세요. 변수명, 함수명, 들여쓰기 등을 통일하고, 주석을 남겨 코드를 이해하기 쉽게 만드세요. - 깃 등의 버전 관리 시스템을 사용하여 협업을 원활하게 진행하세요. - 코드 리뷰를 통해 서로의 코드를 검토하고 피드백을 주고받으세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
#1
<form id="myForm">
  <input type="text" class="required" />
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 폼 제출 방지

    const requiredInputs = document.querySelectorAll(".required");
    let isValid = true;

    requiredInputs.forEach(input => {
      if (input.value.trim() === "") {
        isValid = false;
        input.classList.add("error");
      } else {
        input.classList.remove("error");
      }
    });

    if (isValid) {
      this.submit(); // 유효성 검사를 통과하면 폼 제출
    }
  });
</script>

#2-1
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.3/jquery.validate.min.js"></script>

#2-2
<form id="myForm">
  <input type="text" name="requiredField" />
  <button type="submit">Submit</button>
</form>

<script>
  $(document).ready(function() {
    $("#myForm").validate({
      rules: {
        requiredField: {
          required: true,
        },
      },
      messages: {
        requiredField: {
          required: "This field is required.",
        },
      },
    });
  });
</script>