cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Mengapa saya tidak boleh menukar gaya gesaan selepas bentuk asal kehilangan fokus?

Untuk melaksanakan borang, jika tiada input dalam lajur input kata laluan atau kedua-dua input tidak konsisten, gesaan akan dipaparkan, jika tidak, ia akan disembunyikan. Tetapi gesaan tidak pernah keluar Mengapa saya memerlukan bantuan? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="checkload.css" rel="stylesheet" /> 
<script type="text/javascript">
function checkEmpty(obj){
    if(!obj.value)
        obj.nextSibling.style.display="block";
    else 
        obj.nextSibling.style.display="none";    
}
    
function checkPwd(obj){
    var pwd = document.getElementById("pwd").value;
    var pwdAgain = obj.value;
    if(pwd != pwdAgain)
        obj.nextSibling.style.display="block";
    else
        obj.nextSibling.style.display="none";
}
</script>
<title>用户登录验证</title>
</head>

<body>
<form class="bg">
    <ul>
        <li>用户名：</li>
        <li>输入密码：</li>
        <li>确认密码：</li>
    </ul>
    <p class="list">
        <p><input type="text"/></p>
        <p><input type="password" onblur="checkEmpty(this)" id="pwd"/>
        <span style="display:none">密码不能为空！</span></p>
        <p><input type="password" onblur="checkPwd(this)"/>
        <span style="display:none">密码不一致！</span></p>
        <input type="submit" />
    </p>
</form>
</body>
</html>

kod css: 

@charset "utf-8";
/* CSS Document */
body{font-size:14px; font-family:"微软雅黑";}

body,p,ul,li{margin:0; padding:0; list-style:none;}

.bg{
    width:400px;
    height:180px;
    margin:50px;
    border:3px double #ccc;
    padding:40px;
    background:#CCC;
}


ul{float:left;}

li{
    text-align:right;
    height:50px;
}

.list{float:left;}

p{
    width:320px;
    height:50px;    
}

span{
    float:left;
    padding:0 0 0 10px;
    color:red;
}

#pwd{}
曾经蜡笔没有小新曾经蜡笔没有小新2756 hari yang lalu487

membalas semua(1)saya akan balas

  • 仅有的幸福

    仅有的幸福2017-05-16 13:40:30

    Cari perenggan berikut dalam kod anda

            <p><input type="password" onblur="checkEmpty(this)" id="pwd"/>
        <span style="display:none">密码不能为空！</span></p>
        <p><input type="password" onblur="checkPwd(this)"/>
        <span style="display:none">密码不一致！</span></p>

    Sila padamkan pemisah baris antara <input/> dan <span>.

    Reason
    DOMElement.nextSibling sifat mengembalikan elemen DOM adik beradik seterusnya bagi nod atau ruang dikira sebagai nod jenis #teks. Kod anda sebelum ini nextSibling mengembalikan nod teks, dan menetapkan atribut gaya padanya pasti tidak akan memenuhi keperluan anda.

    Jika anda tidak percaya, anda juga boleh mengesahkannya: tanpa menukar kod html anda, gantikan DOMElement.nextSibling dalam skrip dengan DOMElement.nextSibling.nextSibling dan ia akan berfungsi seperti biasa.

    balas
    0
  • Batalbalas