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

사용자 이름 확인을 위해 다음을 살펴보겠습니다

사용자 이름 확인은 비워둘 수 없다고 앞서 말했습니다.

이제 사용자 이름의 길이를 확인하고 길이 값 내에 있으면 길이 값을 지정해 보겠습니다. , 길이를 초과하거나 길이보다 작으면 잘못된 사용자 이름입니다

아래 코드를 작성해 보겠습니다.

// 사용자 이름이 비어 있는지 확인하고 비어 있으면 프롬프트 메시지를 보냅니다
var val = document.getElementById('name' ).VAR REL = DOCUMENT.GELEMENTBYID ('name').Value.Length;
if (value == "") {
document.GetelementByid ("sp"). ;
예 5보다 작거나 같거나 10보다 크면 프롬프트

완전한 코드는 다음과 같습니다:

<!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 = "请输入密码！";
            }
            //验证邮箱是否为空和邮箱的格式是否正确
            var val2 = document.getElementById('email').value;
            if(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(){
                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 = "请输入密码！"; } //验证邮箱是否为空和邮箱的格式是否正确 var val2 = document.getElementById('email').value; if(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(){ document.getElementById('sp3').innerHTML = " "; } </script> </body> </html>

제출하다 코드 재설정

자동운전