当我检查两个密码是否匹配时，没有定义样式属性

style attribute not defined when i check two passwords if match

本文关键字：属性 样式 定义 是否 检查 密码 两个      更新时间：2023-09-26

我有一个简单的注册表单和密码输入是:

<label for="pass">Password:</label>
    <div class="input-group input-group-md">
      <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-cog"></span></span>
      <input type="password" class="form-control" placeholder="Password" aria-describedby="sizing-addon1" id="pass">
    </div>
    <br>
    <label for="pass_confirm">Confirm password:</label>
    <div class="input-group input-group-md">
      <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-envelope"></span></span>
      <input type="password" class="form-control" placeholder="Confirm password" aria-describedby="sizing-addon1" id="confirmPass">
    </div>
    <br>
    <p id="passwordMatch"></p>

我希望段落与id="passwordMatch"显示，并根据结果显示所需的确切文本。我的jquery代码是:

$('#confirmPass').on('keyup', function () {
        if ($('#confirmPass').val() == $('#pass').val()) {
            $('#passwordMatch')[0].style.display = "block";
       // use array to convert jquery to object     $('#passwordMatch').html('Password match!').css('color', 'green');
        } else {
            $('#passwordMatch').html('Password do not match!').css('color', 'red');
        }
    });

但是当我在输入中输入一些随机密码时，控制台告诉我没有定义.style属性。在此之前，我使用$('this')，但我发现我得到一个对象，因为我不能直接访问DOM。没关系，用if('#confirmPass').val()改变它，我仍然得到相同的错误。

如果您需要直接访问DOM对象，您应该使用$('#passwordMatch')[0].style.display = "block";

但是由于你已经使用了jQuery，我建议你使用$('#passwordMatch').show();

问题是你在jquery选择器上使用。style -试试这个而不是。style:

$('#passwordMatch').css("display", "block");

将代码行改为:

 $('#passwordMatch').css({'display':'block'});

$('#passwordMatch')返回一个集合，所以它没有style属性。您可能应该选择是使用jQuery还是纯javascript，并坚持使用它。jQuery -> $('#passwordMatch').css('display','block');

如果你真的想，你也可以这样做:

$('#confirmPass').on('keyup', function () {
        if ($('#confirmPass').val() == $('#pass').val()) {
            $('#passwordMatch')[0].style.display = "block";
            $('#passwordMatch').html('Password match!').css('color', 'green');
        } else {
            $('#passwordMatch').html('Password do not match!').css('color', 'red');
        }
    });
相关文章：