<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function func1() {
//document.frm.id.focus(); // 포커스 설정
//document.frm.id.blur(); // 포커스 해제
document.frm.id.select(); // value값 선택
}
function func2() {
// 아이디 입력하지 않았으면 '입력하세요' 포커스주기
if (document.frm.id.value == '') {
// (document.frm.id.value.length == 0)
alert('아이디를 입력하세요');
document.frm.id.focus();
return;
}
// 4~10자 아이디 글자수 제한
if (frm.id.value.length < 4 || frm.id.value.length > 10) {
// if (!(frm.id.value.length >= 4 && frm.id.value.length <= 10))
alert('아이디는 4~10자 사이로 입력하세요');
frm.id.focus();
frm.id.select();
return;
}
if (frm.passwd.value == '') {
alert('패스워드를 입력하세요');
frm.passwd.focus();
return;
}
// 전송
document.frm.submit();
}
function j1() {
// jumin1의 value값 길이가 6자면 포커스를 jumin2로 이동
if (frm.jumin1.value.length == 6) {
frm.jumin2.focus();
}
}
function j2() {
// jumin2의 value값 길이가 7자면 포커스를 t로 이동
if (frm.jumin2.value.length == 7) {
frm.t.focus();
}
}
</script>
</head>
<body>
<form action="a.jsp" method="post" name="frm">
아이디: <input type="text" name="id"><br>
패스워드: <input type="password" name="passwd"><br>
주민번호: <input type="text" name="jumin1" onkeyup="j1()">-
<input type="text" name="jumin2" onkeyup="j2()"><br>
자기소개:
<textarea rows="3" cols="8" name="t"></textarea>
<br>
<input type="button" value="버튼" onclick="func1()">
<input type="button" value="전송" onclick="func2()">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function func1() {
//document.frm.id.focus(); // 포커스 설정
//document.frm.id.blur(); // 포커스 해제
document.frm.id.select(); // value값 선택
}
function func2(e) { // submit 이벤트 리스너
// 아이디 입력하지 않았으면 '입력하세요' 포커스주기
if (document.frm.id.value == '') {
// (document.frm.id.value.length == 0)
alert('아이디를 입력하세요');
document.frm.id.focus();
e.preventDefault(); // submit 이벤트 폼객체의 기본기능막기
return;
}
// 4~10자 아이디 글자수 제한
if (frm.id.value.length < 4 || frm.id.value.length > 10) {
// if (!(frm.id.value.length >= 4 && frm.id.value.length <= 10))
alert('아이디는 4~10자 사이로 입력하세요');
frm.id.focus();
frm.id.select();
e.preventDefault();
return;
}
if (frm.passwd.value == '') {
alert('패스워드를 입력하세요');
frm.passwd.focus();
e.preventDefault();
return;
}
// 전송
//document.frm.submit();
}
function j1() {
// jumin1의 value값 길이가 6자면 포커스를 jumin2로 이동
if (frm.jumin1.value.length == 6) {
frm.jumin2.focus();
}
}
function j2() {
// jumin2의 value값 길이가 7자면 포커스를 t로 이동
if (frm.jumin2.value.length == 7) {
frm.t.focus();
}
}
</script>
</head>
<body>
<form action="a.jsp" method="post" name="frm" onsubmit="func2(event)">
아이디: <input type="text" name="id"><br>
패스워드: <input type="password" name="passwd"><br>
주민번호: <input type="text" name="jumin1" onkeyup="j1()">-
<input type="text" name="jumin2" onkeyup="j2()"><br>
자기소개:
<textarea rows="3" cols="8" name="t"></textarea>
<br>
<input type="button" value="버튼" onclick="func1()">
<input type="submit" value="전송">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
// document.폼이름.라디오,체크박스name[0].속성
// checked(체크되면 true, 아니면 false) name type value
// document.폼이름.라디오,체크박스name[0].메소드()
// focus() blur() click()
function func1() {
alert('name: ' + frm.gender[0].name); // gender
alert('type: ' + frm.gender[0].type); // radio
alert('value: ' + frm.gender[0].value); // 남
alert('checked: ' + frm.gender[0].checked); // true/false
}
function func2() {
// 성별이 체크 안되어있으면 '성별을 체크하세요' 포커스 return
if (frm.gender[0].checked==false
&& frm.gender[1].checked==false) {
alert('성별을 꼭 체크하세요');
frm.gender[0].focus();
return;
}
if (frm.hobby[0].checked==false
&& frm.hobby[1].checked==false
&& frm.hobby[2].checked==false) {
alert('취미를 1개 이상 체크하세요');
frm.hobby[0].focus();
return;
}
if (frm.grade.selectedIndex == 0) {
alert('학년을 선택하세요');
frm.grade.focus();
return;
}
// 전송
frm.submit();
}
</script>
</head>
<body>
<form action="a.jsp" method="post" name="frm">
성별: <input type="radio" name="gender" value="남">남자
<input type="radio" name="gender" value="여">여자
<br>
취미: <input type="checkbox" name="hobby" value="여행">여행
<input type="checkbox" name="hobby" value="게임">게임
<input type="checkbox" name="hobby" value="야구">야구
<br>
학년:
<select name="grade">
<option value="">학년을 선택하세요</option>
<option value="1">1학년</option>
<option value="2">2학년</option>
<option value="3">3학년</option>
</select>
<input type="button" value="정보" onclick="func1()">
<input type="button" value="전송" onclick="func2()">
</form>
</body>
</html>
'IT > JavaScript' 카테고리의 다른 글
| javascript - setTimeout()으로 웹 페이지 자동 연결 (0) | 2018.08.31 |
|---|---|
| javascript - 이벤트 기초 및 활용법, preventDefault, stopPropagation, form, radio, checkbox (0) | 2018.08.27 |
| javascript - document.getElementById, document.write(), prompt, eval, 조건문, 반복문, 함수 (0) | 2018.08.26 |
| javascript - 함수정의, 함수호출, 익명함수 (0) | 2018.08.24 |