Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

JS开发验证表单教程之验证表单（五）

之前我们也讲到了文本域的验证

上节我们讲用户名密码和邮箱的验证都是通过点击注册按钮触发的

下面我使用不同的方式来验证文本域

当我们在文本域中输入文字，当输入的字符过多，我们就给出提示信息，不需要点击注册按钮来进行提示

这样我们验证文本域的就要在键盘事件中写了，代码如下：

document.getElementById('txt').onkeyup=function(){
                var leng = document.getElementById('txt').value.length;
                if(leng>20){
                    document.getElementById("sp3").innerHTML = "已超过最大内容！";
                }else{
                    document.getElementById('sp3').innerHTML = " ";
                }
            }

我们先获取文本域的value值的长度，然后对长度进行判断，当大于20个时，提示超过最大内容

在20个以内，是没有提示信息的

完整代码如下：

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


Weiter lernen
||
<!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>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492837 spielt ab