• HTML
  • JS

HTML,JS 를 이용한 회원가입 정규식 체크(ver 0.2)

2019-02-11 393

설명

  • 카카오톡 링크

HTML과 JS를 이용하여 회원가입 정규식 체크입니다. 꾸준히 의견을 반영하여 추가할 예정입니다.!
(회원가입 버튼을 눌러도 DB에 저장이 안되는걸 참고해주시면 감사하겠습니다~!)

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	.test_box {display:inline-block; width:100%}
	.test_box ul {display:inline-block; width:100%; max-width:500px}
	.test_box ul li {display:inline-block; width:100%; font-size:0; padding:5px 0}
	.test_box ul li:first-child {padding:0 0 5px 0}
	.test_box ul li label {display:inline-block; width:30%; font-size:16px; font-weight:300; letter-spacing:-0.05em; color:#404040}
	.test_box ul li input {display:inline-block; width:70%; font-size:14px; font-weight:300; font-family:"Malgun gothic"; box-sizing:border-box; padding:7px 10px}
	.test_box ul li.email_type input { display:inline-block; width:33%; padding:7px 10px; font-size:14px; box-sizing:border-box;}
	.test_box ul li.email_type span {display:inline-block; width:4%; text-align:center; font-size:16px; font-weight:300; margin-top:6px; vertical-align:top}
	.test_box ul li.email_type select { display:inline-block; width:33%; padding:6px 10px; font-size:14px; box-sizing:border-box;}
	.test_box .member_btn {display:inline-block; width:100%; font-size:0; margin-top:15px;}
	.test_box .member_btn input {display:inline-block; width:125px; font-size:14px; height:36px; border:0 none; cursor:pointer }
	.test_box .member_btn input[type="submit"] {background:#f2849e; color:#fff}
	.test_box .member_btn input[type="reset"] {background:none; border:1px solid #f2849e; box-sizing:border-box; color:#f2849e; margin-left:5px}
</style>

<script type="text/javascript">
	//정규식 검사
	function regChk(obj){
		var reg, msg;
		switch(obj.name){
			case 'id' :
				reg = new RegExp(/^[a-zA-Z0-9]{4,16}$/);
				msg = reg.test(obj.value) == false ? '아이디를 영어 또는 숫자 조합으로 4~16자 이내로 입력해 주세요.' : 'true';
			break;
			case 'pw' :
				msg = obj.value.length < 4 ? '비밀번호를 4글자 이상으로 입력해 주세요.' : 'true';
			break;
			case 'pw_chk' :
				msg = obj.value.length < 1 ? '비밀번호를 다시 입력해 주세요.' : 'true';
			break;
			case 'name' :
				reg = new RegExp(/^[가-힣,Ra-zA-Z]{1,}$/);
				msg = reg.test(obj.value) == false ? '이름을 입력해 주세요.' : 'true';
			break;
			case 'email' :
				reg = new RegExp( /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i);
				msg = reg.test(obj.value) == false ? '이메일 양식대로 입력해 주세요.' : 'true';
			break;
			case 'domain_choice' :
				msg = obj.value.length == 0 ? obj.title + '을 선택해 주세요.' : 'true';
			break;
			case 'tel' :
				reg = new RegExp(/^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/);
				msg = reg.test(obj.value) == false ? '전화번호 양식대로 입력해 주세요.' : 'true';
			break;
			case 'number' :
				reg = new RegExp(/(^[1-9]{1}$|^[1-9]{1}[0-9]{1}$|^99$)/);
				msg = reg.test(obj.value) == false ? '숫자 양식대로 입력해 주세요.' : 'true';
			break;
			default : 
				msg = obj.value.length == 0 ? obj.title + '을 입력해 주세요.' : 'true';
			break;
		}
		return msg;
	}

	/* 폼검사 */
	function frmChk(frm){
		var arg;
		var argLen = arguments.length - 1;
		var isOk = new Array();
		
		for(var i = argLen; i >= 1; i--){
			arg = arguments[i];
			isOk[arg] = regChk(frm[arg]);
			
			if(isOk[arg] != 'true'){
				frm[arg].focus();
			}
		}	
		
		for(var i = 1; i <= argLen; i++){
			arg = arguments[i];
			if(isOk[arg] != 'true'){
				alert(isOk[arg]);
				return false;
			}
		}
	}
	
	//한글만 입력 할 수 있게 하는 소스
	function hangul(){
		if((event.keyCode < 12592) || (event.keyCode > 12687)) {
			if(event.keyCode != 13) {
				event.returnValue = false
			}
		}
	}

	$(document).ready(function() {

		//숫자만 입력 할 수 있게 하는 소스
		$("input[type='number'], input[type='tel']").keydown(function (e) {
			// Allow: backspace, delete, tab, escape, enter and .
			if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
				// Allow: Ctrl/cmd+A
				(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
				// Allow: Ctrl/cmd+C
				(e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
				// Allow: Ctrl/cmd+X
				(e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
				// Allow: home, end, left, right
				(e.keyCode >= 35 && e.keyCode <= 39)) {
				// let it happen, don't do anything
				return;
			}
			// Ensure that it is a number and stop the keypress
			if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
				e.preventDefault();
			}
		});
	});
</script>
<form action="" method="post" id="" onsubmit="return frmChk(this, 'number', 'id', 'pw', 'pw_chk', 'name', 'email', 'email2','domain_choice','tel')">
	<fieldset>
		<legend>회원가입 폼</legend>
		<div class="test_box">
			<ul>
				<li>
					<label for="id">아이디</label>
					<input type="text" name="id" id="id" value="" title="아이디" placeholder="아이디를 입력해 주세요." />
				</li>
				<li>
					<label for="pw">비밀번호</label>
					<input type="password" name="pw" id="pw" value="" title="비밀번호" placeholder="비밀번호를 입력해 주세요." />
				</li>
				<li>
					<label for="pw_chk">비밀번호 확인</label>
					<input type="password" name="pw_chk" id="pw_chk" value="" title="비밀번호 확인" placeholder="비밀번호를 다시 입력해 주세요." />
				</li>
				<li>
					<label for="name">이름</label>
					<input type="text" name="name" id="name" value="" title="이름" placeholder="이름을 입력해 주세요." onKeyPress="hangul();" />
				</li>
				<li>
					<label for="email">이메일</label>
					<input type="email" name="email" id="email" value="" title="이메일" placeholder="이메일을 입력해 주세요." />
				</li>
				<li class="email_type">
					<label for="email2">이메일 양식2</label>
					<input type="text" name="email2" id="email2" value="" title="이메일 양식2" />
					<span>@</span>
					<select name="domain_choice" id="domain_choice" title="도메인">
						<option value="">선택해 주세요.</option>
						<option value="naver.com">naver.com</option>
					</select>
				</li>
				<li>
					<label for="tel">전화번호</label>
					<input type="tel" name="tel" id="tel" value="" title="전화번호" placeholder="전화번호를 입력해 주세요." />
				</li>
				<li>
					<label for="number">숫자만</label>
					<input type="number" name="number" id="number" value="" title="숫자만" placeholder="숫자를 입력해 주세요." />
				</li>
			</ul>
			<div class="member_btn">
				<input type="submit" name="" id="" value="회원가입" />
				<input type="reset" name="" id="" value="다시쓰기" />
			</div>
		</div>
	</fieldset>
</form>