1. regex
<body>
<form id="myform">
<div>
<label for='username'>사용자이름</label>
<input type='text' name='username' id='username' placeholder='한글만 입력' />
</div>
<div>
<label for='userpass'>나이</label>
<input type='text' name='age' id='age' placeholder='숫자만 입력' />
</div>
<div>
<label for='userpass'>아이디</label>
<input type='text' name='userid' id='userid' placeholder='영어+숫자,최대20자' />
</div>
<button type="submit">입력값 확인</button>
</form>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("#myform").submit(function(e){
e.preventDefault();
//이름 한글
let pattern1 = /^[ㄱ-ㅎ가-힣]*$/;
if( pattern1.test($("#username").val())){
alert("이름은 한글만 입력 가능합니다.");
$("#username").val('');
$("#username").focus();
return false;
}
// 나이의 숫자
let pattern2 = /^[0-9]*$/;
if( pattern2.test($("#age").val())){
alert("나이는 숫자만 입력 가능합니다.");
$("#age").val('');
$("#age").focus();
return false;
}
// 아이디의 영문 숫자
let pattern3 = /^[a-zA-Z0-9]*$/;
if( pattern3.test($("#userid").val())){
alert("아이디는 영문+숫자 조합으로만 입력 가능합니다.");
$("#userid").val('');
$("#userid").focus();
return false;
}
alert("검사완료");
});
</script>
</body>2. each
<body>
<form id="myform">
<label><input type='checkbox' class='hobby' value="soccor">축구</label>
<label><input type='checkbox' class='hobby' value="basketball">농구</label>
<label><input type='checkbox' class='hobby' value="baseball">야구</label>
<button type='submit'>입력값 확인</button>
<hr />
<div id="result"></div>
</form>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("#myform").submit(function(e){
e.preventDefault();
// 선택된 항목을 가져온다.
let check_list = $(".hobby:checked");
// 배열의 길이가 0이라면 선택된 항목이 없다는 의미이므로 중단
if( check_list.length == 0 ){
alert("선택된 항목이 없습니다.");
return false;
}
// each()
$.each(check_list, function(index, item){
// 배열의 원소가 item으로 전달
let value = $(item).val();
// 화면 표시
$("#result").append("<div>" + value + "</div>");
});
});
</script>
</body>3. focus
<body>
<form id="myform">
<h3>주민번호를 입력하세요</h3>
<input type='text' name='jumin1' id='jumin1' />
-
<input type='password' name='jumin2' id='jumin2' />
</form>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("#jumin1, #jumin2").focus(function(){
$(this).css('background-color', 'tomato');
});
$("#jumin1, #jumin2").blur(function(){
$(this).css('background-color', 'white');
});
// 키 이벤트
$("#jumin1").keyup(function(){
let value = $(this).val();
if( value.length >= 6 ){
$("#jumin2").focus();
}
});
</script>
</body>4. disabled
<style>
/* disabled 속성을 갖는 요소의 배경색상 처리 */
input[disabled] { background-color: #eee; }
</style>
</head>
<body>
<label for='username'> 입력하기 <input type="checkbox" id="input_enable" /> </label>
<input type='text' name='input' id='input' disabled />
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("#input_enable").change(function(){
// input의 disanled 값을 가져온다. -> true or false
let now = $("#input").prop('disabled');
$("#input").prop('disabled', !now);
if( $("#input").prop('disabled') == false ){
$("#input").focus();
}
});
</script>
</body>5. dropdown
<body>
<form id="myform">
<div>
<label for='subject'>과목</label>
<select name="subject" id="subject">
<option value="">--- 선택하세요 ---</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JAVASCRIPT</option>
</select>
</div>
<button type="submit">입력값 확인</button>
<hr />
<!-- 선택결과를 표시할 div -->
<div id="result"></div>
</form>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$("#myform").submit(function(e){
e.preventDefault();
let subject = $("#subject").val();
if(!subject){
alert("과목을 선택해 주세요");
$("#subject").focus();
return false;
}
let subject_index = $("#subject > option:selected").index();
$("#result").append("<div>과목 : " + subject + "</div>");
$("#result").append("<div>선택한 과목의 인덱스 : "
+ subject_index + "</div>");
});
</script>
</body>
개발자로 진로 변경을 위해 준비하고 있습니다