So verwenden Sie JavaScript zur Validierung von Formularen-js-Tutorial-php.cn

So verwenden Sie JavaScript zur Validierung von Formularen

PHPz

Freigeben： 2018-10-12 15:13:47

nach vorne

1682 Leute haben es durchsucht

1. Prinzip

Das Formular wird durch Hinzufügen des Onblur-Ereignisses im Eingabefeld überprüft. Die js-Funktion wird aufgerufen, um den Eingabewert zu ermitteln. und ändert den Inhalt hinter dem Eingabefeld über das innerHTML-Attribut. Die Eingabeaufforderung wird angezeigt.

Fügen Sie abschließend das Ereignis onsubmit zum Formular-Tag hinzu und rufen Sie die js-Funktion auf, wenn Sie auf die Registrierungsschaltfläche klicken. Nur wenn die Werte aller Eingabefelder die Anforderungen erfüllen, wird true zurückgegeben Formular wird eingereicht. Andernfalls geben Sie „false“ zurück und das Formular wird nicht gesendet.

2. Bilder

So verwenden Sie JavaScript zur Validierung von Formularen

3. Notizen

Um reguläre Ausdrücke in js zu erstellen, müssen Sie „/^...“ verwenden. $/" , ^ bedeutet Übereinstimmung vom Anfang an, $ bedeutet Übereinstimmung bis zum letzten Zeichen. Zum Beispiel: var reg=/^w [@]w [.comn]{3,4}$/;

regular Ausdruck Das w steht für a-z, A-Z, 0-9 und enthält auch Unterstriche.

Verwenden Sie normalerweise die reguläre Testmethode, um festzustellen, ob die Zeichenfolge mit dem regulären Ausdruck übereinstimmt. Wenn der Rückgabewert „true“ ist, ist die Übereinstimmung erfolgreich. Wenn „false“ zurückgegeben wird, schlägt die Übereinstimmung fehl.

4. Implementierungscode

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用JavaScript完成表单的校验</title>
        <script>
            //校验用户名
            function checkName(){
                var name=document.getElementById("name").value;
                var nameSpan=document.getElementById("nameSpan")
                //正则表达式判断用户名
                var reg=/^\w+$/;
                if(name.length<1){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>用户名不能为空</font>"
                    }else if(name.length<=6){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>用户名要至少六位</font>"
                    }else if(!reg.test(name)){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>只能由字母数字下划线组成</font>"
                    }else{
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                        return true;
                    }
                }
            //校验密码
            function checkCode(){
                var code=document.getElementById("code").value;
                var codeSpan=document.getElementById("codeSpan")
                if(code==&#39;&#39;){
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>密码不能为空</font>"
                }else if(code.length<6){
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>密码至少六位</font>"
                }else{
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                    return true;
                }
            }
            //校验邮箱
            function checkEmail(){
                var email=document.getElementById("email").value;
                var emailSpan=document.getElementById("emailSpan")
                //用正则判断邮箱格式
                var reg=/^\w+[@]\w+[.comn]{3,4}$/;
                if(email==&#39;&#39;){
                        emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>邮箱不能为空</font>"
                }else if(!reg.test(email)){
                    emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>邮箱格式不正确</font>"
                }else{
                    emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                    return true;
                }
            }
            //校验所有信息，决定表单是否提交
            function checkForm(){
                if(checkName()&&checkCode()&&checkEmail()){
                    return true;
                }
                return false;
            }
        </script>
    </head>
    <body>
            <form id="regist" onsubmit="return checkForm()" action="http://www.baidu.com" method="get" style="margin-left: 520px;width: 400px;padding-left: 20px; height: 280px;border: 1px solid darkgray;">
                <h3>注册表单</h3>
                用户名：<input type="text" id="name" name="username" onblur="checkName()"/>
                    <span id="nameSpan" ></span><br/><br />
                 密码：<input type="password" id="code" name="password" onblur="checkCode()"/>
                    <span id="codeSpan"></span><br/><br />
                 邮箱：<input type="text" id="email" name="email" onblur="checkEmail()"/>
                    <span id="emailSpan"></span><br/><br />
                      <input type="submit" value="注册"/>
                 <input type="reset" value="重置"/>
            </form>
    </body>
</html>

Nach dem Login kopieren

Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial