masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Tutorial log masuk pembangunan jQuery pengesahan jquery

Di bahagian pertama, kami bercakap tentang langkah-langkah menggunakan jquery untuk membangunkan pengesahan borang, iaitu carta alir Kami telah melengkapkan reka letak halaman dan css

Langkah seterusnya ialah memperkenalkan fail jquery dan tulis jquery Kodnya ialah

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

Nota: Jika fail jquery.js anda tidak berada dalam direktori yang sama dengan fail form.html, anda perlu memberi perhatian untuk menulis laluan yang betul

Mari kita lihat di bawah sahkan nama pengguna dan kata laluan borang

Jika ia tidak diisi, maka kami klik untuk log masuk. Ini salah, jadi kami memberi mesej segera

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

Lihat kod di atas , kami mendapat kandungan kotak teks nama pengguna Jika kosong, kami akan menambah teks gesaan pada teg span pertama Jika ia tidak kosong, kandungan span tidak akan mempunyai kandungan

Apabila kami klik butang untuk log masuk tanpa memasukkan kandungan, maka tag span juga akan mempunyai maklumat Prompt, apabila saya memasukkan kandungan dalam kotak teks, selepas input selesai, klik di tempat lain pada halaman, teks gesaan tag span tidak akan menjadi

Pada masa ini, kami mencetuskan peristiwa perubahan, kodnya adalah seperti berikut: 

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

Pada ketika ini, kami telah melengkapkan pengesahan mudah halaman log masuk

Saya akan siarkan kod lengkap di bawah

<!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>


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya tiada
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492414 permainan