유효성 검사(Validation)

See the Pen validation by Jungwon (@ajw000) on CodePen.

 

● HTML

1. required : 필수요소
2. minlength / maxlength : 최소/최대 길이
3. min / max : 최소 / 최대 정수
4. type 
5. pattern

● CSS

1. :valid : 규칙에 맞는 값을 입력한 경우
2. :invalid : 규칙에 맞지 않은 값을 입력한 경우

● JS

@charset "UTF-8";
* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  font-family:sans-serif;

}

body {
  background-image:#34495e;
}

form {
  position:absolute;
  width:400px;
  height:400px;
  padding: 30px, 20px;
  background-color:#FFFFFF;
  top:25%;
  left:50%;
  transform: translate(-50%,-50%);
  border-radius: 15px;
}

h2 {
  text-align: center;
  margin: 30px;
}

h3, h5{
	text-align:center;
}
.textForm {
  
  margin: 10px 30px 0px 30px;
  padding: 10px 10px;
}
.label{
	padding-right: 20px;
}

input{
	width: 100%;
	border:none;
	outline:none;
	color: #636e72;
	font-size:16px;
	height:25px;
	background: #ebeffd;
}

.btn {
  position:relative;
  left:50%;
  transform: translateX(-50%);
  margin-bottom: 40px;
  width:80%;
  height:40px;
  background: linear-gradient(125deg,#81ecec,#6c5ce7,#81ecec);
  background-position: left;
  background-size: 200%;
  color:white;
  font-weight: bold;
  border:none;
  cursor:pointer;
  transition: 0.4s;
  display:inline;
}

.btn:hover {
  background-position: right;
}

.textForm > input:invalid{
	border-bottom: 2px solid red;
}
.textForm > input:valid{
	border-bottom: 2px solid #adadad;
}

#PwCk_warning{
	color: red;
    display: none;
}​

<form method="post">                                                                                         
	<h2>Validation 모음</h2>
	
	<div class="textForm">
		<label class="label" for="loginId">ID</label>
		<input id="loginId" name="loginId" type="text" placeholder="아이디" autocomplete="off">
	</div>
	<div class="textForm">
		<label class="label" for="loginPw">PW</label>
		<input id="loginPw" name="loginPw" type="password" placeholder="비밀번호"  autocomplete="off">
	</div>
	<h5>비밀번호 재확인</h5>
	 <div class="textForm">
		<input id="loginPwCk" name="loginPwCk" type="password" class="pw" placeholder="비밀번호 확인"  onkeyup="return isCorrect(event)">
		<p id="PwCk_warning">비밀번호가 맞지 않습니다.</p>
	</div>
	<br>
	<h3>----정규식----</h3>
	<br>
	<h5>input 정규식 : 숫자만</h5>
	<div class="textForm">
		<label class="label" for="pattern01">01</label>
		<input name="pattern01" type="text" pattern="\d*">
		<input name="pattern01" type="text" pattern="^[0-9]+$">
	</div>
	<h5>input 정규식 : 영문 대문자</h5>
	<div class="textForm">
		<label class="label" for="pattern02">02</label>
		<input name="pattern02" type="text" pattern="^[A-Z]+$">
	</div>
	<h5>input 정규식 : 영문 대소문자+공백가능</h5>
	<div class="textForm">
		<label class="label" for="pattern03">03</label>
		<input name="pattern03" type="text" pattern="^[a-zA-Z\s]+$">
	</div>
	<h5>input 정규식 : 숫자+영문대소문자</h5>
	<div class="textForm">
		<label class="label" for="pattern04">04</label>
		<input name="pattern04" type="text" pattern="^[a-zA-Z0-9]+$">
	</div>
	<h5>input 정규식 : 최소 8자리에서 최대 16자리까지 숫자, 영문, 특수문자 각 1개 이상 포함 (암호 유효성 검사에 유용)</h5>
	<div class="textForm">
		<label class="label" for="pattern05">05</label>
		<input name="pattern05" type="text" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,16}$">
	</div>
	<br>
	<h3>----스크립트----</h3>
	<br>
	<h5> 숫자only & 소수점</h5>
	<div class="textForm">
		<input name="script01" type="text" onkeypress="return isNumberKeyOnly(event)" onkeyup="this.value=this.value.replace(/[\ㄱ-ㅎㅏ-ㅣ가-힣]/g, '');"/>
	</div>
	<h5> 한글 only</h5>
	<div class="textForm">
		<input name="script01" type="text" onkeypress="return isKorKeyOnly(event)"/>
	</div>
	<h5> 영어 only</h5>
	<div class="textForm">
		<input name="script01" type="text"  onkeyup="this.value=this.value.replace(/[^A-Za-z]/ig, '');"/>
	</div>
	<h3>--------</h3>
	<h5>이메일 패턴</h5>
	 <div class="textForm">
		<input name="email" type="text" placeholder="이메일" pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*">
	</div>
	 <div class="textForm">
		<input name="emailjs" id="emailjs" type="text" placeholder="이메일" >
		<button onclick="validateEmail();">검사</button>
	</div>
	<br>
	<h3>--------</h3>
	<br>
	<h5>전화번호(패턴)**비추</h5>
	<div class="textForm">
