JQuery输入动态检查

时间：2015-01-26 20:56:12

标签： jquery html css forms

我基本上做的是下一个： 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>

是一个简单的regiter处方集，带有CSS类。 然后我有一个CSS表格，其中包含当前样式以及为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脚本，它的目的是评估一些输入，然后在输入中添加一个类来告知用户它的正确与否，但我希望它是动态的，我的意思是不断评估输入而不对页面进行充电。 

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

我说这个脚本会做那件事，但我错了。 请帮助一下，我怎样才能让它充满活力？。

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题