[HTML&JQUERY] 연락처 숫자만 입력하는 방법 & 유효성 검사

(2021년 3월 24일 문구를 추가하였습니다.)

 

안녕하세요 ? HTML 과 JQUERY를 이용하여 연락처에 숫자만 입력할 수 있는 방법과

이에 대한 유효성 검사하는 방법에 대해 알아보겠습니다.

흔히들 많이 사용하는데 할때마다 잃어버려서 따로 정리해보았습니다.

한글이나 영문등은 사용하면 자동으로 지워지고 오직 숫자만 입력됩니다.

 

 

 

 

 

---

HTML

 

우선 HTML입니다.

여기서는 INPUT을 3개로 만들어주고 NAME과 ID값을 3개로 만들어줍니다.

여기서 포인트는 maxlength를 이용하여 숫자 제한을하며

 

여기서 가장 중요한!!

Onkeyup을 통해서 제이쿼리를 사용할 수 있도록 합니다.

onkeyup="inputOnlyNumberFormat(this);"

inputOnlyNumberFormat를 선언해야 반영이 됩니다!!!

 

<tr>
    <th class="active" style="text-align:center">연락처</th>
    <td class="form-inline">
        <input type="text" id="tel1" name="tel1"  class="prep-entrepreneur" style="width:50px" maxlength="3" onkeyup="inputOnlyNumberFormat(this);" />&nbsp;-
        <input type="text" id="tel2" name="tel2"  class="prep-entrepreneur" style="width:50px" maxlength="4" onkeyup="inputOnlyNumberFormat(this);" />&nbsp;-
        <input type="text" id="tel3" name="tel3"  class="prep-entrepreneur" style="width:50px" maxlength="4" onkeyup="inputOnlyNumberFormat(this);" />
    </td>
</tr>

 

 

 

JQUERY

 

제이쿼리에서는 3개의 함수를 만들어줍니다.

Onlynumber를 만들어 정규식으로 숫자만 들어갈 수 있도록 설정한 다음 umcomma로 콤마가

찍히지 않도록 합니다. (uncomma 는 적용 안하셔도 괜찮습니다.)

그 다음 이 둘을 합친 inputonlynumberformat 함수를 만들어 obj를 넣어 사용할 수 있도록 합니다.

 

 

 

<script>
 
function uncomma(str) {
    str = String(str);
    return str.replace(/[^\d]+/g, '');
} 
 
function inputOnlyNumberFormat(obj) {
    obj.value = onlynumber(uncomma(obj.value));
}
 
function onlynumber(str) {
    str = String(str);
    return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g,'$1');
}
 
</script>

 

유효성 검사

유효성 검사에서는 3개의 input상의 id값을 변수에 넣어줍니다.

그리고 실제로 데이터베이스에 저장시킬 컬럼명을 입력합니다. (biomt_tel)

각각의 각들이 아닐 때 alert를 통해 경고창을 띄우고 focus를 통해 해당 칸으로 이동할 수 있도록 합니다. 그리고 return false를 통해 더 이상 진행되지 않도록 설정합니다.

그리고 마지막 부분에 디비에 저장할 컬럼에 각각의 값들을 더해서 적용해줍니다.

 

<script>
    
var tel1 =$("#tel1").val();
var tel2 =$("#tel2").val();
var tel3 =$("#tel3").val();
var biomt_tel ="";
 
if(!tel1){
    alert("담당자 전화번호를 입력해주세요");
$("#tel1").focus();
return false;
}
if(!tel2){
    alert("담당자 전화번호를 입력해주세요");
$("#tel2").focus();
return false;
}
if(!tel3){
    alert("담당자 전화번호를 입력해주세요");
$("#tel3").focus();
return false;
}
biomt_tel = tel1+"-"+tel2+"-"+tel3;
$("#biomt_tel").val(biomt_tel);  //hidden value set
console.log($("#biomt_tel").val());
 
</script>

 

데이터베이스에 저장할 컬럼 값 컨트롤러로 보내기

  

그리고 마지막으로 form태그 바로 밑에 input hidden을 통해서 컬럼의 값을 저장하여 컨트롤러로 보내주면 됩니다.

 

 

<form id="inputForm"name="inputForm" method="post" onsubmit="return _onSubmit();" action="${path}/create_action.do"  class="form-horizontal">
<input type="hidden" id="biomt_tel" name="biomt_tel" value="" />