Question

我创建了一个注册页面，并且注册本身可以正常工作，这是因为我对提交的php检查了是否正确编写了用户名和其他内容，但是我又走了一步，想在用户编写时验证密码，如果输入两个密码不匹配以将其标记为红色，如果密码匹配则将其标记为绿色。不幸的是，由于任何原因它都不起作用-有人可以帮助我吗？

<div class="form-content">
    <form name="regform" method="post" action="register.php<?php if ($referral_code !== '0') {echo '?r='.$referral_code.'';}?>">
        <div class="form-group">
            <label for="username"><?php echo $t_username_reg; ?></label>
            <input type="text" class="" id="username" name="username" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="email"><?php echo $t_email_reg; ?></label>
            <input type="email" id="email" name="email" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="password_1"><?php echo $t_password_reg; ?></label>
            <input type="password" id="myInput" name="password_1" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="password_2"><?php echo $t_confpassword_reg; ?></label>
            <input type="password" id="myInput1" name="password_2" autocomplete="off">
        </div>
        <div class="form-group">
            <label class="form-remember">
            <input type="checkbox" onclick="myFunction()"><?php echo $t_showpass_reg; ?>
            </label><a class="form-recovery" href="login.php"><?php echo $t_alreadymem_reg; ?></a>
        </div>
        <p><?php echo $t_byreg1_reg; ?><a href="tos.php"><?php echo $t_byreg2_reg; ?></a><?php echo $t_byreg3_reg; ?><a href="pp.php"><?php echo $t_byreg4_reg; ?></a>.</p>
        <div class="form-group">
            <button type="submit" name="reg_user"><?php echo $t_title_reg; ?></button>
        </div>
    </form>
</div>

function checkPasswordMatch() {
    var password = $("#myInput").val();
    var confirmPassword = $("#myInput1").val();
    var element = document.getElementById("username");

    if (password != confirmPassword)
        element.classList.add("red");
        element.classList.remove("green");
    else
        element.classList.add("green");
        element.classList.remove("red");
}
$(document).ready(function () {
   $("#myInput, #myInput1").keyup(checkPasswordMatch);
});

Answer 1

有两个问题，首先使用if + else语句时，需要使用括号if{} else{}，这会引发错误。另外，您需要在.red中定义.green和css。这足以使密码匹配起作用：

function checkPasswordMatch() {
    
    var password = $("#myInput").val();
    var confirmPassword = $("#myInput1").val();
    var element = document.getElementById("myInput1");
console.log(password, confirmPassword);
    if (password != confirmPassword){
        element.classList.add("red");
        element.classList.remove("green");
    }
    else{
        element.classList.add("green");
        element.classList.remove("red");
    }
}
$(document).ready(function () {
   $("#myInput, #myInput1").keyup(checkPasswordMatch);
});

.red{
  color:red;
}
.green{
  color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-content">
      <form name="regform" method="post" action="register.php<?php if ($referral_code !== '0') {echo '?r='.$referral_code.'';}?>">
        <div class="form-group">
          <label for="username"><?php echo $t_username_reg; ?></label>
          <input type="text" class="" id="username" name="username" autocomplete="off">
        </div>
        <div class="form-group">
          <label for="email"><?php echo $t_email_reg; ?></label>
          <input type="email" id="email" name="email" autocomplete="off">
        </div>
        <div class="form-group">
          <label for="password_1"><?php echo $t_password_reg; ?></label>
          <input type="password" id="myInput" name="password_1" autocomplete="off">
        </div>
        <div class="form-group">
          <label for="password_2"><?php echo $t_confpassword_reg; ?></label>
          <input type="password" id="myInput1" name="password_2" autocomplete="off">
        </div>
        <div class="form-group">
          <label class="form-remember">
            <input type="checkbox" onclick="myFunction()"><?php echo $t_showpass_reg; ?>
          </label><a class="form-recovery" href="login.php"><?php echo $t_alreadymem_reg; ?></a>
        </div>
        <p><?php echo $t_byreg1_reg; ?><a href="tos.php"><?php echo $t_byreg2_reg; ?></a><?php echo $t_byreg3_reg; ?><a href="pp.php"><?php echo $t_byreg4_reg; ?></a>.</p>
        <div class="form-group">
          <button type="submit" name="reg_user"><?php echo $t_title_reg; ?></button>
        </div>
      </form>
    </div>

Answer 2

请检查以下代码：

function checkPasswordMatch() {
    var password = $("#myInput").val();
    var confirmPassword = $("#myInput1").val();
    var element = document.getElementById("username");

    if (password != confirmPassword)
    {
        element.classList.add("red");
        element.classList.remove("green");
    }
    else
    {
        element.classList.add("green");
        element.classList.remove("red");
        }
}
$(document).ready(function () {
   $("#myInput, #myInput1").keyup(checkPasswordMatch);
});

.red {
color :red;
}

.green {
color :green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-content">
    <form name="regform" method="post" action="register.php<?php if ($referral_code !== '0') {echo '?r='.$referral_code.'';}?>">
        <div class="form-group">
            <label for="username">USername</label>
            <input type="text" class="" id="username" name="username" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="password_1">Password:</label>
            <input type="password" id="myInput" name="password_1" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="password_2">Confirm password:</label>
            <input type="password" id="myInput1" name="password_2" autocomplete="off">
        </div>
        <div class="form-group">
            <button type="submit" name="reg_user">Register</button>
        </div>
    </form>
</div>

用户输入时，JavaScript验证用户名

2 个答案: