我有一个简单的注册表单和密码输入是:
<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');
}
});