亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

jQuery開発ログインチュートリアル jQuery検証

最初のセクションでは、jquery を使用してフォーム検証を開発する手順、つまりフローチャート、ページ レイアウト、CSS について説明しました。両方とも完了しました

次のステップは、jquery ファイルの導(dǎo)入と jquery の記述です。 code

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

注: jquery.js ファイルがform.html ファイルが同じディレクトリにない場合は、正しいパスを記述するように注意する必要があります

フォームのユーザー名とパスワードを確認(rèn)する必要があります

。これは間違っているので、プロンプト メッセージを表示します 

<script>
        $("#but").click(function(){
             if($("#name").val()==""){
                 $("#sp1").html("請輸入用戶名");
             }else{
                 $("#sp1").html("");
             }
             if($("#pwd").val()==""){
                 $("#sp2").html("請輸入密碼");
             }else{
                 $("#sp2").html("");
             }
        })
</script>

上のコードを見て、ユーザー名のテキスト ボックスの內(nèi)容を取得します。それが空の場合は、最初のspanタグにプロンプ??トテキストを入力します?？栅扦胜龊稀panコンテンツにはコンテンツがありません。

コンテンツを入力せずにログインするボタンをクリックすると、spanタグにもプロンプトメッセージが表示されます。テキスト ボックスに入力し、入力が完了した後、ページの他の場所をクリックすると、Span タグのプロンプト テキストは表示されません

変更イベントをトリガーしたときのコードは次のとおりです: 

  <script>
    $("input").change(function(){
            if($("#name").val()==""){
                 $("#sp1").html("請輸入用戶名");
             }else{
                 $("#sp1").html("");
             }
              if($("#pwd").val()==""){
                 $("#sp2").html("請輸入密碼");
             }else{
                 $("#sp2").html("");
             }
        })
    </script>

この時點(diǎn)で、ログインページの簡単な検証が完了しました

以下に完全なコードを投稿します

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登錄頁面的驗(yàn)證</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>


學(xué)び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登錄頁面的驗(yàn)證</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>