JQuery的輸入動態檢查

我已經做basicly是下一個：一個HTML/PHP形式：JQuery的輸入動態檢查

<html> 
 
    \t <head> 
 
    \t \t <link rel="stylesheet" type="text/css" href="gstyle.css"> 
 
    \t </head> 
 
    \t <body> 
 
    \t <script type="text/javascript" src="resources/jquery-1.11.2.min.js"></script> 
 
    \t <script type="text/javascript" src="resources/jquery-ui/jquery-ui.min.js"></script> 
 
    \t <script type="text/javascript" src="script.js"></script> 
 
    \t \t \t <form method="POST"> 
 
    \t \t \t \t <table border=0> 
 
    \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t <td class="descripcion">Usuario:</td> 
 
    \t \t \t \t \t \t <td><input class="campos" type="text" name="user" placeholder="Nombre de usuario"></td> 
 
    \t \t \t \t \t </tr> 
 
    \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t <td class="descripcion">Contraseña: 
 
    \t \t \t \t \t \t <td><input class="campos" type="password" name="passwd" placeholder="Contraseña"></td> 
 
    \t \t \t \t \t </tr> 
 
    \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t <td class="descripcion">Confirmar contraseña:</td> 
 
    \t \t \t \t \t \t <td><input class="campos" type="password" name="confpasswd" placeholder="Confirmar Contraseña"></td> 
 
    \t \t \t \t \t </tr> 
 
    \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t <td class="descripcion">Correo:</td> 
 
    \t \t \t \t \t \t <td><input class="campos" type="text" name="correo" placeholder="E-Mail"></td> 
 
    \t \t \t \t \t </tr> 
 
    \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t <td class="descripcion">Confirmar correo:</td> 
 
    \t \t \t \t \t \t <td><input class="campos" type="text" name="confcorreo" placeholder="Confirmar E-Mail"></td> 
 
    \t \t \t \t \t </tr> 
 
    \t \t \t \t </table> 
 
    \t \t \t \t <br> 
 
    \t \t \t \t <input class="botones" type="submit" name="send" value="Registrar"> 
 
       </form> 
 
     \t </div> 
 
    \t </body> 
 
    </html>

是一個簡單的regiter處方，用CSS類。然後，我對目前的風格和也是一個正確和不正確的類準備JQuery的一個CSS表：

