Heim > Artikel > Web-Frontend > Studiennotizen zur JavaScript-Formularvalidierung

Studiennotizen zur JavaScript-Formularvalidierung

PHPzOriginal: 2017-04-04 14:11:391243Durchsuche

JavaScript-Formularvalidierung

JavaScript kann verwendet werden, um die Eingabedaten im HTML-Formular zu validieren, bevor die Daten an den Server gesendet werden.
Formulardaten erfordern häufig JavaScript, um ihre Richtigkeit zu überprüfen:

Überprüfen Sie, ob die Formulardaten leer sind?

Überprüfen Sie, ob die Eingabe eine korrekte email Adresse ist?

Überprüfen Sie, ob das Datum korrekt eingegeben wurde?

Überprüfen Sie, ob der Inhalt der Formulareingabe numerisch ist?

Erforderliche (oder erforderliche) Elemente
Mit der folgenden Funktion wird überprüft, ob der Benutzer die erforderlichen (oder erforderlichen) Elemente im Formular ausgefüllt hat. Wenn erforderlich oder das erforderliche Feld leer ist, wird ein Warnfeld angezeigt und der Rückgabewert der Funktion ist false, andernfalls ist der Rückgabewert der Funktion true (was bedeutet, dass kein Problem mit den Daten vorliegt):

    function validateForm(){ 
    var x=document.forms["myForm"]["fname"].value; 
    if (x==null || x=="")
    { alert("姓必须填写"); 
    return false;
    }}

E-Mail-Validierung
Die folgende Funktion prüft, ob die eingegebenen Daten der grundlegenden Syntax einer E-Mail-Adresse entsprechen.
Das bedeutet, dass die eingegebenen Daten das @-Symbol und den Punkt (.) enthalten müssen. Gleichzeitig darf @ nicht das erste Zeichen der E-Mail-Adresse sein und es muss mindestens ein Punkt nach @ stehen:

        function validateForm(){
            var x=document.forms["myForm"]["email"].value;
            var atpos=x.indexOf("@");
            var dotpos=x.lastIndexOf(".");
            if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
                alert("不是一个有效的 e-mail 地址");
                return false;
            }
        }

Die heutige Übung war nicht gut geschrieben und ich hatte keine Zeit dafür Verfeinern Sie es, also habe ich gerade den Code

        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8">
                <title>登录页面</title>
            <link rel="stylesheet" href="C:\Users\Administrator\Desktop\bootstrap-3.3.5-dist\css\bootstrap.min.css" />
            <script type="text/javascript" src="dse.js" ></script>
        <!--      <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> -->
        <!--    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> -->
            </head>
        <body>
            <p class="p1">
            <p class="p0">
        <form class="form-horizontal" role="form">
            <table >a
            <tr>
                <td align=&#39;right&#39;><label>用户名：    </label></td>
                <td ><input type="text" class="form-control" id=&#39;user&#39; " /></td>
                <td align=&#39;right&#39; id="worr1" width="150px"></td>
            </tr>
            <tr>
                <td align=&#39;right&#39;><label> 昵称：    </label></td>
                <td ><input type="text" class="form-control" id="name"/></td>
                <td align=&#39;right&#39; id="worr2" ></td>
            </tr>
            <tr>
                <td align=&#39;right&#39;><label>密码：    </label></td>
                <td ><input type="password" class="form-control" id="pwd1" /></td>
                <td align=&#39;right&#39; id="worr3"></td>
            </tr>        
            <tr>
                <td align=&#39;right&#39;><label>确认密码：    </label></td>
                <td><input type="password" class="form-control" id="pwd2" /></td>
                <td align=&#39;right&#39; id="worr"></td>
            </tr>
            <tr>
                <td align=&#39;right&#39;><label>邮箱：    </label></td>
                <td > <input type="text" class="form-control" id="email" /></td>
                <td align=&#39;right&#39; id="worr4" ></td>
            </tr>
            <tr>
                <td align=&#39;right&#39;><label>手机号：    </label></td>
                <td ><input type="text" class="form-control" id="phone" /></td>
                <td align=&#39;right&#39; id="worr5" ></td>
            </tr>
            <tr>
                <td  colspan="3"><a href="#" id="a1">用户手册</a></td>
            </tr>
            <tr>
                <td  colspan="3"><button onclick ="but1()" class="btn btn-default"><label >提交</label></button></td>
                <td align=&#39;right&#39; id="worr6" ></td>
            </tr>
            </table>

        </form>

        </p>
            </body>
        </html>

    function but1() {
        but2();
        but3();
        but4();
        but5();
        but6();
    }
    function but2() {
        var pwd1=document.getElementById('pwd1').value;
        var pwd2=document.getElementById('pwd2').value;

            if (pwd1=="") {
            document.getElementById('worr3').innerHTML="密码不能为空";
            }
            if (pwd2=="") {
            document.getElementById('worr').innerHTML="密码不能为空";
            }
            try{
                if (pwd1===pwd2) {

                }else{
                        throw '密码不一致';            
                }
            }catch(err){
                document.getElementById('worr').innerHTML=" "+ err +" ";
                // document.getElementById('worr').style.color='red';

            }

    }
    function but3() {
        var user=document.getElementById('user').value;
        if (user=="") {
            document.getElementById('worr1').innerHTML="用户名不能为空";
            }
        var name=document.getElementById('name').value;
        if (name=="") {
            document.getElementById('worr2').innerHTML="昵称不能为空";
            }
    }
    function but4() {
        var email=document.getElementById('email').value;
        if (email=="") {
        document.getElementById('worr4').innerHTML="邮箱不能为空";
        }else{
        var atpos=email.indexOf("@");
        var dotpos=email.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){
            document.getElementById('worr4').innerHTML="不是一个有效的 e-mail 地址";
        }

        }
    }
    function but5() {

        var phone=document.getElementById('phone').value;
        if (phone=="") {
        document.getElementById('worr5').innerHTML="手机号不能为空";
        }else{
     var reg = /^0?1[3|4|5|8][0-9]\d{8}$/;
     if (reg.test(phone)) {
          alert("号码正确~");
     }else{
              document.getElementById('worr5').innerHTML="号码有误~";
     };

        }
    }
    function but6() {
            var user=document.getElementById('user').value;
            var name=document.getElementById('name').value;
            var pwd2=document.getElementById('pwd2').value;
            var email=document.getElementById('email').value;
            var phone=document.getElementById('phone').value;
              document.getElementById('worr6').innerHTML=" "+user+"  "+name+"  "+pwd2+"  "+email+"  "+phone;
    }

gepostet

Das obige ist der detaillierte Inhalt vonStudiennotizen zur JavaScript-Formularvalidierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Teilen Sie die einfache JavaScript-Fehlerzusammenfassung beim Debuggen von FehlernNächster Artikel：Teilen Sie die einfache JavaScript-Fehlerzusammenfassung beim Debuggen von Fehlern

In Verbindung stehende Artikel

Mehr sehen