로그인 ID값 MAX 되면 로그인 안되도록!

 

input 입력 글자 수 제한하기

 

 

<input type='text' maxlength='5' />

maxlength 속성을 지정하여 최대 입력 글자수를 제한할 수 있습니다.

위 예제는 최대 5글자까지만 입력이 가능합니다.

 

그러나, 이 방법은

input의 type이 'text, search, url, tel, email, password' 일 경우에만 유효합니다.

type이 'number'일 경우에는 유효하지 않습니다.

따라서, type이 'number'인 경우에는 다음의 방법을 사용해야 합니다.

 

ex)

input type이 text일때는 maxlength의 값만 설정해주면 된다.

예시로. ID의 입력 값을 10으로 제한을 주고 싶을 때는 이렇게 해주면 된다. 

<tr>
	<th>USER ID</th>
	<td><input type="text" maxlength="10" id="testId"></td>
</tr>

하지만 여기서 추가로 주의해야 할 점은 input type이 number일 때는 maxlength가 정상 작동하지 않는다. ㅠㅠ

 

 

input type이 number일 때는 따로 함수를 생성해서 추가해줘야된다.

생성해준 함수를 number type인 input에 oninput으로 호출해주면 설정 완료 -!!

 

<input type="number" maxlength="10" oninput="numberMaxLength(this);"/>
<script>
    function numberMaxLength(e){
        if(e.value.length > e.maxLength){
            e.value = e.value.slice(0, e.maxLength);
        }
    }
</script>

 

 

 

---

사용자로하여금 비밀번호를 최소 6자, 최대 12자까지만 입력하게 하려면 input 태그 minlength 속성의 값에는 6을, maxlength 속성의 값에는 12를 주면 됩니다.

 

 

1	비밀번호: <input type="password" minlength="6" maxlength="12">

이렇게 하면 최대 12자까지만 입력이 가능해집니다. 

 

만약 사용자가 비밀번호를 6자 미만으로 입력하고 제출 버튼을 눌렀을 경우에는 다음과 같은 경고창이 뜨면서, 제출이 되지 않습니다.

 

 

---

그외 Validation 관련 속성들!!!

 

1. novalidate 속성

 

<input type="email" name="user-email" id="useremail" />

이러한 email type의 input요소는 잘못된 양식의 이메일이 들어왔을 경우 박스 자체적으로 검증과정을 거쳐 경고 메시지를 보낸다. 이 검증을 없애고 싶다면 form 요소에 novalidate 속성을 추가하면 된다.

<form action="/" method="GET" novalidate>

이 속성은 불리언 속성(파이썬의 bool값으로 생각하면 될 듯)이기 때문에 속성값을 지정해줄 필요가 없다고 한다. 이렇게 설정하면 기본 검증과정을 진행하지 않는다.

2. required 속성

이 속성은 모든 input요소에 적용 가능한 속성이다. 불리언 속성이기 때문에 속성값이 없다.

required속성이 추가되면 해당 input은 공란이 되어선 안되고 반드시 문자가 들어가야 한다.

<input type="password" name="user-password" id="userpassword" required>

 

3. minlength/maxlength 속성

이름에서 볼 수 있듯이 입력값의 최소/최대 길이를 설정한다.

<input type="password" name="user-password" id="userpassword" required minlength="7" />

최소 7자 이상으로 설정하면

 

4. min/max 속성

minlength/maxlength는 문자열의 길이를 정했다면 이 속성은 값의 최대/최솟값을 정하는 속성이다.

<input type="number" name="user-age" id="number" required max="100" min="1"/>

만약 날짜에서 최소 최댓값을 지정하려고 한다면

min=”1953-02-02” 

식으로 지정해야 한다.

 

==그 외==

5. placeholder 속성

흔히 볼 수 있는 밝은 회색 텍스트의 입력 예시를 설정하는 속성이다.

<input type="text" name="user-data" id="username" required placeholder="Super Son"/>

 

6. textarea의 크기조절 없애기

textarea요소를 사용하면 오른쪽 아래에 크기조절 할 수 있는 아이콘이 추가되는데, 이를 없애기 위해서는 textarea의 CSS에서 resize속성을 사용한다.

textarea{
    resize: none;
}