#form { 
 
    \t font-family: Tahoma; 
 
    \t font-size: 20px; 
 
    \t margin-top: 200px; 
 
    \t margin-left: auto; 
 
    \t margin-right: auto; 
 
    \t padding: 20px 10px 20px 50px; 
 
    \t width: 700px; 
 
    \t text-align: center; 
 
    \t border-radius: 5px; 
 
    \t background: url("imagenes/div_fondo.jpg"); 
 
    \t background-size: cover; 
 
    \t background-position: center center; 
 
    \t background-repeat: no-repeat; 
 
    \t background-attachment:fixed; 
 
    \t -webkit-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t -moz-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    } 
 

 
    #head { 
 
    \t color: white; 
 
    \t font-family: Tahoma; 
 
    \t font-size: 20px; 
 
    \t margin-top: 20px; 
 
    \t margin-left: auto; 
 
    \t margin-right: auto; 
 
    \t padding: 10px 0px 10px 0px; 
 
    \t width: 1500px; 
 
    \t text-align: center; 
 
    \t border-radius: 5px; 
 
    \t background: url("imagenes/div_fondo.jpg"); 
 
    \t background-size: cover; 
 
    \t background-position: center center; 
 
    \t background-repeat: no-repeat; 
 
    \t background-attachment:fixed; 
 
    \t text-shadow: 0px 0px 15px #2222FF; 
 
    \t -webkit-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t -moz-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    } 
 

 
    td { 
 
    \t padding-top: 15px; 
 
    } 
 

 
    #titulo{ 
 
    \t text-shadow: 0px 0px 8px #2222FF; 
 
    \t line-height: 5px; 
 
    \t color: white; 
 
    } 
 

 
    .descripcion{ 
 
    \t text-shadow: 0px 0px 8px #2222FF; 
 
    \t color: white; 
 
    \t text-align:right; 
 
    \t font-size: 20px; 
 
    } 
 

 
    .campos{ 
 
    \t -webkit-box-shadow: inset 3px 3px 3px 0px rgba(0,0,0,0.78); 
 
    \t -moz-box-shadow: inset 3px 3px 3px 0px rgba(0,0,0,0.78); 
 
    \t box-shadow: inset 3px 3px 3px 0px rgba(0,0,0,0.78); 
 
     height: 40px; 
 
     margin: 15px; 
 
     padding: 12px; 
 
     width: 300px; 
 
     font-size: 18px; 
 
     border: 0; 
 
    \t border-radius: 3px; 
 
    } 
 

 
    .campos:focus { 
 
    \t -webkit-box-shadow: 0px 0px 13px 6px rgba(36,160,255,1); 
 
    \t -moz-box-shadow: 0px 0px 13px 6px rgba(36,160,255,1); 
 
    \t box-shadow: 0px 0px 13px 6px rgba(36,160,255,1); 
 
    } 
 

 
    .correcto{ 
 
    \t -webkit-box-shadow: 0px 0px 13px 6px rgba(0,255,81,1); 
 
    \t -moz-box-shadow: 0px 0px 13px 6px rgba(0,255,81,1); 
 
    \t box-shadow: 0px 0px 13px 6px rgba(0,255,81,1); 
 
    } 
 

 
    .incorrecto{ 
 
    \t -webkit-box-shadow: 0px 0px 13px 6px rgba(255,0,0,1); 
 
    \t -moz-box-shadow: 0px 0px 13px 6px rgba(255,0,0,1); 
 
    \t box-shadow: 0px 0px 13px 6px rgba(255,0,0,1); 
 
    } 
 

 
    .botones { 
 
    \t -webkit-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t -moz-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t background-color:#7C1919; 
 
    \t width: 250px; 
 
    \t height: 50px; 
 
    \t border: 0; 
 
    \t font-size: 20px; 
 
    }

而jQuery的腳本objetive是評估一些投入，然後在添加類輸入信息來告知用戶它的正確與否，但我希望它是動態的，我的意思是，在不充電頁面的情況下持續評估輸入。

$(document).ready(function(){ 
 
    \t var user = $("input[name=user]").val(); 
 
    \t if(user === "Vitama") { 
 
    \t \t $("input[name=user]").addClass("correcto"); 
 
    \t } 
 
    });

我suposed這個腳本會做那件事，但我錯了。有些幫助，請問我該如何使它動態？

來源

2015-01-26 Vitama

有什麼問題嗎？你有什麼問題？你發佈你的代碼很好，但你沒有充分解釋這個問題。 – j08691 2015-01-26 21:02:50

問題是，我認爲我所做的會做一個實時的動態複製，但事實並非如此，它需要我重新加載te頁面進行驗證。 – Vitama 2015-01-27 23:12:23

這聽起來像你正在尋找像jQuery中的.keyup函數。它在輸入時評估條件。

我還將!important關鍵字添加到「correcto」屬性，以便它們覆蓋:focus屬性。

var user; 
 
$("input[name=user]").keyup(function() { 
 
    user = $("input[name=user]").val(); 
 
    if (user === "Vitama") { 
 
    $("input[name=user]").addClass("correcto"); 
 
    } 
 
});

#form { 
 
    font-family: Tahoma; 
 
    font-size: 20px; 
 
    margin-top: 200px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding: 20px 10px 20px 50px; 
 
    width: 700px; 
 
    text-align: center; 
 
    border-radius: 5px; 
 
    background: url("imagenes/div_fondo.jpg"); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    -webkit-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    -moz-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
} 
 
