Question

我有一些代码可以检查2个文本字段是否匹配。这是使用正常工作的键盘，但我希望它隐藏或显示div取决于结果。我所拥有的是一个改变divCheckPasswordMatch的代码？

所以我希望

$('#match').hide();
$('#nomatch').show();

js代码是：

 $(function() {
    $("#password2").keyup(function() {
        var password = $("#password1").val();
        $("#divCheckPasswordMatch").html(password == $(this).val() ? "Passwords match." : "Passwords do not match!");
    });
});

Answer 1

我猜您希望有两个<div>使用show()和hide()显示不同的消息，但我不确定，所以我做了两个。

＆＃13;

$('#match').hide();
$('#nomatch').hide();

$("#password2").keyup(function() {
  var password = $("#password1").val();
  
  
  if ($(this).val() === password) {
    $('#divCheckPasswordMatch').html('Passwords match');
    $('#match').show();
    $('#nomatch').hide();
  } else {
    $('#divCheckPasswordMatch').html('Passwords do not match');
    $('#match').hide();
    $('#nomatch').show();
 }
  
  
});

＆＃13;

<form action="/action_page.php">
  First input: <input id="password1" type="text" name="fname"><br>
  Second input: <input id="password2" type="text" name="lname"><br>
</form>
<div id="divCheckPasswordMatch"></div>
<div id="match">Match</div>
<div id="nomatch">No Match</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

按照你的要求，你可以做到这一点。

HTML

runtime

JS

<input id="password1">
<input id="password2">
<spam id="divCheckPasswordMatch"></spam>

但请记住，您还需要预测密码1是否也已更改。

Answer 3

这是一个有效的例子。出于学习目的，我强烈建议使用纯javascript而不是jQuery。很容易将它重写为jQuery。如果你愿意，我可以帮你。

你错过了模糊事件，我添加了它。代码不可重复，它仍然可以改进。我们使用一个函数进行验证。

new ObjectInputStream(System.in)

 var field1 =  document.getElementById('password1');
 var field2 =  document.getElementById('password2'); 
 var result = document.getElementById('divCheckPasswordMatch');
 
 function validateInputs() {
  // If any of fields is empty then quit
  if (field1.value === '' || field2.value === '') {
    return;
  }
  
  if (field1.value === field2.value) {
    result.innerHTML = '';
    // optional hide it, clearing text gives almost the same effect, up to you
    // result.style.display = 'none';
  } else {
    result.innerHTML = 'Passwords don\'t match';
    // optional show it
    //result.style.display = 'block';
  }
 }
 
 document.getElementById('password1').addEventListener('keyup', validateInputs);
 document.getElementById('password2').addEventListener('keyup', validateInputs);
 
 document.getElementById('password1').addEventListener('blur', validateInputs);
 document.getElementById('password2').addEventListener('blur', validateInputs);

javascript keyup更改div而不仅仅是文本

3 个答案: