web

[js] input태그 특수문자 입력 방지 | 입력 제거

soyamm 2023. 5. 15. 09:35
반응형

특수문자 입력 방지는 웹 사이트의 보안성을 높이기 위한 방법 중 하나입니다.

 

웹 사이트에서는 사용자로부터 입력 받은 정보를 처리하는 경우가 많습니다. 이때 입력된 정보에 악의적인 코드나 스크립트가 포함되어 있을 경우, 웹 사이트에 대한 공격이 이루어질 수 있습니다.

이러한 공격을 대비하여 웹 사이트에서는 입력 필드에 특수 문자 입력을 제한하고, 입력값에 대한 검증을 수행하여 보안성을 높이는 것이 중요합니다.

 

또한, 특수 문자를 입력하는 경우 입력 필드의 입력 형식을 깨뜨릴 수도 있습니다. 예를 들어, 데이터베이스에 저장된 정보에서 특정 필드의 입력값에 대한 검색을 수행할 때, 해당 필드에 특수 문자가 포함되어 있으면 검색 결과를 정확하게 얻을 수 없습니다. 따라서 특수 문자를 입력 방지하여 입력값의 일관성을 유지하는 것이 중요합니다.

 

 

 

[input태그]

<input type="text" class="input_" name="test" value="<?=$test?>" onkeyup="characterCheck(this)" onkeydown="characterCheck(this)" maxlength="100" placeholder="시리얼 넘버를 입력해주세요.">

html 파일내에 있는 input태그이다. name과 value값은 php값이므로 사용자들은 알아서 지정해서 넣으면 된다!.

 

onkeyup과 onkeydown는 HTML 이벤트 속성이다.

이 속성은 입력 필드에서 사용자가 키를 눌렀을 때 또는 떼었을 때 실행되는 JavaScript 함수를 지정한다.

 

onkeydown 이벤트는 사용자가 키를 누르고 있을 때 발생하며, onkeyup 이벤트는 사용자가 키를 떼었을 때 발생한다.

이 코드에서는 이벤트 핸들러를 통해 입력 필드에서 발생하는 키 이벤트에 대한 characterCheck 함수를 호출하여 입력된 값에 대해 특수 문자가 포함되어 있는지를 검사한다.

 

즉, 사용자가 입력 필드에서 키를 누르거나 떼면 onkeydown 또는 onkeyup 이벤트가 발생하고,

이벤트 핸들러에서 characterCheck 함수가 호출되어 입력된 값에 특수 문자가 포함되어 있는지를 검사한다.

이 방식으로 특수 문자를 입력 방지하는 기능이 동작하게 된다.

 

 

[js 코드]

<script>
	// 특수문자 입력 방지
	function characterCheck(obj){
	var regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\_+┼<>@\#$%&\'\"\\\(\=]/gi; 
	// 허용할 특수문자는 여기서 삭제하면 됨
	// 지금은 띄어쓰기도 특수문자 처리됨 참고하셈
	if( regExp.test(obj.value) ){
		alert("특수문자는 입력하실수 없습니다.");
		obj.value = obj.value.substring( 0 , obj.value.length - 1 ); // 입력한 특수문자 한자리 지움
		}
	}
</script>

test(obj.value)에 있는

test는 JavaScript의 문자열 메서드 중 하나이다. test 메서드는 인자로 전달된 정규식 패턴이 문자열에 존재하는지 검사하고, 결과로 true 또는 false 값을 반환한다.

 

 

이 코드만 이용하면 누구나 특수문자 입력방지를 사용할 수있다.!

참고로 regExp부분에 -(하이픈)이 빠져있으니(ㅠㅠ현재 만드는기능에 -이 있어야해서) 추가해서 넣으면 전체 특수문자를 막을 수있다.

 

홈페이지제작업체바로가기

반응형