JQuery 输入动态检查

Question

我做的基本上是下一个： HTML/PHP 形式：

<html>
     <head>
      <link rel="stylesheet" type="text/css" href="gstyle.css">
     </head>
     <body>
     <script type="text/javascript" src="resources/jquery-1.11.2.min.js"></script>
     <script type="text/javascript" src="resources/jquery-ui/jquery-ui.min.js"></script>
     <script type="text/javascript" src="script.js"></script>
       <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>
    </html>

是一个简单的注册公式，有CSS classes。然后我有一个 CSS sheet 的当前样式，还有一个正确和不正确的 classes 准备好 JQuery:

#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);
     -moz-box-shadow: 0px 0px 13px 6px rgba(0,255,81,1);
     box-shadow: 0px 0px 13px 6px rgba(0,255,81,1);
    }

    .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;
    }

还有一个 JQuery 脚本，其目标是评估一些输入，然后在输入中添加一个 class 以告知用户它是否正确，但我希望它是动态的，我的意思是，评估一直输入不给页面充电

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

我以为这个脚本会做那件事，但我错了。请帮忙，我怎样才能让它动态化？

Answer 1

听起来您正在寻找类似于 jQuery 中的 .keyup 函数的内容。它会在输入时评估条件。

我还在 "correcto" 属性中添加了 !important 关键字，这样它们就会覆盖 :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>

JQuery 输入动态检查

JQuery input dynamic checking

html

css

forms

jquery