2017년 2월 13일 월요일

기본적인 유효성 검사 및 태그 틀 layerMsg 및 focus

---------------- 코드 실행 시작---------------------------------------------------------------
1-1항목 1-2항목 숫자만
2-1항목 2-2항목 숫자+콤마
3-1항목 3-2항목 숫자+장선(-)
4-1항목 4-2항목 숫자+점(.)
에러메세지....
---------------- 코드 실행 종료---------------------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
 .layer-main {
 z-index:2000;
 display:none;
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 text-align: center;
 background-color: rgba(0, 0, 0, 0.5);
}
.layer-main:before {
 content: "";
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 margin-right: -.25em;
}
.layer-popup {
 display: inline-block;
 vertical-align: middle;
 background-color: #fff;
 border: 1px solid #3571B5;
 z-index: 10;
 font-family:Tahoma;
}
.layer-popup .layer-container {
 padding-bottom: 20px;
}

.layer-title {
 overflow:hidden;
 margin:0px;
 padding:0px;
 background-color: #474747;
 height:36px;
}
.layerTitle {
 float:left;
 line-height:36px;
 margin:0px;
 padding:0px 0px 0px 10px;
 font-size:15px;
 color:#ffffff;
}

.layer-close {
 float:right;
 margin:0px;
 padding:8px 10px;
 cursor:pointer;
}

.layerConts {
 clear:both;
 margin-top:10px;
 padding: 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("[d-valid='ValidNumber']").each(function (){
   // 익스 플로러 10버전 이상 및 (크롬 사파리 포함) 지원하면 keydown 이벤트를 input 이벤트로 데체 하면 좋음!!!!
$(this).on("keydown", function () {kdNumber(this);});
$(this).on("keyup", function () {kuNumber(this);});
});

$("[d-valid='ValidNumComma']").each(function (){
$(this).on("keydown", function () {kdNumComma(this);});
$(this).on("keyup", function () {kuNumComma(this);});
$(this).on("blur", function () {kbNumComma(this);});
});

$("[d-valid='ValidNumMinus']").each(function (){
$(this).on("keydown", function () {kdNumMinus(this);});
$(this).on("keyup", function () {kuNumMinus(this);});
});

$("[d-valid='ValidNumDot']").each(function (){
$(this).on("keydown", function () {kdNumDot(this);});
$(this).on("keyup", function () {kuNumDot(this);});
});
});

/* -- prototype -------------------------------------------------------------------------------------------------------------------*/
String.prototype.DelComma = function () {
return this.replace( /,/g, "");
}

