시나리오 코드 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
list-style: none;
}
li{
display: flex;
align-items: center;
justify-content: space-around;
}
label{
margin-right: 20px;
margin-bottom: 4px;
}
.flex--container{
display: flex;
justify-content: center;
margin: 100px;
}
</style>
</head>
<body>
<div class="flex--container">
<form action="" onsubmit="return false;">
<fieldset>
<legend>배송지 입력</legend>
<ul>
<li>
<label for="userName1">이름 : </label>
<input type="text" class="input--box" name="name" id="userName1" value="홍길동">
</li>
<li>
<label for="tel1">연락처 : </label>
<input type="text" class="input--box" name="tel" id="tel1" value="010-1234-5678">
</li>
</ul>
<button type="button" onclick="check()">check</button>
</fieldset>
</form>
<br>
<form action="https://www.naver.com" onsubmit="return false;">
<fieldset>
<legend>배송지 입력2</legend>
<ul>
<li>
<label for="userName2">이름 : </label>
<input type="text" class="input--box" name="name" value="">
</li>
<li>
<label for="tel2">연락처 : </label>
<input type="text" class="input--box" name="tel" value="">
</li>
</ul>
<button type="button" onclick="send()">Send</button>
</fieldset>
</form>
</div>
<script>
function check(){
let form1 = document.forms[0];
let form2 = window.document.forms[1];
// 자바 스크립트를 통해서 요소 복사 처리
form2.elements["name"].value = form1.elements["name"].value;
form2.elements["tel"].value = form1.elements["tel"].value;
console.log("form1", form1);
}
function send(){
// 유효성 검사가 전부 true 라면
if(validationForm()){
// form에 submit() 메서드를 호출하면 자바스크립트에서 서버측으로 제출할 수 있다.
document.forms[1].submit();
}
}
function validationForm(){
let form2 = document.forms[1];
let name = form2.elements["name"].value;
let tel = form2.elements["tel"].value;
let isOk = true;
// console.log("name", name);
// console.log("tel", tel);
console.log(typeof name);
console.log(typeof tel);
if(name == null){
alert("이름을 입력하세요");
isOk = false;
return;
}
if(tel == null){
alert("연락처를 입력하세요");
isOk = false;
return
}
// 정규표현식 (숫자, 010으로 시작하는가 GPT)
if(tel.length < 3){
alert("올바른 연락처를 입력하세요");
isOk = false;
return
}
return isOk;
}
</script>
</body>
</html>
- 문서에서 form에 접근 방법
- JavaScript에서는 document.forms를 통해 페이지 내의 모든 폼 요소에 접근할 수 있다. 이는 HTMLFormElement의 HTMLCollection이다. 예를 들어, document.forms[0]은 페이지 내의 첫 번째 폼 요소에 접근하고, document.forms[1]은 두 번째 폼 요소에 접근한다.
- 폼 내의 입력 요소에 접근하기 위해 elements 속성을 사용할 수 있다. 예: document.forms[0].elements["name"]는 첫 번째 폼의 name 속성을 가진 입력 요소에 접근한다.
- onsubmit에 대한 이해
- onsubmit 이벤트는 폼이 제출될 때 발생한다.
- 폼의 onsubmit 속성에 "return false;"를 설정하면, 폼이 실제로 제출되지 않는다. 이는 페이지가 새로고침되는 것을 방지합니다. 일반적으로, 이 방법은 JavaScript를 통해 추가 유효성 검사를 수행하거나 AJAX를 사용하여 폼 데이터를 제출할 때 유용하다.
- validation에 대한 이해
- 유효성 검사(validation)는 사용자가 입력한 데이터가 올바른 형식인지 확인하는 과정이다.
- JavaScript에서는 유효성 검사를 수행하여 사용자에게 오류 메시지를 표시하거나, 올바른 데이터만 서버로 전송할 수 있다.
- 예제에서는 validationForm() 함수가 유효성 검사를 수행한다. 이름이 비어 있거나, 연락처가 숫자가 아닌 경우 경고 메시지를 표시한다.
728x90
'JS' 카테고리의 다른 글
| JS 이벤트 처리 - 5 ( 이미지 토글 ) (0) | 2024.08.01 |
|---|---|
| JS 이벤트 처리 - 4 ( 반복문과 동적 생성 ) (0) | 2024.08.01 |
| JS 이벤트 처리 - 2 ( addEventListener ) (0) | 2024.07.26 |
| JS 이벤트 처리 - 1 ( 기본 ) (0) | 2024.07.26 |
| JS - 점검 6 ( 웹 페이지 렌더링 과정 ) (0) | 2024.07.26 |
