💡 학습 목표
1. 문서에서 form 에 접근 방법
2. onsubmit 에 대한 이해
3. validation에 이해
4. 정규 표현식이란
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
ul {
list-style: none;
}
.flex--container {
display: flex;
justify-content: space-around;
margin: 100px;
}
li {
display: flex;
align-items: center; /* 수직 중앙 정렬 */
justify-content: space-between; /* 요소들 사이에 공간 배분 - 여기서는 수평 정렬 */
}
label {
margin-right: 20px;
margin-bottom: 4px;
}
</style>
<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" value="홍길동" />
</li>
<li>
<label for="tel1">연락처 : </label>
<input type="text" class="input--box" name="tel" value="12341234" />
</li>
</ul>
<button type="button" onclick="check()">check</button>
</fieldset>
</form>
<form action="https://jsonplaceholder.typicode.com/posts" 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>
<script>
function check() {
let form1 = document.forms[0];
let form2 = document.forms[1];
// 이름 및 연락처 값 복사
form2.elements["name"].value = form1.elements["name"].value;
form2.elements["tel"].value = form1.elements["tel"].value;
}
function validationForm() {
let form2 = document.forms[1];
let name = form2.elements["name"].value;
let tel = form2.elements["tel"].value;
// 이름과 연락처의 유효성 검사
if (!name) {
alert("이름을 입력하세요.");
return false;
}
// 연락처는 숫자만 포함해야 하며, 길이는 적어도 1 이상이어야 합니다.
if (!tel.match(/^\d+$/) || tel.length < 1) {
alert("올바른 연락처를 입력하세요.");
return false;
}
return true; // 모든 유효성 검사를 통과하면 true를 반환
}
function send() {
// 유효성 검사 수행
if (validationForm()) {
// 유효성 검사를 통과하면 폼 제출
document.forms[1].submit();
}
}
</script>
</div>
</body>
</html>-
문서에서 form에 접근 방법:
- JavaScript에서는
document.forms를 통해 페이지 내의 모든 폼 요소에 접근할 수 있습니다. 이는 HTMLFormElement의 HTMLCollection입니다. 예를 들어,document.forms[0]은 페이지 내의 첫 번째 폼 요소에 접근하고,document.forms[1]은 두 번째 폼 요소에 접근합니다. - 폼 내의 입력 요소에 접근하기 위해
elements속성을 사용할 수 있습니다. 예:document.forms[0].elements["name"]는 첫 번째 폼의name속성을 가진 입력 요소에 접근합니다.
- JavaScript에서는
-
onsubmit에 대한 이해:
onsubmit이벤트는 폼이 제출될 때 발생합니다.- 폼의
onsubmit속성에 "return false;"를 설정하면, 폼이 실제로 제출되지 않습니다. 이는 페이지가 새로고침되는 것을 방지합니다. 일반적으로, 이 방법은 JavaScript를 통해 추가 유효성 검사를 수행하거나 AJAX를 사용하여 폼 데이터를 제출할 때 유용합니다.
-
validation에 대한 이해:
- 유효성 검사(validation)는 사용자가 입력한 데이터가 올바른 형식인지 확인하는 과정입니다.
- JavaScript에서는 유효성 검사를 수행하여 사용자에게 오류 메시지를 표시하거나, 올바른 데이터만 서버로 전송할 수 있습니다.
- 예제에서는
validationForm()함수가 유효성 검사를 수행합니다. 이름이 비어 있거나, 연락처가 숫자가 아닌 경우 경고 메시지를 표시합니다.
-
정규 표현식이란:
- 정규 표현식(Regular Expression)은 문자열의 패턴을 표현하는 데 사용되는 문자열입니다.
- JavaScript에서는 정규 표현식을 사용하여 문자열의 패턴을 검사하거나, 문자열을 찾아내거나, 문자열을 변경할 수 있습니다.
- 예제에서는
/^\d+$/정규 표현식을 사용하여 문자열이 숫자로만 구성되어 있는지 확인합니다. - 이 정규 표현식에서
^는 문자열의 시작을,$는 문자열의 끝을 나타내며,\d+는 하나 이상의 숫자를 나타냅니다. 따라서, 이 정규 표현식은 문자열이 숫자로만 구성되어 있어야 매치됩니다.
즉, 위 코드 내용에서 12345, 0, 9876543210과 같은 문자열은 이 정규 표현식과 일치합니다. 하지만 123a, abc, 12 34, 12-34 등은 일치하지 않습니다.