#head { 
 
    color: white; 
 
    font-family: Tahoma; 
 
    font-size: 20px; 
 
    margin-top: 20px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding: 10px 0px 10px 0px; 
 
    width: 1500px; 
 
    text-align: center; 
 
    border-radius: 5px; 
 
    background: url("imagenes/div_fondo.jpg"); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    text-shadow: 0px 0px 15px #2222FF; 
 
    -webkit-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    -moz-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
} 
 
td { 
 
    padding-top: 15px; 
 
} 
 
#titulo { 
 
    text-shadow: 0px 0px 8px #2222FF; 
 
    line-height: 5px; 
 
    color: white; 
 
} 
 
.descripcion { 
 
    text-shadow: 0px 0px 8px #2222FF; 
 
    color: white; 
 
    text-align: right; 
 
    font-size: 20px; 
 
} 
 
.campos { 
 
    -webkit-box-shadow: inset 3px 3px 3px 0px rgba(0, 0, 0, 0.78); 
 
    -moz-box-shadow: inset 3px 3px 3px 0px rgba(0, 0, 0, 0.78); 
 
    box-shadow: inset 3px 3px 3px 0px rgba(0, 0, 0, 0.78); 
 
    height: 40px; 
 
    margin: 15px; 
 
    padding: 12px; 
 
    width: 300px; 
 
    font-size: 18px; 
 
    border: 0; 
 
    border-radius: 3px; 
 
} 
 
.campos:focus { 
 
    -webkit-box-shadow: 0px 0px 13px 6px rgba(36, 160, 255, 1); 
 
    -moz-box-shadow: 0px 0px 13px 6px rgba(36, 160, 255, 1); 
 
    box-shadow: 0px 0px 13px 6px rgba(36, 160, 255, 1); 
 
} 
 
.correcto { 
 
    -webkit-box-shadow: 0px 0px 13px 6px rgba(0, 255, 81, 1)!important; 
 
    -moz-box-shadow: 0px 0px 13px 6px rgba(0, 255, 81, 1)!important; 
 
    box-shadow: 0px 0px 13px 6px rgba(0, 255, 81, 1)!important; 
 
} 
 
.incorrecto { 
 
    -webkit-box-shadow: 0px 0px 13px 6px rgba(255, 0, 0, 1); 
 
    -moz-box-shadow: 0px 0px 13px 6px rgba(255, 0, 0, 1); 
 
    box-shadow: 0px 0px 13px 6px rgba(255, 0, 0, 1); 
 
} 
 
.botones { 
 
    -webkit-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    -moz-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    background-color: #7C1919; 
 
    width: 250px; 
 
    height: 50px; 
 
    border: 0; 
 
    font-size: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<body> 
 
    <form method="POST"> 
 
    <table border=0> 
 
     <tr> 
 
     <td class="descripcion">Usuario:</td> 
 
     <td> 
 
      <input class="campos" type="text" name="user" placeholder="Nombre de usuario"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="descripcion">Contraseña: 
 
      <td> 
 
      <input class="campos" type="password" name="passwd" placeholder="Contraseña"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="descripcion">Confirmar contraseña:</td> 
 
     <td> 
 
      <input class="campos" type="password" name="confpasswd" placeholder="Confirmar Contraseña"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="descripcion">Correo:</td> 
 
     <td> 
 
      <input class="campos" type="text" name="correo" placeholder="E-Mail"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="descripcion">Confirmar correo:</td> 
 
     <td> 
 
      <input class="campos" type="text" name="confcorreo" placeholder="Confirmar E-Mail"> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    <br> 
 
    <input class="botones" type="submit" name="send" value="Registrar"> 
 
    </form> 
 
    </div> 
 
</body>

來源

2015-01-26 22:15:12 user3738893

JQuery的輸入動態檢查

回答

相關問題