简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Tutoriel sur le formulaire de vérification du développement JS - formulaire de vérification (2)

Comme nous l'avons mentionné dans la section précédente, vérifiez si le contenu du formulaire est vide. S'il est vide, nous donnerons un message d'invite

Voyons maintenant comment supprimer le message d'invite lors de la saisie. contenu dans la zone de texte du formulaire ou le champ de texte.

Tout d'abord, pensons au contenu saisi dans la zone de texte.

Le code est le suivant :

//Lorsque la zone de texte du nom d'utilisateur déclenche l'événement clavier, invitez la suppression des informations
document.getElementById('name').onkeyup=function(){
document.getElementById('sp' ).innerHTML = " ";
}

//Lorsque la zone de mot de passe déclenche un événement clavier et que les informations d'invite sont supprimées
document.getElementById('pwd').onkeyup=function(. ){
document.getElementById('sp1').innerHTML = " "; > // Lorsque la zone de texte de la boîte aux lettres déclenche l'événement clavier, les informations d'invite suppriment

Document.GetelementByid ("Email") . Onkeyup = Function () {

Document.GetelementByid ('SP2'). Ml = " « ; sp3').innerHTML = " ";

}

Le code complet est le suivant : 

<!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;
            if(val == ""){
                document.getElementById("sp").innerHTML = "请输入用户名！";
            }
            //验证密码是否为空，为空则给出提示信息
            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>


Formation continue
||
<!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; if(val == ""){ document.getElementById("sp").innerHTML = "请输入用户名！"; } //验证密码是否为空，为空则给出提示信息 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>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  491977 joue
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！