영문만, 숫자만, 한글만 입력.

페이지 정보

profile_image
작성자 LJM
댓글 0건 조회 510회 작성일 18-10-13 15:33

본문

<script type="text/javascript">

// 한글 영어만

$(".name_blank input").keyup(function(event) {

if (!(event.keyCode >= 37 && event.keyCode <= 40)) {

var inputVal = $(this).val();

$(this).val(inputVal.replace(/[^(ㄱ-힣a-zA-Z)]/gi, ''));

}

});

=>>>>> 상단 빨간색 정규식 부분을 기호에 맞추 수정하면 된다

 

 

$(document).ready(function(){

 

$("#input1").keyup(function(event){

if(event.keyCode !=8){

var result = "keycode="+ event.keyCode + " value="+ String.fromCharCode(event.keyCode);

var preHtml = $("#result").html();

$("#result").html(preHtml+ "<br />" +result);

}

if($(this).val() ==""){

$("#result").empty();

}

});

 

 

$("#onlyNumber").keyup(function(event){

if (!(event.keyCode >=37 && event.keyCode<=40)) {

var inputVal = $(this).val();

$(this).val(inputVal.replace(/[^0-9]/gi,''));

}

});

 

 

$("#onlyAlphabet").keyup(function(event){

if (!(event.keyCode >=37 && event.keyCode<=40)) {

var inputVal = $(this).val();

$(this).val(inputVal.replace(/[^a-z]/gi,''));

}

});

 

 

$("#notHangul").keyup(function(event){

if (!(event.keyCode >=37 && event.keyCode<=40)) {

var inputVal = $(this).val();

$(this).val(inputVal.replace(/[^a-z0-9]/gi,''));

}

});

 

 

$("#onlyHangul").keyup(function(event){

if (!(event.keyCode >=37 && event.keyCode<=40)) {

var inputVal = $(this).val();

$(this).val(inputVal.replace(/[a-z0-9]/gi,''));

}

});

});

</script>

 

 

 

숫자만: <input type="text" id="onlyNumber" /> <br />

영문만: <input type="text" id="onlyAlphabet" /> <br />

영문,숫자만:<input type="text" id="notHangul" /><br />

한글만:<input type="text" id="onlyHangul" /><br />

keyCode: <input type="text" id="input1" />

<div id="result"></div>

 

 

 

 

##############  정규표현식

 

1. 확장문자 (: backslash)

    - s : 공백 문자(스페이스, 탭, 폼 피드, 라인 피드)

    - b : 단어의 경계

    - B 이를 제외한 모든 문자 매칭

    - d : 숫자

    - D : 숫자가 아닌 문자 [^0-9] 와 동일

    - w : 알파벳, 숫자로 된 문자, 밑줄 기호(_) [A-Za-z0-9]

    - W : w의 반대 문자 [^A-Za-z0-9]

    - 특수문자 : 특수문자 자체를 의미 예) + (+ 기호 자체)

 

2. 특수문자

    - * : 0회 이상 반복

    - + : 1회 이상 반복

    - ? : 0 또는 1개의 문자 매칭

    - . : 정확히 1개 문자 매칭

 

 

3. 플래그

    - g : 전역매칭

    - i : 대소문자 무시

    - m : 여러 줄 매칭

 

 

4. 기타

    - () : 괄호로 묶인 패턴은 매칭된 다음, 그 부분을 기억한다.

    - $1,...,$9 : 괄호로 갭처한 부분 문자열이 저장 됨.

    - | : ~또는~

    - {} : 반복 횟수

 

 

##############  간단한 정규 표현식

 

 

 

var re = /a/         --a 가 있는 문자열

var re = /a/i        --a 가 있는 문자열, 대소문자 구분 안함

var re = /apple/    -- apple가 있는 문자열

var re = /[a-z]/    -- a~z 사이의 모든 문자

var re = /[a-zA-Z0-9]/    -- a~z, A~Z 0~9 사이의 모든 문자

var re = /[a-z]|[0-9]/  -- a~z 혹은 0~9사이의 문자

var re = /a|b|c/   --  a 혹은 b 혹은 c인 문자

var re = /[^a-z]/  -- a~z까지의 문자가 아닌 문자("^" 부정)

var re = /^[a-z]/  -- 문자의 처음이 a~z로 시작되는 문장

var re = /[a-z]$/  -- 문자가 a~z로 끝남

 

 

 

상기에 정의된 간단한 표현식을 아래에 넣어 직접 해 보시기 바랍니다.

 

 

var str = "sample string";

re.test(str)?"true":"false";

 

 

