"이름을 입력하세요"
[                  ] [확인]

 

입력을하고 확인버튼을 누르면 다음 창에

 

"이름님 환영합니다."

 

이런 메세지가 뜨게 할 수 있나요?


그리고 혹시 가능하다면 숫자나 특수문자 같이 보통 이름에 못 쓰는 글자는 불가능하게도 할 수 있나요?

  • profile

    네, 둘 다 가능합니다.

    메시지 뜨게 하는 건 알림창으로도 가능하고, 현재 페이지에도 가능하며, 새로운 페이지에도 가능합니다.

    입력되는 이름 역시 유효성 검사를 통해 에러 메시지를 출력할 수도 있고, 문자만 선별적으로 입력 받을 수도 있으며, 아예 입력 단계에서 키 자체를 무효화할 수도 있습니다.

     

    구글링을 해보시면 소스가 굉장히 많이 나올 거예요.

  • profile ?
    영어론 저런 걸 뭐라고 하나요?
    그리고 보통 검색하면 팝업창?처럼 뜨는 스크립트가 많은데요, 일반 텍스트 창으로 구성하려면 어떻게 해야 할까요?
  • ? profile
    제가 드렸던 답변처럼 경우의 수가 많아요.
    원하시는 바를 좀 더 구체적으로 설명해주셔야 할 것 같아요.

    "일반 텍스트 창"이라면 현재 페이지에 메시지가 출력되는 걸 원하시는 건가요?
    input의 value 값을 받아서
    자바스크립트에서는 document.write(), 제이쿼리에서는 text() 등으로 출력하시면 됩니다.

    '유효성 검사'는 보통 '정규표현식'으로 하는데, validation과 regular expression test 등으로 검색해보시면 한글로 검색하는 것보다 훨씬 더 많이 나올 겁니다.
  • profile ?
    한 번 해보겠습니다. 감사해요
  • profile
    https://www.w3schools.com/php/php_forms.asp
    참고해보셔요.
  • profile ?
    감사합니다. 도움이 많이 되었어요!
  • ?

    <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>

  • ? ?
    코딩까지 해주셔서 감사합니다. 도움 많이 되었어요
  • ?
    서버에 데이터로 입력한다면 서버사이드(Xpressengine 또는 PHP)단에서 검증이 필수적입니다.