JS 개발 확인 양식 튜토리얼 - 확인 양식(5)

이전 섹션에서 텍스트 필드 확인에 대해서도 이야기했습니다.

이전 섹션에서는 등록 버튼을 클릭하여 실행되는 사용자 이름, 비밀번호 및 이메일 주소 확인에 대해 이야기했습니다.

이제 다른 방법을 사용하여 텍스트 필드를 확인합니다.

텍스트 입력란에 텍스트를 입력하세요. 문자를 너무 많이 입력하면 프롬프트 메시지가 표시됩니다. 프롬프트를 표시하기 위해 등록 버튼을 클릭할 필요가 없습니다.

이런 식으로 인증을 작성해야 합니다. 코드는 다음과 같습니다:

document.getElementById('txt').onkeyup=function(){

cument.getElementById("sp3").innerHTML = "최대 콘텐츠를 초과했습니다!" ;
>
완전한 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
            padding-top:20px;}
        input{
            outline:none;
            box-sizing:border-box;padding-left:15px;}
        textarea{
            outline:none;resize : none;
            box-sizing:border-box;padding-left:15px;padding-top:5px;}
        .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .pwd{width:200px;height:30px;
            margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .txt{
            width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .sub{width:100px;height:30px;padding-left:0px;
            border:none;
            border-radius:5px;background:#ffd0ff;}
        .sub:hover{background:#ffaad5;}
        .div{
            width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;}

    </style>
</head>
<body>
    <div id="div">
        <form>
            <label>用户名:</label>
            <input type="text" class="name" id="name">
            <div id="sp" class="div"></div>                
            <label>密&nbsp;码:</label>
            <input type="password" class="pwd" id="pwd">
            <div id="sp1" class="div"></div>
            <label>邮&nbsp;箱:</label>
            <input type="text" class="email" id="email">
            <div id="sp2" class="div"></div>
            <label>爱&nbsp;好:</label>
            <textarea rows="5" cols="40" class="txt" id="txt"></textarea>
            <div id="sp3" class="div"></div>
            <input type="button" class="sub" value="注册" id="sub">
        </form>
    </div>

    <script type="text/javascript">
        var sub = document.getElementById('sub');
        sub.onclick=function(){
            //验证用户名是否为空,如果为空，给出提示信息
            var val = document.getElementById('name').value;
            var rel = document.getElementById('name').value.length;
            //console.log(val.length);
            if(val == ""){
                document.getElementById("sp").innerHTML = "用户名不能为空！";
            }else if( rel <= 5 || rel > 10){
                document.getElementById("sp").innerHTML = "格式不正确！";
            }
            //验证密码是否为空，为空则给出提示信息
            var rel = /^[A-Za-z0-9]{6,10}$/;
            var val1 = document.getElementById('pwd').value;
            if(val1 == ""){
                document.getElementById("sp1").innerHTML = "请输入密码！";
            }else if(!rel.test(val1)){
                document.getElementById("sp1").innerHTML = "密码不符合规范！";
            }
            //验证邮箱是否为空和邮箱的格式是否正确
            var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
            var val2 = document.getElementById('email').value;
            if(val2 == ""){
                document.getElementById("sp2").innerHTML = "请输入邮箱！";
            }else if(!reg.test(val2)){
                document.getElementById("sp2").innerHTML = "邮箱格式不正确！";
            }
            //验证内容是否为空
            var val3 = document.getElementById('txt').value;
            if(val3 == ""){
                document.getElementById("sp3").innerHTML = "请输入内容！";
            }
        }

            //当用户名的文本框触发键盘事件，提示信息去除
            document.getElementById('name').onkeyup=function(){
                document.getElementById('sp').innerHTML = " ";
            }
            // //当密码框触发键盘事件，提示信息去除
            document.getElementById('pwd').onkeyup=function(){
                document.getElementById('sp1').innerHTML = " ";
            }
            // //当邮箱文本框触发键盘事件，提示信息去除
            document.getElementById('email').onkeyup=function(){
                document.getElementById('sp2').innerHTML = " ";
            }
            // //当文本域触发键盘事件，提示信息去除
            document.getElementById('txt').onkeyup=function(){
                var leng = document.getElementById('txt').value.length;
                if(leng>20){
                    document.getElementById("sp3").innerHTML = "已超过最大内容！";
                }else{
                    document.getElementById('sp3').innerHTML = " ";
                }
            }            

    </script>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding:0;} #div{width:410px;height:400px;background:#46a3ff;padding-left:16px; padding-top:20px;} input{ outline:none; box-sizing:border-box;padding-left:15px;} textarea{ outline:none;resize : none; box-sizing:border-box;padding-left:15px;padding-top:5px;} .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .pwd{width:200px;height:30px; margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .txt{ width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .sub{width:100px;height:30px;padding-left:0px; border:none; border-radius:5px;background:#ffd0ff;} .sub:hover{background:#ffaad5;} .div{ width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;} </style> </head> <body> <div id="div"> <form> <label>用户名:</label> <input type="text" class="name" id="name"> <div id="sp" class="div"></div> <label>密码:</label> <input type="password" class="pwd" id="pwd"> <div id="sp1" class="div"></div> <label>邮箱:</label> <input type="text" class="email" id="email"> <div id="sp2" class="div"></div> <label>爱好:</label> <textarea rows="5" cols="40" class="txt" id="txt"></textarea> <div id="sp3" class="div"></div> <input type="button" class="sub" value="注册" id="sub"> </form> </div> <script type="text/javascript"> var sub = document.getElementById('sub'); sub.onclick=function(){ //验证用户名是否为空,如果为空，给出提示信息 var val = document.getElementById('name').value; var rel = document.getElementById('name').value.length; //console.log(val.length); if(val == ""){ document.getElementById("sp").innerHTML = "用户名不能为空！"; }else if( rel <= 5 || rel > 10){ document.getElementById("sp").innerHTML = "格式不正确！"; } //验证密码是否为空，为空则给出提示信息 var rel = /^[A-Za-z0-9]{6,10}$/; var val1 = document.getElementById('pwd').value; if(val1 == ""){ document.getElementById("sp1").innerHTML = "请输入密码！"; }else if(!rel.test(val1)){ document.getElementById("sp1").innerHTML = "密码不符合规范！"; } //验证邮箱是否为空和邮箱的格式是否正确 var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; var val2 = document.getElementById('email').value; if(val2 == ""){ document.getElementById("sp2").innerHTML = "请输入邮箱！"; }else if(!reg.test(val2)){ document.getElementById("sp2").innerHTML = "邮箱格式不正确！"; } //验证内容是否为空 var val3 = document.getElementById('txt').value; if(val3 == ""){ document.getElementById("sp3").innerHTML = "请输入内容！"; } } //当用户名的文本框触发键盘事件，提示信息去除 document.getElementById('name').onkeyup=function(){ document.getElementById('sp').innerHTML = " "; } // //当密码框触发键盘事件，提示信息去除 document.getElementById('pwd').onkeyup=function(){ document.getElementById('sp1').innerHTML = " "; } // //当邮箱文本框触发键盘事件，提示信息去除 document.getElementById('email').onkeyup=function(){ document.getElementById('sp2').innerHTML = " "; } // //当文本域触发键盘事件，提示信息去除 document.getElementById('txt').onkeyup=function(){ var leng = document.getElementById('txt').value.length; if(leng>20){ document.getElementById("sp3").innerHTML = "已超过最大内容！"; }else{ document.getElementById('sp3').innerHTML = " "; } } </script> </body> </html>

제출하다 코드 재설정

자동운전