Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

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

上一节我们讲到了控制用户名的长度

下面我们来看一下通过js的正则表达式来控制密码的格式与邮箱

即使你不会写正则表达式也没有关系，现在在网上能找到很多现成写好的邮箱的正则表达式

我们来看下密码，比如我只要个数字和字母组合的密码控制在6到10位

var rel = /^[a-zA-Z0-9]{6,10}$/ ;

我们来看下邮箱的正则表达式

var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

正则我们就已经完成了，那么如何验证我们的表单？

我们要获取文本框的值，然后跟我们的正则表达式进行匹配，如果匹配，则是符合规范的，不匹配，给出提示信息

这里我们将要使用 test() 方法

test() 方法用于检索字符串是否匹配某个模式

我们来验证密码，是数字与字母的组合

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 = "邮箱格式不正确！";
            }

如上代码，我们就完成了验证邮箱的功能

完整代码如下：

<!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(){
                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(){ 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)  492577 spielt ab