"이름을 입력하세요"
[ ] [확인]
입력을하고 확인버튼을 누르면 다음 창에
"이름님 환영합니다."
이런 메세지가 뜨게 할 수 있나요?
그리고 혹시 가능하다면 숫자나 특수문자 같이 보통 이름에 못 쓰는 글자는 불가능하게도 할 수 있나요?
"이름을 입력하세요"
[ ] [확인]
입력을하고 확인버튼을 누르면 다음 창에
"이름님 환영합니다."
이런 메세지가 뜨게 할 수 있나요?
그리고 혹시 가능하다면 숫자나 특수문자 같이 보통 이름에 못 쓰는 글자는 불가능하게도 할 수 있나요?
댓글 9
네, 둘 다 가능합니다.
메시지 뜨게 하는 건 알림창으로도 가능하고, 현재 페이지에도 가능하며, 새로운 페이지에도 가능합니다.
입력되는 이름 역시 유효성 검사를 통해 에러 메시지를 출력할 수도 있고, 문자만 선별적으로 입력 받을 수도 있으며, 아예 입력 단계에서 키 자체를 무효화할 수도 있습니다.
구글링을 해보시면 소스가 굉장히 많이 나올 거예요.
그리고 보통 검색하면 팝업창?처럼 뜨는 스크립트가 많은데요, 일반 텍스트 창으로 구성하려면 어떻게 해야 할까요?
원하시는 바를 좀 더 구체적으로 설명해주셔야 할 것 같아요.
"일반 텍스트 창"이라면 현재 페이지에 메시지가 출력되는 걸 원하시는 건가요?
input의 value 값을 받아서
자바스크립트에서는 document.write(), 제이쿼리에서는 text() 등으로 출력하시면 됩니다.
'유효성 검사'는 보통 '정규표현식'으로 하는데, validation과 regular expression test 등으로 검색해보시면 한글로 검색하는 것보다 훨씬 더 많이 나올 겁니다.
참고해보셔요.
<script>
function welcome() {
var user = document.getElementsByClassName('welcome')[0].value;
event.preventDefault();
if(user.length<3) {
alert('2자리 이상을 입력해주세요.');
} else if(user.match(/^[\uAC00-\uD7A3]*$/)) {
callback(user);
} else if(user.match(/([^가-힣\x20])/i)) {
alert('특문이나 숫자, 자모 또는 영문은 입력할 수 없습니다.');
}
}
function callback(user) {
alert(user + '님 환영합니다.');
}
</script>
<form onsubmit="welcome()">
<input type="text" class="welcome" value="" required/>
<button type="submit">확인</button>
</form>