Step08_example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Step08_example.html</title>
</head>
<body>
<form action="signup" method="post" id="signupForm">
<label for="id">아이디</label>
<input type="text" name="id" id="id"/><br/>
<label for="pwd">비밀번호</label>
<input type="text" name="pwd" id="pwd"/><br/>
<label for="phone">전화번호</label>
<input type="text" name="phone" id="phone" placeholder="010-1234-5678"><br/>
<button type="submit">가입</button>
</form>
<script src="js/jquery-3.4.1.js"></script>
<script>
/*
[ 검증조건 ]
아이디 : 영문자로 시작, 특수문자 허용하지 않음, 최소 5글자, 최대 10글자
비밀번호 : 특수문자 1개 , 대문자 1개 반드시 포함, 8글자 이상
[a-zA-Z0-9] => [/w]
[^a-zA-Z0-9] => [/W]
*/
var idReg=/^[a-zA-Z][a-zA-Z0-9]{4,9}$/;
var pwdReg1=/[/W]+/; //특수문자 포함 여부를 검증할 정규식
var pwdReg2=/[A-Z]+/; //영문자 대문자 포함여부를 검증할 정규식
var pwdReg3=/^.{8,}$/; //최소 8글자 이상인지 여부를 검증할 정규식
//핸드폰 번호를 검증할 정규표현식
var phoneReg=/^01[016789]-[0-9]{3,4}-[0-9]{4}$/;
/*
폼에 회원가입 정보를 입력하고 가입 버튼을 눌렀을때 위의 정규표현식
객체로 입력한 필드를 검사해서 매칭이 안된다면 매칭이 안되는 이유를
alert() 창으로 출력하고 폼 전송을 막아 보세요.
*/
$("#signupForm").on("submit", function(){
//입력한 아이디
var id=$("#id").val();
if(!idReg.test(id)){
alert("아이디를 영문자로 시작, \
특수문자 허용하지 않음, 최소 5글자, 최대 10글자, 입력하세요!");
return false; //폼 전송 막기
}
//입력한 비밀번호
var pwd=$("#pwd").val();
if(!pwdReg1.test(pwd)){
alert("비밀번호에 특수문자를 1개이상 포함 시키세요");
return false;
}
if(!pwdReg2.test(pwd)){
alert("비밀번호에 영문자 대문자를 1개이상 포함 시키세요.");
return false;
}
if(!pwdReg3.test(pwd)){
alert("비밀번호를 8글자 이상 입력하세요.");
return false;
}
//입력한 전화번호
var phone=$("#phone").val();
if(!phoneReg.test(phone)){
alert("전화번호를 형식에 맞게 입력하세요.");
return false;
}
});
</script>
</body>
</html>
Step08_example2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Step08_example2.html</title>
</head>
<body>
<input type="text" id="inputNum" placeholder="숫자만 입력..."/>
<script src="js/jquery-3.4.1.js"></script>
<script>
var str="abcd1234efgh5678";
/*
문자열.replace(/정규표현식/g, "교체할 문자열")
[0-9] => [\d]
[^0-9] => [\D]
*/
$("#inputNum").on("input", function(){
var str=$(this).val();
//숫자가 아닌 문자는 빈 문자로 바꿔서 제거되게 한다.
var result=str.replace(/[^0-9]/g,"");
//숫자가 제거된 문자열을 다시 value 값으로 넣어준다.
$(this).val(result);
});
</script>
</body>
</html>
Step08_regExp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Step08_regExp.html</title>
</head>
<body>
<input type="text" id="inputMsg" placeholder="영문자 소문자만 입력..."/>
<p id="console"></p>
<script src="js/jquery-3.4.1.js"></script>
<script>
//영문자 소문자로만 이루어져 있는지를 검증할 정규 표현식 객체
var reg=/^[a-z]+$/;
// input 요소에 무언가 입력했을때 실행할 함수 등록
$("#inputMsg").on("input", function(){
//입력한 문자열을 읽어와서
var msg=$(this).val();
//영문자 소문자로만 이루어져 있는지 여부 알아내기
var isLowerCase=reg.test(msg);
//p 요소에 출력하기
$("#console").text(isLowerCase);
if(isLowerCase){
$(this).css("color","#00ff00");
}else{
$(this).css("color","#ff0000");
}
});
</script>
</body>
</html>
Step08_regExp2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Step08_regExp2.html</title>
</head>
<body>
<button id="extractBtn">추출하기</button>
<ul>
</ul>
<script src="js/jquery-3.4.1.js"></script>
<script>
var str="My name is kimgura!";
//공백이 아닌 연속된 문자열을 찾아내는 정규표현식 객체
var reg=/[^ ]+/g;
$("#extractBtn").click(function(){
while(true){
//정규표현식에 매칭되는 문자열을 얻어낸다.
var result=reg.exec(str);
//매칭되는 문자열이 더이상 없으면 null 을 리턴한다.
if(result==null)break;
//li 요소를 동적으로 만들어서 text 출력하고 ul 에 추가
$("<li/>").text(result).appendTo("ul");
}
});
</script>
</body>
</html>
'javascript, framework > jquery' 카테고리의 다른 글
| Step09_example (0) | 2022.09.16 |
|---|---|
| Step07_form (폼) (0) | 2022.09.16 |
| Step06_animate (트랜지션, 이동) (0) | 2022.09.16 |
| step05_effect (사라졌다 나타나는 효과들) (0) | 2022.09.16 |
| Step01~04 (html, css 접근, event) (0) | 2022.09.16 |
