[jQuery] jQuery를 활용한 폼 조작과 유효성 검사

1. 폼 조작이란?

폼 조작(Form Manipulation)은 입력 필드의 값을 가져오거나 변경하는 기능을 의미한다.
jQuery를 사용하면 val(), prop(), is() 등의 메서드를 이용해 폼 요소의 값을 쉽게 조작할 수 있다.

• 입력 필드 값 가져오기 및 설정 (val())
• 체크박스, 라디오 버튼 선택 여부 확인 (is(":clicked"))
• 셀렉트박스에서 선택한 값 확인 (val(), is(":selected"))
• 폼 제출 이벤트 처리 및 데이터 검증

---

2. jQuery를 사용한 폼 조작 예제

입력 필드 값 가져오기 (val())

<input type="text" id="name" placeholder="이름 입력">
<button id="getValue">값 가져오기</button>
<p id="output"></p>

<script>
  	$(document).ready(funtction() {
  		$("#getValue").on("click", function() {
  			var name = $("#name").val();	// 입력된 값 가져오기
  			$("#output").text("입력된 값: " + name);
  		});
  	});
</script>

• 버튼 클릭 시 입력 필드의 값을 가져와 화면에 표시 됨

입력 필드 값 변경하기 (val("새 값"))

<input type="text" id="name" placeholder="이름 입력">
<button id="setValue">값 설정하기</button>

<script>
  	$(document).ready(function() {
  		$("#setValue").on("click", function() {
  			$("#name").val("홍길동");	// 입력 필드 값 변경
  		});
  	});
</script>

• 버튼 클릭 시 입력 필드에 "홍길동"이 자동으로 입력 됨.

체크박스 선택 여부 확인 (is(".clicked"))

<input type="checkbox" id="agree"> 약관 동의
<button id="checkAgree">확인</button>
<p id="status"></p>

<script>
  	$(document).ready(function() {
  		$("#checkAgree").on("click", function() {
  			var isChecked = $("#agree").is(":checked");
  			$("#status").text(isChecked ? "동의함" : "동의하지 않음");
  		});
  	});
</script>

• 체크 여부에 따라 "동의함" 또는 "동의하지 않음"이 출력됨.

셀렉트 박스에서 선택한 값 확인

<select id="job">
  	<option value="developter">개발자</option>
  	<option value="designer">디자이너</option>
  	<option value="manager">매니저</option>
</select>
<button id="getJob">직업 선택</button>
<p id="jobOutput"></p>

<script>
  	$(document).ready(function() {
  		$("getJob").on("click", function() {
  			var selectedJob = $("#job").val();	// 선택한 값 가져오기
  			$("#jobOutput").text("선택한 직업: ") + selectedJob);
  		});
  	});
</script>

• 개발자, 디자이너, 매니저 중 선택한 값이 출력됨

---

3. jQuery를 활용한 폼 유효성 검사

유효성 검사(Form Validation)는 사용자가 올바른 값을 입력했는지 확인하는 과정이다.
입력 필드가 비어 있는지 확인하고, 이메일 형식이 맞는지 검사할 수 있다.

유효성 검사 시 주로 사용되는 jQuery 메서드

메서드	설명
val()	입력 필드의 값 가져오기
trim()	문자열의 앞뒤 공백 제거
is(":checked")	체크박스 선택 여부 확인
is(":selected")	셀렉트 박스에서 값이 선택되었는지 확인

---

기본적인 유효성 검사 예제

<form id="myForm">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email">
  <br>
  <button type="submit">제출</button>
</form>
<p id="message"></p>

<script>
  	$(document).ready(function() {
  		$("#myForm").submit(function(event) {
  			event.preventDefault(); // 기본 제출 막기
  			
  			var name = $("#name").val().trim();
  			var email = $("#email).val().trim();
  	
  			if (name === "" || email === "") {
  				$("#message").text("이름과 이메일을 모두 입력해주세요.").css("color", "red");
  			} else {
  				$("#message").text("폼이 정상적으로 제출되었습니다.").css("color", "green");
  			}
  		});
 });
</script>

• 이름과 이메일이 비어 있으면 에러 메시지 출력
• 모두 입력되면 "폼이 정상적으로 제출되었습니다." 출력

정규식을 활용한 이메일 유효성 검사

<input type="email" id="email" placeholder="이메일 입력">
<button id="validateEmail">검사</button>
<p id="emailMessage"></p>

<script>
  	$("document).ready(function() {
  		$("#validateEmail").on("click", function() {
  			var email = $("#email).val();
  			var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
			
  			if (emailPattern.test(email)) {
  				$("#emailMessage").text("올바른 이메일 형식입니다.").css("color", "green");
  			} else {
  				$("#emailMessage").text("이메일 형식이 올바르지 않습니다.").css("color", "red");
  		});
 	});
</script>