Input 태그 - 속성과 특수문자 입력 방지 기능

로그인페이지 구현 중 필요했던 특수문자 입력방지 기능

 

 

Input 태그란?
Form 태그 안에서 추가되는 입력 요소들 중 가장 중요한 태그.

사용자로부터 정보를 받아들이는 용도로 사용되는데 Input 태그의 type이라는 속성을 이용해 입력 양식을 여러가지로 변경하여 사용한다.

 

<button>버튼태그</button>
<input type="button" value="인풋태그" name="Btn" />

위에는 버튼태그로 만든 버튼이고 아래는 인풋태그로 만든 버튼이다. ( 처음알았어..ㅠㅠ)

 

속성으로는 type / value / name 을 썼는데,

• type : 입력태그 유형
• value : 입력태그 초기값 ( 사용자가 변경가능 )
• name : 서버로 전달되는 이름 ( 서버로 전달되기때문에 협업시 프론트와 백과 소통 후 이름을 정한다)

 

type 속성값	내용	샘플
text	텍스트를 입력하는 창을 생성합니다.
password	비밀번호를 입력하는 창을 생성합니다.
radio	라디오 버튼을 생성합니다.
checkbox	체크박스를 생성합니다.
file	파일 이름을 입력하는 창을 생성합니다.
image	이미지를 전송 버튼으로 만듭니다.
hidden	사용자에게 보이지는 않지만 서버로 전송됩니다.
submit	서버로 제출/전송하는 버튼을 만듭니다.
button	일반 버튼을 생성합니다.

 

 

---

 

• 숫자 : /[0-9]/gi
• 숫자가 아닌 모든 문자 : /[^0-9]/g
• 대, 소문자 영문 : /[a-z]/gi
• 특수문자 : /[~!@#$%";'^,&*()_+|</>=>`?:{[\}]/g
• 공백 : /^\s+|\s+$/g
• 동일한 문자 연속 3자 이상 : /(\w)\1\1/g

 

import { useState } from "react";



//JavaScript
const [LoginId, setLoginId] = useState("");

  const IsLoginId = (e) => {
    const curValue = e.currentTarget.value;
    const notId = /[~!@#$%";'^,&*()_+|</>=>`?:{[}]/g;

    setLoginId(curValue.replace(notId, ""));
  };
  
  
  //Html
  <input
            type="text"
            name="ID"
            maxlength="10"
            value={LoginId}
            onChange={IsLoginId}
          />

search / test / replace  3가지를 사용하여 코드를 만들었다.

참고한 사이트에서 test 함수를 이용했다고 하는데 이부분은 이해가 가지 않아서  검색해보니

test 함수는 정규식과 특정 문자열 사이의 일치에 대한 검색을 수행한다. true 또는 false 를 반환한다고 한다.

그래서 지금 위 코드에서는 특수문자와 인풋창에 입력한 값을 비교하여 특수문자일 경우 true로 반환하고,

replace를 통해 true로 반환된 특수문자를 빈칸으로 반환해준다.

그래서 현재 인풋창에는 특수문자가 입력되지 않는다.

 

 

 

 

 

웹개발을 시작하면서 알게된 태그들이 정말 많다.

이번에 로그인 페이지를 구현하면서 Input 태그에 관해 알아두면 좋을 것 같아서 정리해 봤다.

이참에 정규식 표현도 알아두면 좋을 듯 하다.

 

참고사이트

https://grownfresh.tistory.com/112

React에서 아이디, 비밀번호 유효성 검사하기

https://yangbari.tistory.com/28

HTML - input태그와 그 속성 type, value, name - 입력태그 (1)

https://runebook.dev/ko/docs/javascript/global_objects/regexp/test

JavaScript - RegExp.prototype.test() test() 메서드는 정규식과 지정된 문자열 간의 일치 검색을 실행합니