π»νμκ°μ μ, μ ν¨μ± κ²μ¬ μ½λπ»
κΈ°λ³Έ μ½λ
<!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>
#tbl1{
border: 1px solid gray;
border-collapse: collapse;
margin-bottom: 10px;
}
#tbl1 th, #tbl1 td {
border: 1px solid gray;
padding: 5px 10px;
}
#tbl1 th {
background-color: #eee;
}
input {
outline: none;
}
</style>
</head>
<body>
<h1>νμ κ°μ
</h1>
<form name="form1" action="ex25_test.jsp">
<table id="tbl1">
<tr>
<th>μ΄λ¦</th>
<td><input type="text" name="txtname"></td>
</tr>
<tr>
<th>λμ΄</th>
<td><input type="number" name="txtage" min="19" max="100"></td>
</tr>
<tr>
<th>μμ΄λ</th>
<td><input type="text" name="txtid"></td>
</tr>
<tr>
<th>μνΈ</th>
<td><input type="password" name="txtpw"></td>
</tr>
<tr>
<th>μνΈνμΈ</th>
<td><input type="password" name="txtpwc"></td>
</tr>
</table>
<input type="button" value="κ°μ
νκΈ°" name="btnSubmit">
</form>
<script>
document.form1.btnSubmit.onclick = m1;
function m1() {
var txtname = document.form1.txtname;
var txtage = document.form1.txtage;
var txtid = document.form1.txtid;
var txtpw = document.form1.txtpw;
var txtpwc = document.form1.txtpwc;
document.form1.submit(); //νΌ μ μ‘
}
</script>
</body>
</html>
λ²νΌ( submit VS button)
<body>
<h1>νμ κ°μ
</h1>
<form name="form1" action="ex25_test.jsp">
<input type="button" value="κ°μ
νκΈ°" name="btnSubmit">
</form>
<script>
document.form1.btnSubmit.onclick = m1;
function m1() {
//μ ν¨μ± κ²μ¬
//μ¬λ°λ₯΄μ§ μλ κ°
//console.log('μ¬λ°λ₯΄μ§ μμ κ°μ
λλ€.');
document.form1.submit(); //νΌ μ μ‘
}
</script>
</body>
</html>submit λ²νΌμ μ μ‘λ§μ λͺ©μ μΌλ‘ νλ κ°μ²΄μ΄λ―λ‘ λλλ‘ μ‘°κ±΄μ κ±Έμ§ μλλ€.
쑰건μ μμ±νκ³ μνλ©΄ submit λ²νΌμ΄ μλ μΌλ° buttonμΌλ‘ μμ±νλ€.
'document.form1.submit();' μ μ¬μ©νλ©΄ νΌμ΄ μ μ‘λλ€.
μ΄λ¦ μ ν¨μ± κ²μ¬
txtname.focus();λΉ μΉΈμΈ κ²½μ°μλ focus λ©μλλ₯Ό μ¬μ©νμ¬ μΉΈμ ν¬μ»€μ€κ° κ°λλ‘ νλ€.
txtname.select();κ°μ μμ ν΄μΌνλ κ²½μ°μλ select λ©μλλ₯Ό μ¬μ©νμ¬ μ 체 λλκ·Έ μνλ‘ λ§λ€μ΄μ€λ€.
txtname.value='';ν μ€νΈ λ°μ€ μ΄κΈ°ν ν λλ μμ κ°μ΄ μμ±νλ€.
//μ΄λ¦
//νμ κ°, 2~5μ μ΄λ΄, νκΈλ§ μ
λ ₯κ°λ₯
if(txtname.value == ''){
alert('μ΄λ¦μ μ
λ ₯νμΈμ.');
txtname.focus();
return;
}
if (txtname.value.length<2 || txtname.value.length >5) {
alert('2~5μ΄λ΄λ‘ μμ±νμΈμ.');
txtname.select();
return;
}
for (var i=0; i<txtname.value.length; i++){
var c = txtname.value.charAt(i);
if(c<'κ°' || c>'ν£') {
alert('νκΈλ§ μ
λ ₯νμΈμ.');
txtname.select();
return;
}
}λμ΄ μ ν¨μ± κ²μ¬
//λμ΄
//νμκ°, μ«μλ§ μ
λ ₯ κ°λ₯, λ²μ κ²μ¬
if(txtage.value==''){
alert('λμ΄λ₯Ό μ
λ ₯νμΈμ.');
txtage.focus();
return;
}μμ΄λ μ ν¨μ± κ²μ¬
μ κ·μμ μ΄μ©νμ¬ μ ν¨μ± κ²μ¬λ₯Ό νλ€.
//μ κ·μ κ°μ²΄
var regex = /^[A-Za-z_][A-Za-z0-9_]{3,12}$/;
if(regex.test(κ²μ¬λμ)) {
}κ²μ¬λμμ΄ μ κ·μ κ°μ²΄μ λ§λ νμμΈμ§ κ²μ¬νλ€.
//μμ΄λ
//νμκ°, 4~12μ μ΄λ΄, μμ΄+μ«μ+_ μ‘°ν©, μ«μλ‘ μμ λΆκ°
//μ κ·μ κ°μ²΄
var regex = /^[A-Za-z_][A-Za-z0-9_]{3,12}$/;
if(!regex.test(txtid.value)) {
alert('μ¬λ°λ₯Έ μμ΄λ κ°μ μ
λ ₯νμΈμ.');
txtid.focus();
return;
}μνΈ νμΈ μ ν¨μ± κ²μ¬
//μνΈ νμΈ
if (txtpw.value != txtpwc.value) {
alert('μνΈκ° λμΌνμ§ μμ΅λλ€.');
txtpwc.select();
return;
}μ λ ₯ν μνΈμ μνΈ νμΈ μΉΈμ΄ λμΌν κ°μΈμ§ κ²μ¬νλ€.
π»μ 체 μ½λπ»
<!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>
#tbl1{
border: 1px solid gray;
border-collapse: collapse;
margin-bottom: 10px;
}
#tbl1 th, #tbl1 td {
border: 1px solid gray;
padding: 5px 10px;
}
#tbl1 th {
background-color: #eee;
}
input {
outline: none;
}
</style>
</head>
<body>
<h1>νμ κ°μ
</h1>
<form name="form1" action="ex25_test.jsp">
<table id="tbl1">
<tr>
<th>μ΄λ¦</th>
<td><input type="text" name="txtname"></td>
</tr>
<tr>
<th>λμ΄</th>
<td><input type="number" name="txtage" min="19" max="100"></td>
</tr>
<tr>
<th>μμ΄λ</th>
<td><input type="text" name="txtid"></td>
</tr>
<tr>
<th>μνΈ</th>
<td><input type="password" name="txtpw"></td>
</tr>
<tr>
<th>μνΈνμΈ</th>
<td><input type="password" name="txtpwc"></td>
</tr>
</table>
<input type="button" value="κ°μ
νκΈ°" name="btnSubmit">
</form>
<script>
document.form1.btnSubmit.onclick = m1;
function m1() {
//μ ν¨μ± κ²μ¬
//μλͺ»λ κ°μ΄λ©΄
//console.log('μ¬λ°λ₯΄μ§ μμ κ°μ
λλ€.');
//submit λ²νΌμ μ μ‘λ§μ λͺ©μ μΌλ‘ νλ κ°μ²΄μ΄λ―λ‘ μ‘°κ±΄μ κ±Έμ§ μλλ€.
//μ ν¨μ± κ²μ¬λ₯Ό ν λλ μλͺ»λ κ°μ μ°Ύλ κ²μ΄ μ²λ¦¬νκΈ° μ½λ€.
var txtname = document.form1.txtname;
var txtage = document.form1.txtage;
var txtid = document.form1.txtid;
var txtpw = document.form1.txtpw;
var txtpwc = document.form1.txtpwc;
//μ΄λ¦
//νμ κ°, 2~5μ μ΄λ΄, νκΈλ§ μ
λ ₯κ°λ₯
if(txtname.value == ''){
alert('μ΄λ¦μ μ
λ ₯νμΈμ.');
txtname.focus();
return;
}
if (txtname.value.length<2 || txtname.value.length >5) {
alert('2~5μ΄λ΄λ‘ μμ±νμΈμ.');
// txtname.value=''; //ν
μ€νΈ λ°μ€ μ΄κΈ°ν
txtname.select(); //ν
μ€νΈ λ°μ€λ₯Ό κ·Έλκ·Έν μνλ₯Ό λ§λ€μ΄μ€λ€.
return;
}
for (var i=0; i<txtname.value.length; i++){
var c = txtname.value.charAt(i);
if(c<'κ°' || c>'ν£') {
alert('νκΈλ§ μ
λ ₯νμΈμ.');
txtname.select();
return;
}
}
//λμ΄
//νμκ°, μ«μλ§ μ
λ ₯ κ°λ₯, λ²μ κ²μ¬
if(txtage.value==''){
alert('λμ΄λ₯Ό μ
λ ₯νμΈμ.');
txtage.focus();
return;
}
//μμ΄λ
//νμκ°, 4~12μ μ΄λ΄, μμ΄+μ«μ+_ μ‘°ν©, μ«μλ‘ μμ λΆκ°
//μ κ·μ κ°μ²΄
var regex = /^[A-Za-z_][A-Za-z0-9_]{3,12}$/;
if(!regex.test(txtid.value)) {
alert('μ¬λ°λ₯Έ μμ΄λ κ°μ μ
λ ₯νμΈμ.');
txtid.select();
return;
}
//μνΈ νμΈ
if (txtpw.value != txtpwc.value) {
alert('μνΈκ° λμΌνμ§ μμ΅λλ€.');
txtpwc.select();
return;
}
document.form1.submit(); //νΌ μ μ‘
}
</script>
</body>
</html>'WEB > JavaScript' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [JavaScript] radio νΈλ€λ§ (0) | 2023.10.06 |
|---|---|
| [JavaScript] checkbox νΈλ€λ§ (0) | 2023.10.06 |
| [JavaScript] Message Box(alert, confirm, prompt) (0) | 2023.10.06 |
| image μ‘°μ (0) | 2023.10.06 |
| [JavaScript] collection(λ΄μ₯λ°°μ΄) (0) | 2023.10.06 |
