Jquery 특수문자 입력 제한 - jquery teugsumunja iblyeog jehan

Question

javascript 정규식 사용

모바일 안드로이드 천지인 키보드 예외추가

$("input:not([type='file']), textarea").bind("change keyup input",function() {
	var el = this;
	var ls_str = el.value;
	var deny_pattern =/^[\-\:\ㄱ-ㅣ가-힣a-zA-Z0-9_\\s\\/\\.\\ \\*\\#\\\=\\_\\~\\?\\!\\,|\u318D\u119E\u11A2\u2022\u2025a\u00B7\uFE55]*$/;  
	
	numPattern = ls_str.match(deny_pattern);

	if (numPattern == null) {
		alert("영문자와 한글,숫자만을 입력하세요");
		this.value = "";
		this.focus();
		return false;
	}
});

input text를 사용하다보면 숫자만 입력 받는다거나, 특수문자는 입력하지 못하게 하는 등의 입력 

제한이 필요한 때가 많이 있습니다.


Javascript의 match와 정규식을 활용하면 간단하게 입력 제한을 걸어줄 수 있습니다.



case 1. 특수문자 입력을 제한





다음과 같이 특수문자 < > ( ) 의 입력을 제한해야 하는 input이 있습니다.



1
<input type="text" id="inputId" maxlength="30" />



Javascript로 입력 제한할 특수문자의 정규식과 match, keyup, focusout 메소드를 사용하여 
간단하게 해결할 수 있습니다.



<script>
    
    // 입력을 제한 할 특수문자의 정규식
    var replaceId  = /[<>()]/gi;
    
    $(document).ready(function(){
        
        $("#inputId").on("focusout", function() {
            var x = $(this).val();
            if (x.length > 0) {
                if (x.match(replaceId)) {
                   x = x.replace(replaceId, "");
                }
                $(this).val(x);
            }
        }).on("keyup", function() {
            $(this).val($(this).val().replace(replaceId, ""));

        });

    });
 
</script>








case 2. 숫자만 입력하도록 제한


마찬가지로 숫자만 입력받아야 하는 input이 있습니다.


<input type="text" id="inputPhone" maxlength="30" />


역시 Javascript로 간단하게 해결할 수 있습니다.


<script>
    
    // 숫자가 아닌 정규식
    var replaceNotInt = /[^0-9]/gi;
    
    $(document).ready(function(){
        
        $("#inputPhone").on("focusout", function() {
            var x = $(this).val();
            if (x.length > 0) {
                if (x.match(replaceNotInt)) {
                   x = x.replace(replaceNotInt, "");
                }
                $(this).val(x);
            }
        }).on("keyup", function() {
            $(this).val($(this).val().replace(replaceNotInt, ""));
        });
 
    });
 
</script>









case 3. 숫자, 특수문자, 불완성형 한글을 제외하여 입력하도록 제한


이번에는 숫자, 특수문자, 불완성형 한글을 제외하여 입력받아야 하는 input이 있습니다.


<input type="text" id="inputName" maxlength="30" />


한글을 완성하기 위해서는 자음 모음이 연달아 입력이 되어야 합니다. 

따라서 불완성형 한글을 검사하는 부분은 focusout에서만 실행해야 한글이 정상 입력이 됩니다. 



특수문자를 치환하는 부분은 이전처럼 keyup과 focusout에 동일하게 걸어줍니다.


<script>    
 
    // 특수문자 정규식 변수(공백 미포함)
    var replaceChar = /[~!@\#$%^&*\()\-=+_'\;<>0-9\/.\`:\"\\,\[\]?|{}]/gi;
 
    // 완성형 아닌 한글 정규식
    var replaceNotFullKorean = /[ㄱ-ㅎㅏ-ㅣ]/gi;
    
    $(document).ready(function(){
        
        $("#inputName").on("focusout", function() {
            var x = $(this).val();
            if (x.length > 0) {
                if (x.match(replaceChar) || x.match(replaceNotFullKorean)) {
                    x = x.replace(replaceChar, "").replace(replaceNotFullKorean, "");
                }
                $(this).val(x);
            }
            }).on("keyup", function() {
                $(this).val($(this).val().replace(replaceChar, ""));

       });

    });       
    
 
</script>



이를 활용하면 다양한 제한들을 간단하게 걸어줄 수 있습니다.

출처 : https://developersp.tistory.com/11

티스토리 뷰

특수문자를 정규식을 사용해서 막기

onkeyup 과 ononkeydown 에서 현재 입력창의 값을 받아서 처리 한다.

<input type="text"  onkeyup="check(this)" onkeydown="check(this)" >

function check(obj){
        //정규식으로 특수문자 판별
        var regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\-_+┼<>@\#$%&\'\"\\\(\=]/gi;
        
        //배열에서 하나씩 값을 비교
        if( regExp.test(obj.value) ){
           //값이 일치하면 문자를 삭제
           obj.value = obj.value.substring( 0 , obj.value.length - 1 ); 
        }
      }

국내 최고 XE 개발 sejin7940 - XE 관련팁

XE FAQ 는 제가 XE공홈 '묻고 답하기'에 답변한 내용들 중 일부를 정리한 내용입니다. (대부분이 제가 한 답변이죠)
XE Tips 는 제가 XE 공홈에 쓴 XE 관련 유용한 팁들입니다. 기능개선은 공홈에 안 적어둔 XE 유용 개선팁들입니다.
유용정보는 외부 검색을 통해 알아낸 소스등을 기재해둔 곳입니다.
버그 신고내역들은 XE 사용하다가 발견한 버그 패치방법들로, Core Issue 에 기록해뒀기에 XE 에 적용이 되었을 가능성이 있겠죠

제가 쓴 글들에 대해 퍼가실때는 꼭 출처를남겨주시고.. (다만 플래시뷰 기반이기에 퍼가기는조금 힘들 수 있겠죠 ^^;)
타회원의 글들도 적혀있는 출처를 같이 꼭 기재해주세요