[javascript] 폼 유효성 검사와 함께 사용자에게 입력 팁을 제공하는 방법은?

05 Dec 2023

javascript

폼 유효성 검사는 사용자가 올바른 데이터를 입력하도록 도와주는 중요한 기능입니다. 하지만 때로는 사용자가 어떤 데이터를 입력해야 하는지에 대한 명확한 안내가 필요한 경우도 있습니다. 이를 위해 입력 팁을 제공하는 방법을 알아보겠습니다.

HTML의 Placeholder 속성 사용하기: Placeholder 속성을 사용하면 입력 필드에 예시 데이터나 설명을 표시할 수 있습니다. 사용자가 입력 필드에 포커스를 주게 되면 Placeholder 내용은 사라지게 됩니다.
```
<input type="text" placeholder="이름을 입력하세요">
```
HTML5의 Pattern 속성 사용하기: Pattern 속성을 사용하면 입력 필드에 허용되는 데이터 패턴을 정할 수 있습니다. 입력 패턴을 일치하지 않는 경우, 사용자에게 패턴에 대한 설명을 제공할 수 있습니다.
```
<input type="text" pattern="[A-Za-z]{3}" title="3개의 알파벳을 입력하세요">
```
사용자가 3개의 알파벳을 입력하지 않으면 아래와 같은 오류 메시지가 표시됩니다:

JavaScript를 사용하여 사용자에게 입력 팁 표시하기: JavaScript를 사용하여 사용자가 입력 필드에 포커스를 주면 해당 필드 옆에 팁을 동적으로 표시할 수 있습니다.

<input type="text" id="name">
<div id="nameTip"></div>
   
<script>
  const nameField = document.getElementById('name');
  const nameTip = document.getElementById('nameTip');
     
  nameField.addEventListener('focus', () => {
    nameTip.textContent = '이름은 5개 이상의 글자여야 합니다';
  });
     
  nameField.addEventListener('blur', () => {
    nameTip.textContent = '';
  });
</script>

위의 방법들을 조합하여 사용자에게 입력 팁을 제공할 수 있습니다. 이를 통해 사용자가 올바르게 데이터를 입력할 수 있도록 도와줄 수 있습니다.

참고 자료: