틀 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form>
username : <input type ="text" id = "username"><br>
<div></div>
password : <input type ="text" id = "password"><br>
<div></div>
telephone : <input type ="text" id = "telephone"><br>
<button>버튼</button>
</form>
</body>
</html>
미션1)
username에 길이가 5자 이상이 되면, <div>에 username 길이를 초과했어요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#error-log{
display: none;
color: red;
}
</style>
</head>
<body>
<form>
username : <input type ="text" id = "username"><br>
<div id="error-log">유저네임 길이를 초과하였습니다</div>
password : <input type ="text" id = "password"><br>
<div></div>
telephone : <input type ="text" id = "telephone"><br>
<button>버튼</button>
</form>
<script>
function checkUsername(){
let username = $("#username").val();
if(username.length >= 5){
console.log("username has to be under 5");
// alert("유저네임 길이를 초과했어요.");
$("#error-log").css("display","block");
return false;
}else{
$("#error-log").css("display","none");
return true;
}
}
$("#username").on('input', (e) => {
checkUsername();
});
</script>
</body>
</html>
미션2) 비번은 특수문자가 들어오는 순간, div에 특수문자는 들어올 수 없어요.
!@#$%^&*
function checkPasswords(){
let password = $("#password").val();
let specialChars = /[!@#$%^&*]/;
if(specialChars.test(password)){
console.log("특수문자는 들어 올 수 없어요.");
$("#error-log2").css("display", "block");
return false;
}else{ $("#error-log2").css("display", "none");
return true;}
}
$("#password").on('input', function() {
checkPasswords();
});
미션3) 전화번호는 focus 이벤트를 써서 포커스가 들어오는 순간 010을 value에 자동추가 되기.
focus() : 대상 요소로 포커스가 이동하면 이벤트를 발생
function checkTelephone(){
let telephone = $("#telephone").val();
if( telephone.length > 0){
$("#telephone-log").css("display","block");
return true;
}else{
$("#telephone-log").css("display","none");
return false;
}
}
$("#telephone").on('focus', function() {
if($("#telephone").val().length === 0){
$("#telephone").val("010")
}
checkTelephone();
});010 커서가 맨 오른쪽 끝에 가도록
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#error-log{
display: none;
color: red;
}
#error-log2{
display: none;
color: red;
}
</style>
</head>
<body>
<form>
username : <input type ="text" id = "username"><br>
<div id="error-log">유저네임 길이를 초과하였습니다</div>
password : <input type ="text" id = "password"><br>
<div id="error-log2">비밀번호에 특수 문자는 들어올 수 없어요</div>
telephone : <input type ="text" id = "telephone" ><br>
<button>버튼</button>
</form>
<script>
function checkUsername(){
let username = $("#username").val();
if(username.length >= 5){
console.log("username has to be under 5");
// alert("유저네임 길이를 초과했어요.");
$("#error-log").css("display","block");
return false;
}else{
$("#error-log").css("display","none");
return true;
}
}
$("#username").on('input', (e) => {
checkUsername();
});
function checkPasswords(){
let password = $("#password").val();
let specialChars = /[!@#$%^&*]/;
if(specialChars.test(password)){
console.log("특수문자는 들어 올 수 없어요.");
$("#error-log2").css("display", "block");
return false;
}else{ $("#error-log2").css("display", "none");
return true;}
}
$("#password").on('input', function() {
checkPasswords();
});
function checkTelephone(){
let telephone = $("#telephone").val();
if( telephone.length > 0){
$("#telephone-log").css("display","block");
return true;
}else{
$("#telephone-log").css("display","none");
return false;
}
}
$("#telephone").on('focus', function() {
if($("#telephone").val().length === 0){
$("#telephone").val("010");
//커서 맨 끝으로 이동
this.setSelectionRange(3,3);
}
checkTelephone();
});
</script>
</body>
</html>
setselectionRange
텍스트 입력 필드 내에서 커서의 위치를 설정하는 JavaScript 메서드입니다.
여기서 this는 이벤트 핸들러 내에서 포커스를 받은 입력 필드 요소를 참조합니다.
setSelectionRange(start, end)는 커서 또는 선택 범위의 시작과 끝 위치를 지정합니다.Share article