String.prototype.AddComma = function () {
return this.replace(/[^0-9]/g , "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}


/* -- replace후 커서위치 유지 -------------------------------------------------------------------------------------------------------------------*/
function CurserSet(Obj, selLen) {
if (Obj.setSelectionRange) { Obj.focus(); Obj.setSelectionRange(selLen, selLen); } /* WebKit */
else if (Obj.createTextRange) { var range = Obj.createTextRange(); range.collapse(true); range.moveEnd('character', selLen); range.moveStart('character', selLen); range.select(); } /* IE */
else if (Obj.selectionStart) { Obj.selectionStart = selLen; Obj.selectionEnd = selLen; }
}

/* -- 숫자만 -------------------------------------------------------------------------------------------------------------------*/
function ValidNumber(Obj) {
var jObj = $(Obj);
var val = jObj.val();
var required = jObj.attr("d-required");
if(required.toLowerCase() != "true" && val == ""){
return true;
}

var msg = jObj.attr("d-msg");
if(jObj.attr("d-required") == "true" && val == "" ){
if(jObj.val() == ""){
msgShow(Obj, msg + " 항목 값을 입력해주세요.");
}
else{
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
}
else{
var ext = /[^0-9]/g;
if(ext.test(val)){
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
else{
return true;
}
}
jObj.focus();
return false;
}

function kuNumber(Obj) {
var selLen = Obj.selectionStart;
var oVal = $(Obj).val();
var tVal = oVal.replace(/[^0-9]/g , "");
if (oVal != tVal) {
$(Obj).val(tVal);
CurserSet(Obj, selLen + tVal.length - oVal.length);
}
}

function kdNumber(Obj) {
var eKey = event.keyCode;
if (((eKey >= 48 && eKey <= 57) || (eKey >= 96 && eKey <= 105) || eKey == 8 || eKey == 46 || eKey == 37 || eKey == 39 || eKey == 9) && (event.shiftKey == false)) {
}
else {
(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
}
}

/* -- 숫자+콤마(,) -------------------------------------------------------------------------------------------------------------------*/
function ValidNumComma(Obj) {
var jObj = $(Obj);
var val = jObj.val();
var required = jObj.attr("d-required");
if(required.toLowerCase() != "true" && val == ""){
return true;
}

val = val.DelComma();
var msg = jObj.attr("d-msg");
if(jObj.attr("d-required") == "true" && val == "" ){
if(jObj.val() == ""){
msgShow(Obj, msg + " 항목 값을 입력해주세요.");
}
else{
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
}
else{
var ext = /[^0-9]/g;
if(ext.test(val)){
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
else{
return true;
}
}
jObj.focus();
return false;
}

function kuNumComma(Obj) {
var selLen = Obj.selectionStart;
var oVal = $(Obj).val();
var tVal = oVal.replace(/[^,0-9]/g , "");
if (oVal != tVal) {
$(Obj).val(tVal);
CurserSet(Obj, selLen + tVal.length - oVal.length);
}
}

function kdNumComma(Obj) {
var eKey = event.keyCode;
if (((eKey >= 48 && eKey <= 57) || (eKey >= 96 && eKey <= 105) || eKey == 8 || eKey == 188 || eKey == 46 || eKey == 37 || eKey == 39 || eKey == 9) && (event.shiftKey == false)) {
}
else {
(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
}
}

function kbNumComma(Obj) {
var tval = $(Obj).val().AddComma();
$(Obj).val(tval);
}

function AddComma(Obj) {
$(Obj).val($(Obj).val().AddComma());
}

function DelComma(Obj) {
$(Obj).val($(Obj).val().DelComma());
}



/* -- 숫자+장선(-) -------------------------------------------------------------------------------------------------------------------*/
function ValidNumMinus(Obj) {
var jObj = $(Obj);
var val = jObj.val();
var required = jObj.attr("d-required");
if(required.toLowerCase() != "true" && val == ""){
return true;
}

val = val.replace( /-/g, "");
var msg = jObj.attr("d-msg");
if(jObj.attr("d-required") == "true" && val == "" ){
if(jObj.val() == ""){
msgShow(Obj, msg + " 항목 값을 입력해주세요.");
}
else{
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
}
else{
var ext = /[^0-9]/g;
if(ext.test(val)){
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
else{
return true;
}
}
jObj.focus();
return false;
}

function kuNumMinus(Obj) {
var selLen = Obj.selectionStart;
var oVal = $(Obj).val();
var tVal = oVal.replace(/[^-0-9]/g , "");
if (oVal != tVal) {
$(Obj).val(tVal);
CurserSet(Obj, selLen + tVal.length - oVal.length);
}
}

function kdNumMinus(Obj) {
var eKey = event.keyCode;
if (((eKey >= 48 && eKey <= 57) || (eKey >= 96 && eKey <= 105) || (eKey == 189 || eKey == 109) || eKey == 8 || eKey == 46 || eKey == 37 || eKey == 39 || eKey == 9) && (event.shiftKey == false)) {
}
else {
(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
}
}

/* -- 숫자+점(.) -------------------------------------------------------------------------------------------------------------------*/
function ValidNumDot(Obj) {
var jObj = $(Obj);
var val = jObj.val();
var required = jObj.attr("d-required");
if(required.toLowerCase() != "true" && val == ""){
return true;
}

val = val.replace( /\./g, "")
var msg = jObj.attr("d-msg");
if(jObj.attr("d-required") == "true" && val == "" ){
if(jObj.val() == ""){
msgShow(Obj, msg + " 항목 값을 입력해주세요.");
}
else{
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
}
else{
var ext = /[^0-9]/g;
if(ext.test(val)){
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
else{
return true;
}
}
jObj.focus();
return false;
}

function kuNumDot(Obj) {
var selLen = Obj.selectionStart;
var oVal = $(Obj).val();
var tVal = oVal.replace(/[^.0-9]/g , "");
if (oVal != tVal) {
$(Obj).val(tVal);
CurserSet(Obj, selLen + tVal.length - oVal.length);
}
}

function kdNumDot(Obj) {
var eKey = event.keyCode;
if (((eKey >= 48 && eKey <= 57) || (eKey >= 96 && eKey <= 105) || eKey == 8 || eKey == 46 || eKey == 37 || eKey == 39 || eKey == 9 || eKey == 190 || eKey == 110) && (event.shiftKey == false)) {
}
else {
(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
}
}

function IsValidate(){
var isSucc = true;
$("[d-valid]").each(function (){
if(isSucc){
var valid = $(this).attr("d-valid");
isSucc = eval(valid + "(this)");
}
});
if(isSucc){
alert("데이터 전송 로직을 작성하시면 됩니다.");
}
else{
return false;
}
}

var _focusObj;
function msgShow(Obj, Msg){
_focusObj = Obj;
AlertMsg(Msg);
}

function AlertMsg(Msg){
$(".layerConts").html(Msg);
$(".layer-main").show();
}

function closelayer(){
$(".layer-main").hide();
$(_focusObj).focus();
}
    </script>
</head>
<body>
<table style="width:600px;">
<colgroup>
<col style="width:60px;" />
<col style="width:140px;" />
<col style="width:60px;" />
<col style="width:140px;" />
<col style="width:200px;" />
</colgroup>
<tr>
<th>1-1항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumber" d-required="true" d-msg="1-1항목" />
</td>
<th>1-2항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumber" d-required="false" d-msg="1-2항목" />
</td>
<td>숫자만</td>
</tr>
<tr>
<th>2-1항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumComma" d-required="true" d-msg="2-1항목" />
</td>
<th>2-2항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumComma" d-required="false" d-msg="2-2항목" />
</td>
<td>숫자+콤마</td>
</tr>
<tr>
<th>3-1항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumMinus" d-required="true" d-msg="3-1항목" />
</td>
<th>3-2항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumMinus" d-required="false" d-msg="3-2항목" />
</td>
<td>숫자+장선(-)</td>
</tr>
<tr>
<th>4-1항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumDot" d-required="true" d-msg="4-1항목" />
</td>
<th>4-2항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumDot" d-required="false" d-msg="4-2항목" />
</td>
<td>숫자+점(.)</td>
</tr>
</table>
</body>
</html>
<input type="button" value="유효성체크"  onclick="IsValidate();"/>


<!----- 레이어 alert 메세지 ----->
<div class="layer-main">
    <div class="layer-popup">
        <div class="layer-container">
            <div class="layer-conts">
                <div class="layer-title">
                    <div class="layerTitle">
                        에러메세지....
                    </div>
                    <div class="layer-close" onclick="closelayer()">
                        <img src="/images/kr/cm/btn_popupClose.gif" alt="" />
                    </div>
                </div>
                <div class="layerConts">
                </div>
                <div>
                    <a href="javascript:closelayer();" class="">
                        닫기
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
작성자: 시간:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)