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

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

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

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

1#1
2<form id="myForm">
3  <input type="text" class="required" />
4  <button type="submit">Submit</button>
5</form>
6
7<script>
8  document.getElementById("myForm").addEventListener("submit", function(event) {
9    event.preventDefault(); // 폼 제출 방지
10
11    const requiredInputs = document.querySelectorAll(".required");
12    let isValid = true;
13
14    requiredInputs.forEach(input => {
15      if (input.value.trim() === "") {
16        isValid = false;
17        input.classList.add("error");
18      } else {
19        input.classList.remove("error");
20      }
21    });
22
23    if (isValid) {
24      this.submit(); // 유효성 검사를 통과하면 폼 제출
25    }
26  });
27</script>
28
29#2-1
30<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
31<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.3/jquery.validate.min.js"></script>
32
33#2-2
34<form id="myForm">
35  <input type="text" name="requiredField" />
36  <button type="submit">Submit</button>
37</form>
38
39<script>
40  $(document).ready(function() {
41    $("#myForm").validate({
42      rules: {
43        requiredField: {
44          required: true,
45        },
46      },
47      messages: {
48        requiredField: {
49          required: "This field is required.",
50        },
51      },
52    });
53  });
54</script>