html코드
<input type="email" name="test" />jquery 코드
$(function(){ $('"input[name=test]').on('keyup', function(event){ if (!(event.keyCode >=37 && event.keyCode<=40)) { var inputVal=$(this).val(); $(this).val(inputVal.replace(/[^]/gi,'')); } }); });영어/숫자 @-_. 을제외하고 한글입력 무시함
유효성 검사할때 등등, 업무중 꽤 많이 쓰는데, 항상 찾기 귀찮아서 한글, 영어, 숫자, 특수문자 구분 정규식을 모아보았다.
한글,영어,숫자,특수문자 구분 정규식 모음
var check_num = /[0-9]/; // 숫자 var check_eng = /[a-zA-Z]/; // 문자 var check_spc = /[~!@#$%^&*()_+|<>?:{}]/; // 특수문자 var check_kor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; // 한글체크사용방법
check_num.test(str); //숫자 return 값 true / false check_eng.test(str); //영문 return 값 true / false check_spc.test(str); //특수 return 값 true / false check_kor.test(str); //한글 return 값 true / falsetest() 함수를 이용하면 boolen 값을 얻을 수 있다.
Example
if( check_kor.test(str) && !check_num.test(str) && !check_eng.test(str) && !check_spc.test(str) ) { return true; }else{ alert("한글만 입력 가능합니다."); return false; }만약 한글만 입력 받게 하고싶다면?
자주 사용하게 되는 문법입니다.
자바스크립트(js)
function press_key() {
var ASCII_char_code = event.keyCode;
if (ASCII_char_code >= 48 && ASCII_char_code <= 57 )
return "숫자";
//영어
else if ((ASCII_char_code >= 65 && ASCII_char_code <= 90) || (ASCII_char_code >= 97 && ASCII_char_code <= 122))
return "영어";
else if ((ASCII_char_code >= 33 && ASCII_char_code <= 47) || (ASCII_char_code >= 58 &&
ASCII_char_code <= 64) || (ASCII_char_code >= 91 && ASCII_char_code <= 96) || (ASCII_char_code >= 123 && ASCII_char_code <= 126))
return "특수기호";
else if ((ASCII_char_code >= 12592) || (ASCII_char_code <= 12687))
return "한글";
else
return 0;
}
인풋(input)
input text를 사용하다보면 숫자만 입력 받는다거나, 특수문자는 입력하지 못하게 하는 등의 입력 제한이 필요한 때가 많이 있습니다.
Javascript의 match와 정규식을 활용하면 간단하게 입력 제한을 걸어줄 수 있습니다.
case 1. 특수문자 입력을 제한
다음과 같이 특수문자 < > ( ) 의 입력을 제한해야 하는 input이 있습니다.
<input type="text" id="inputId" maxlength="30" /> | cs |
Javascript로 입력 제한할 특수문자의 정규식과 match, keyup, focusout 메소드를 사용하여 간단하게 해결할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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> | cs |
case 2. 숫자만 입력하도록 제한
마찬가지로 숫자만 입력받아야 하는 input이 있습니다.
<input type="text" id="inputPhone" maxlength="30" /> | cs |
역시 Javascript로 간단하게 해결할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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> | cs |
case 3. 숫자, 특수문자, 불완성형 한글을 제외하여 입력하도록 제한
이번에는 숫자, 특수문자, 불완성형 한글을 제외하여 입력받아야 하는 input이 있습니다.
<input type="text" id="inputName" maxlength="30" /> | cs |
한글을 완성하기 위해서는 자음 모음이 연달아 입력이 되어야 합니다.
따라서 불완성형 한글을 검사하는 부분은 focusout에서만 실행해야 한글이 정상 입력이 됩니다.
특수문자를 치환하는 부분은 이전처럼 keyup과 focusout에 동일하게 걸어줍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <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> | cs |
이를 활용하면 다양한 제한들을 간단하게 걸어줄 수 있습니다.