코딩 이야기

form 유효성 검증 본문

JAVA스크립트

form 유효성 검증

별메아리 2023. 1. 20. 14:46
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
            div {
            margin: auto;
            width: 300px;
            background-color: #EEEFF1;
            border-radius: 5px;
            text-align: center;
            padding: 20px;
        }
        #btn {
            background-color: #1BBC9B;
            margin-bottom: 30px;
            color: white;
        }
        #btn2 {
            background-color: #1BBC9B;
            margin-bottom: 30px;
            color: white;
            }
        .in {
            margin-bottom: 10px;
        }
</style>
<script type="text/javascript">
function calc(y1) {
var x1 = /^[가-힣]{2,6}$/;
if(x1.test(y1.value)){
		document.getElementById("namesP").innerHTML = "멋진 이름이네요"
	return true;
	}else {
		alert("한글로 시작, 최소 2글자 최대 6글자");
		y1.focus();
          return false
	}
}
function calc2(y2){
var x2 = /^01([0|1|6|7|8|9]?)?([0-9]{3,4})?([0-9]{4})$/;
if(x2.test(y2.value)){
		alert("연락처 유효성 검증 완료")
        return true;
}else{
        alert("연락처를 다시 입력하여 주십시오.")
        y2.focus();
        return false;
}
}
function calc3(y3){
    var x3 = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
    if(x3.test(y3.value)){
		alert("이메일 유효성 검증 완료")
        return true;
}else{
    alert("이메일을 다시 입력하세요")
    y3.focus();
    return false;
}
}
function calc4(y4){
    var x4 = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
    if(x4.test(y4.value)){
		alert("비밀번호 유효성 검증 완료")
        return true;
}else{
    alert("비밀번호를 다시 입력하세요")
    y4.focus();
    return false;
}
}
function calc5() {						
	if(z3.value != z4.value) {
		alert("암호가 다릅니다. 다시 입력하세요.");
		z4.focus(); 
	}
}
</script>
</head>
<body>
<div>
<form>
이름<input type="text" class="in" name="name" id="id" onchange="calc(document.getElementById('id'))"><span id="namesP"></span><br>
<label>성별</label>
<input type="radio" class="in" name="gender" value="man">남
<input type="radio" class="in" name="gender" value="woman">여<br>
휴대폰번호<input type="tel" class="in" name="call" id="z1" onchange="calc2(document.getElementById('z1'))"><br>
이메일<input type="email" class="in" name="email" id="z2" onchange="calc3(document.getElementById('z2'))"><br>
패스워드<input type="password" class="in" name="pw" id="z3" onchange="calc4(document.getElementById('z3'))"><br>
패스워드 확인<input type="password" class="in" name="pw2" id="z4" onchange="calc5(document.getElementById('z4'))"><br>
<input type="submit" value="제출" id="btn">
<input type="reset" value="지우기" id="btn2">
</form>
</div>
</body>
</html>

 

728x90
저작자표시 비영리 변경금지

'JAVA스크립트' 카테고리의 다른 글

이벤트 처리  (0) 2023.01.19
form 요소에 접근하는 자바스크립트  (0) 2023.01.19
BOM(브라우저 객체 모델)  (0) 2023.01.19
아이디 비밀번호  (0) 2023.01.18
for in  (0) 2023.01.18
'JAVA스크립트' Related Articles more
Comments