communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Tutoriel de connexion au développement jQuery, vérification jquery

Dans la première section, nous avons parlé des étapes d'utilisation de jquery pour développer la vérification de formulaire, qui est l'organigramme. Nous avons terminé la mise en page et le CSS

L'étape suivante consiste à introduire les fichiers jquery. et écrivez jquery Le code est

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

Remarque : si votre fichier jquery.js ne se trouve pas dans le même répertoire que le fichier form.html, vous devez faire attention à écrire le chemin correct

Jetons un coup d'œil ci-dessous. vérifiez le nom d'utilisateur et le mot de passe du formulaire

S'il n'est pas rempli, alors nous cliquons pour nous connecter. C'est faux, nous donnons donc un message rapide

<script>
        $("#but").click(function(){
             if($("#name").val()==""){
                 $("#sp1").html("请输入用户名");
             }else{
                 $("#sp1").html("");
             }
             if($("#pwd").val()==""){
                 $("#sp2").html("请输入密码");
             }else{
                 $("#sp2").html("");
             }
        })
</script>

Regardez le code ci-dessus , nous obtenons le contenu de la zone de texte du nom d'utilisateur. Si elle est vide, nous ajouterons un texte d'invite à la première balise span. Si elle n'est pas vide, le contenu span n'aura aucun contenu

Lorsque nous le ferons. cliquez sur le bouton pour vous connecter sans saisir de contenu, la balise span aura également des informations d'invite, lorsque j'entre du contenu dans la zone de texte, une fois la saisie terminée, cliquez ailleurs sur la page, le texte d'invite de la balise span ne le sera pas be

A ce moment, nous déclenchons un événement de changement, le code est le suivant : 

  <script>
    $("input").change(function(){
            if($("#name").val()==""){
                 $("#sp1").html("请输入用户名");
             }else{
                 $("#sp1").html("");
             }
              if($("#pwd").val()==""){
                 $("#sp2").html("请输入密码");
             }else{
                 $("#sp2").html("");
             }
        })
    </script>

A ce stade, nous avons terminé la simple vérification d'une page de connexion

Je publierai le code complet ci-dessous

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录页面的验证</title>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        #bdy{width:100%;height:950px;background:#999;}
        #dv{position:absolute; top:40px;left:20px;width:300px;height:250px;background:#f44;}
        #con{width:300px;height:200px;margin-left:35px;margin-top:35px;font-family:"隶书";font-size:18px;}
        #but{width:230px;height:30px;margin-top:15px;border:1px solid #ccc;background:#f60;font-family:"隶书";
            font-size:18px;}
        #but:hover{background:#f66;}
        span{margin-left:80px;}
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div id="bdy">
        <div id="dv">
            <div id="con">
                <form method="post" action="#">
                    用户名：<input type="text" placeholder="请输入用户名" id="name"></br>
                    <span id="sp1"></span></br></br>
                    密  码：<input type="password" placeholder="请输入密码" id="pwd"></br>
                    <span id="sp2"></span></br></br>
                    <input type="button" value="登 录" id="but">
                </form>
            </div>
        </div>
    </div>
     <script>
        $("#but").click(function(){
             if($("#name").val()==""){
                 $("#sp1").html("请输入用户名");
             }else{
                 $("#sp1").html("");
             }
             if($("#pwd").val()==""){
                 $("#sp2").html("请输入密码");
             }else{
                 $("#sp2").html("");
             }
        })
        $("input").change(function(){
            if($("#name").val()==""){
                 $("#sp1").html("请输入用户名");
             }else{
                 $("#sp1").html("");
             }
              if($("#pwd").val()==""){
                 $("#sp2").html("请输入密码");
             }else{
                 $("#sp2").html("");
             }
        })
    </script>
</body>
</html>


Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录页面的验证</title> <style type="text/css"> *{margin:0px;padding:0px;} #bdy{width:100%;height:950px;background:#999;} #dv{position:absolute; top:40px;left:20px;width:300px;height:250px;background:#f44;} #con{width:300px;height:200px;margin-left:35px;margin-top:35px;font-family:"隶书";font-size:18px;} #but{width:230px;height:30px;margin-top:15px;border:1px solid #ccc;background:#f60;font-family:"隶书"; font-size:18px;} #but:hover{background:#f66;} span{margin-left:80px;} </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div id="bdy"> <div id="dv"> <div id="con"> <form method="post" action="#"> 用户名：<input type="text" placeholder="请输入用户名" id="name"></br> <span id="sp1"></span></br></br> 密 码：<input type="password" placeholder="请输入密码" id="pwd"></br> <span id="sp2"></span></br></br> <input type="button" value="登 录" id="but"> </form> </div> </div> </div> <script> $("#but").click(function(){ if($("#name").val()==""){ $("#sp1").html("请输入用户名"); }else{ $("#sp1").html(""); } if($("#pwd").val()==""){ $("#sp2").html("请输入密码"); }else{ $("#sp2").html(""); } }) $("input").change(function(){ if($("#name").val()==""){ $("#sp1").html("请输入用户名"); }else{ $("#sp1").html(""); } if($("#pwd").val()==""){ $("#sp2").html("请输入密码"); }else{ $("#sp2").html(""); } }) </script> </body> </html>
soumettreRéinitialiser le code
Section précédente Aucun
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)  492854 joue