Question

我正在尝试在用户输入密码确认输入时更改密码确认输入的颜色。如果匹配，边框变为绿色，如果不匹配则变为红色。

这是JQuery：

var createPass = $("#createPass").val();
var confirmPass = $("#confirmPass").val();

$("#confirmPass").keydown(function() {

   if(confirmPass == createPass && confirmPass != "") {
      confirmPass.addClass("inputCorrect")
   } else {
      confirmPass.addClass("inputIncorect");
   }
});

html：

<label for="passWord">Create Password</label>
<input type="password" id="createPass" name="passWord" class="inputBox"  placeholder="Minimum 8 characters" required><br>

<label>Confirm Password</label>
<input type="password" id="confirmPass" class="inputBox" required>

CSS：

input.passCorrect {
   border: 1px solid #00cc00;
}

input.passIncorrect {
   border: 1px solid #ff0000;
}

我首先尝试了以下JQuery，但这项工作似乎有点长：

$("input[id=confirmPass").keyup(function() {

   if ($("input[id=confirmPass]").val() == $("input[id=createPass]").val()) {

       ($("input[id=confirmPass]").removeClass("passIncorrect"));
       ($("input[id=confirmPass]").addClass("passCorrect"));

   }

   if ($("input[id=confirmPass]").val() != $("input[id=createPass]").val() && ($("input[id=confirmPass]") != "")) {

       ($("input[id=confirmPass]").removeClass("passCorrect"));
       ($("input[id=confirmPass]").addClass("passIncorrect"));

   }

});

我已尝试使用.keyup()，.keydown()，.keypress()，.change()，并重新命名了几乎每个类，ID和变量，但我没有成功！它位于一个单独的.js文件中，我在使用和不使用$(document).ready()的情况下尝试过它，但它不起作用。我也尝试使用.css()而不是.addClass和.removeClass。

非常感谢任何帮助！

Answer 1

以下是修复后的Javascript：

var createPass = $("#createPass");
var confirmPass = $("#confirmPass");

confirmPass.keydown(function() {
    // Remove both classes
   confirmPass.removeClass("passCorrect passIncorrect");

   // Add the appropriate class
   if (confirmPass.val() == createPass.val() && confirmPass.val() != "") {
      confirmPass.addClass("passCorrect");
   } else {
      confirmPass.addClass("passIncorrect");
   }
});

以下是事先没有工作的事情：

执行代码confirmPass.addClass("inputCorrect")时，您将一个类添加到整数值。
在您的javascript中，您添加了类＆quot; inputCorrect＆＃39;和＆＃39; inputIncorrect＆＃39;，但在你的CSS中，你将这些类称为＆＃39; passCorrect＆＃39;和＆＃39; passIncorrect＆＃39;。
每次用户按下某个键时，您需要获取createPass和confirmPass的值，否则您在开头声明的两个变量将始终包含两个输入的初始值。
每次用户按键时都需要删除输入的类，否则这两个类都将应用于输入。

当用户输入时，我如何更改输入的类？

1 个答案: