Input text 한/영, 숫자 입력 제한, 길이 제한 자바스크립트
글. 수알치 오상문
대화방에 들어갈 때 대화방 제목을 만드는 부분인데,
특수문자나 한글을 사용하면 안되기에 영문과 숫자로 제한하고 길이는 10~20글자로 제한한 예입니다.
HTML 코드 중에서 대화방 입력 부분입니다.
<input id="room-name-input" type="text"
style="..." size="60"/><br/>
<input id="room-name-submit" class="btn btn-primary btn-sm"
style="..." type="button" value="입장"/>
아래는 입력된 문자열을 검사하고 정상이면 다른 페이지로 이동하는 스크립트입니다.
document.querySelector('#room-name-submit').onclick = function(e) {
const regExp = /[a-zA-Z0-9]/g; // 영문&숫자 검사 정규식
var roomName = document.querySelector('#room-name-input').value;
if(regExp.test(roomName) && (roomName.length >= 10 && roomName.length <= 20)){
window.location.pathname = '/chat/' + roomName + '/';
}else{
return false;
}
};
정규식 문자열을 만들고 기본 지원되는 test 함수를 이용하여 문자열이 일치하는지 검사합니다.
문자열 길이는 .length를 이용하여 얻을 수 있습니다.
아래는 실제로 적용된 예제 페이지입니다.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<title>대기실</title>
</head>
<body>
<div style="margin:1rem 0 0.5rem 0;">
대화방 이름(알파벳/숫자 10~20자)<br/>
</div>
<input id="room-name-input" type="text"
style="ime-mode:disabled; margin: 0 0 0.5rem 0; width: 200px; height: 2rem; border:solid 1px black;"
size="60"/><br/>
<input id="room-name-submit" class="btn btn-primary btn-sm"
style="width:100px;" type="button" value="입장"/>
<script>
document.querySelector('#room-name-input').focus();
document.querySelector('#room-name-input').onkeyup = function(e) {
if (e.keyCode === 13) { // enter, return
document.querySelector('#room-name-submit').click();
}
};
document.querySelector('#room-name-submit').onclick = function(e) {
const regExp = /[a-zA-Z0-9]/g; // 영문&숫자 검사 정규식
var roomName = document.querySelector('#room-name-input').value;
if(regExp.test(roomName) && (roomName.length >= 10 && roomName.length <= 20)){
window.location.pathname = '/chat/' + roomName + '/';
}else{
return false;
}
};
</script>
</body>
</html>'JavaScript, jQuery' 카테고리의 다른 글
| 자바스크립트 중급 강좌 : 140분 완성 (0) | 2022.05.14 |
|---|---|
| 자바스크립트 기초 강좌 : 100분 완성 (0) | 2022.05.14 |
| Textarea 내용 추가 시 아래로 자동 스크롤 (0) | 2021.11.15 |
| 자바스크립트 프로처럼 쓰는 팁 (0) | 2021.08.25 |
| 자바스크립트 기초, 엘리님 동영상 강의 (프론트엔드 개발자 입문)(JavaScript ES5+) (0) | 2021.08.23 |