* 특수문자('''', ''^'', ''$'', ''*'', ''+'', ''?'', ''.'', ''('', '')'', ''|'', ''{'', ''}'', ''['', '']'')를 검색할 경우는 '''' 를 넣는다.

 

 

##############  간단한 응용예제

 

var re = /s$/;          -- 공백체크

var re = /^ss*$/;   -- 공백문자 개행문자만 입력 거절

var re = /^[-!#$%&'*+./0-9=?A-Z^_a-z{|}~]+@[-!#$%&'*+/0-9=?A-Z^_a-z{|}~]+.[-!#$%&'*+./0-9=?A-Z^_a-z{|}~]+$/; --이메일 체크

var re = /^[A-Za-z0-9]{4,10}$/ -- 비밀번호,아이디체크 영문,숫자만허용, 4~10자리

var re = new RegExp("(http|https|ftp|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)","gi") -- 홈페이지 체크

var re = "<[^<|>]*>";  -- 태그제거

var re = /[<][^>]*[>]/gi;-- 태그제거

str = str.replace(RegExpTag,"");

 

 

var RegExpHG = "[ㄱ-ㅎ가-힣]";  -- 한글 제거

str = str.replace(RegExpHG,"");

var RegExpDS = //g;   -- 주석 제거

str6 = str.replace(RegExpDS,"");

var regExp = /[a-z0-9]{2,}@[a-z0-9-]{2,}.[a-z0-9]{2,}/i; --이메일 체크

 

 

## 기타 응용

re = new RegExp("^@[a-zA-Z0-9]+s+","i");//문장의 처음이 @이고 문자가 1나 이상 있으면 ok

 

 

기타 상기와 동일하나 약간씩 다른 샘플

 

영숫자 조합책크

if ((new RegExp(/[^a-z|^0-9]/gi)).test(frm.loginid.value)) {

    alert("ID는 영숫자 조합만 사용하세요");

    frm.loginid.focus();

}

 

 

홈페이지 주소 책크

function chk(v){

str='';

re = new RegExp("^http://","i");

re.test(v)?str='y':str='n';

alert(str);

}

 

 

hanmail인지를 책크

 

function chk(v){

str='';

re = new RegExp("hanmail.net","i");

re.test(v)?str=true:str=false;

return str

}

 

 

 

//본문내에서 도메인 구하기

var patt = /(http(s)?://)?w+(.w+)+/gi;

      var result = (aa.value.match(patt));

 

//본문내에서 url구하기

상기와 유사 var patt = /(http(s)?://)?w+(.w+).S*/gi;

 

 

########### 정규식 메소드 및 사용법

 

 

참조 http://eknote.tistory.com/1251">http://eknote.tistory.com/1251" target="_blank">http://eknote.tistory.com/1251">http://eknote.tistory.com/1251">http://eknote.tistory.com/1251" target="_blank">http://eknote.tistory.com/1251

참조 www.javascriptkit.com="" javatutors="" redev3.shtml""="" target="_blank">http://www.javascriptkit.com/javatutors/redev3.shtml">http://www.javascriptkit.com/javatutors/redev3.shtml" target="_blank">http://www.javascriptkit.com/javatutors/redev3.shtml">www.javascriptkit.com="" javatutors="" redev3.shtml""="" target="_blank">http://www.javascriptkit.com/javatutors/redev3.shtml">http://www.javascriptkit.com/javatutors/redev3.shtml" target="_blank">http://www.javascriptkit.com/javatutors/redev3.shtml

 

RegExp.exec(string)

RegExp.test(string)

String.match(pattern)

String.search(pattern)

String.replace(pattern,string)

String.split(pattern)  

 

 

회원 가입 폼 체크에서 jQuery Validation 플러그인을 활용하면 폼 체크를 비교적 간단히 할 수 있다.  

$(function() {

    $.validator.setDefaults({

        onkeyup:false,

        onclick:false,

        onfocusout:false,

        showErrors:function(errorMap, errorList){

            if(this.numberOfInvalids()) {

                alert(errorList[0].message);

            }

        }

    });

    $(‘form[name=fmember]’).validate({

        rules: {

            mb_id: { required: true, minlength: 4 },

            mb_password: { required: true, minlength: 6 },

            mb_password_re: { equalTo: “#mb_password” },

            mb_name: “required”,

            mb_birth: “required”,

            mb_zip1: “required”,

            mb_addr2: “required”,

            tel1: “required”,

            tel2: “required”,

            hp1: “required”,

            hp2: “required”,

            hp3: “required”,

            mb_email: { required: true, email: true }

        },

        messages: {

            mb_id: {

                required: “아이디를 입력해 주십시오.”,

                minlength: “아이디를 4글자 이상 입력해 주십시오.”

            },

            mb_password: {

                required: “비밀번호를 입력해 주십시오.”,

                minlength: “비밀번호를 6글자 이상 입력해 주십시오.”

            },

            mb_password_re: {

                equalTo: “비밀번호가 일치하지 않습니다.”

            },

            mb_name: {

                required: “성명을 입력해 주십시오.”

            },

            mb_zip1: {

                required: “주소를 입력해 주십시오.”

            },

            mb_addr2: {

                required: “상세주소를 입력해 주십시오.”

            },

            tel1: {

                required: “전화번호를 입력해 주십시오.”

            },

            tel2: {

                required: “전화번호를 입력해 주십시오.”

            },

            hp1: {

                required: “휴대전화번호를 입력해 주십시오.”

            },

            hp2: {

                required: “휴대전화번호를 입력해 주십시오.”

            },

            hp3: {

                required: “휴대전화번호를 입력해 주십시오.”

            },

            mb_email: {

                required: “이메일 주소를 입력해 주십시오.”,

                email: “올바른 형식의 이메일 주소를 입력해 주십시오.”

            },

            mb_birth: {

                required: “생년월일을 입력해 주십시오.”

            }

        },

        submitHandler: function(form) {

           var pattern1 = /(^[a-zA-Z])/;

            var pattern2 = /([^a-zA-Z0-9-_])/;

            var mb_id = $.trim($(‘input[name=mb_id]’).val());

            if(!pattern1.test(mb_id)){

                alert(“아이디의 첫글자는 영문이어야 합니다.”);

                return false;

            }

            if(pattern2.test(mb_id)){

                alert(“아이디는 영문, 숫자, -, _ 만 사용할 수 있습니다.”);

                return false;

            }

            form.submit();

        }

    });

});

댓글목록

등록된 댓글이 없습니다.

로그인