<!-- 	tel타입은 사파리에서만 지원 -->
<!-- https://gurtn.tistory.com/86 -->
		<input type="text" name="tlno" placeholder="000-0000-0000" pattern="[0-9]{2,3}-[0-9]{3,4}-[0-9]{3,4}" maxlength="13">
	</div>
	<h5>전화번호(js)</h5>
	<div class="textForm">
		<input type="text" name="telno" placeholder="전화번호" oninput="isTel(this)" maxlength="13">
	</div>
		<input type="submit" class="btn"/>
</form>

//비밀번호 재확인
var isCorrect = function(event){
	var pw = document.getElementById("loginPw");
	var pwck = document.getElementById("loginPwCk");
	const warning = document.getElementById("PwCk_warning");
	if(null != pw.value){
		if(pw.value == pwck.value){
			pwck.style.cssText = "border-bottom: 2px solid #adadad;";
			warning.style.display = "none";
			console.log("비번 똑같음")
		}else{
			pwck.style.cssText = "border-bottom: 2px solid red;";
			warning.style.display = "block";
			console.log("비번 다름")
		}
	}else{
		console.log("비번값없음")
	}
}
//숫자only
function isNumberKeyOnly(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    // Textbox value    
    var _value = event.srcElement.value;    
    // 소수점(.)이 두번 이상 나오지 못하게
    var _pattern0 = /^\d*[.]\d*$/; // 현재 value값에 소수점(.) 이 있으면 . 입력불가
    if (_pattern0.test(_value)) {
        if (charCode == 46) {
            return false;
        }
    }
    // 1000 이하의 숫자만 입력가능
    var _pattern1 = /^\d{3}$/; // 현재 value값이 3자리 숫자이면 . 만 입력가능
    if (_pattern1.test(_value)) {
        if (charCode != 46) {
            alert("1000 이하의 숫자만 입력가능합니다");
            return false;
        }
    }
    // 소수점 둘째자리까지만 입력가능
    var _pattern2 = /^\d*[.]\d{2}$/; // 현재 value값이 소수점 둘째짜리 숫자이면 더이상 입력 불가
    if (_pattern2.test(_value)) {
        alert("소수점 둘째자리까지만 입력가능합니다.");
        return false;
    }  
    return true;
}
//한글 only
function isKorKeyOnly(evt) {
	if((event.keyCode < 12592) || (event.keyCode > 12687)){
		alert("한글만 입력이 가능합니다.");
		event.returnValue = false;
	}
}
//전화번호
function isTel(target) {
    target.value = target.value
        .replace(/[^0-9]/g, '')
        .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
}
//이메일
function validateEmail() {
	var email = document.getElementById("emailjs").value;
	var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
	if (email == '' || !re.test(email)) {
		alert("올바른 이메일 주소를 입력하세요");
		return false;
	}	
}