ProgrammingJavascript

[Vue.js] input 값 길이 체크

, , , ,

[Vue.js] input 값 길이 체크

input 입력 데이터의 길이를 확인해서, 길이 초과시에 메시지를 출력한다.

v-on:input 추가

1
<input type="text" id="title" v-on:input="title_typing" name="title" value="" title="제목" class="form-control" />

vue 생성

methods 를 추가합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var vue_event_regist = new Vue({
	el: '#title',
    methods: {
        title_typing : function(e){    	
            this.max_length(e, 5, '제목', '#title');
        },
        max_length : function(e, len, title, id){
            var val =  e.target.value;    			
            if (val.length > len){    				
                var msg = title + '의 최대 입력 길이는 ' + len + '입니다.';
                fnShowMsg(msg);        			
                $(id).val(val.substring(0, len));
            }
        }
    }
});

watch를 사용하였으나, 한글입력시에 제대로 처리되지 않아, methods로 바꾸고, jquery 를 같이 사용하였습니다.

출처

공유하기