Frudy
5k
2020-10-11 22:06:06 작성 2020-10-11 22:20:57 수정됨
2
707

입력박스 중복코드가 해결됬어요.


https://okky.kr/article/766554

이 두번째 도전이었고,


이번이 3번째 도전이네요.


주제는, 폼 유효성검증을 중복코드없이 해결하는거에요.



이런 네이버 폼이 있다고 했을때,

각각의 입력박스마다..


1. 입력박스에서 입력하는 도중에 

2. 입력박스에서 입력다끝내고 엔터쳤을 때

3. 입력박스에서 포커스가 해제됬을 때 (탭 누르거나 마우스로 다른데 클릭했을 때)


각각의 입력박스마다 3가지씩 고려해줘야하고,

전체적인 Form의 Submit버튼을 눌렀을 때도 고려해야해요.


각각, 잘못됬으면 에러 메시지와 빨간테두리를 보여주고

잘못된 곳이 있다면포커스를 이동시켜서 다시 잘 입력하도록  유도하고,

잘 입력했다면 다음 입력박스로 포커스를 이동시켜주고,


이런것을 모든 입력박스마다 전부 적용시켜줘야하는데,

또 입력박스마다 이메일은 이메일 유효성검증, 비밀번호는 비밀번호 유효성검증을 따로 거치면서,

어우.. 코드가 복잡했었어요.


이걸 해결을 했는데......

보기좋게 정리해서 올려서 공유를 하고싶은데...

일요일이 2시간밖에 안남았네요,


그래도 앞으로 이 중복코드가 해결된만큼 여유시간을 더 확보할 수 있게 될거에요.

이거때문에 개발할 때 시간많이뺐꼈는데...


아무튼.. 다음주 주말에 여유시간을 확보할 수 있을지는 모르겠으나,

이부분은 저도 코드를 공유하고 의견을 구해보고싶네요.

다음주도 홧팅하시죠. ㅜㅜ

0
  • 댓글 2

  • 페코옹
    575
    2020-10-12 09:19:12

    formik이랑 yup 사용하세요

  • Frudy
    5k
    2020-10-12 12:51:40

    고건 첨들어보내요 한번찾아볼게요~

  • 로그인을 하시면 댓글 을 등록할 수 있습니다.