Question

在让用户继续操作之前，如何确保密码字段匹配？

<input name="pass" id="pass" type="password" />
<input type="password" name="cpass" id="cpass" /> <span id='message'></span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#pass, #cpass').on('keyup', function () {
if ($('#pass').val() == $('#cpass').val()) {
    $('#message').html('Matching').css('color', 'green');     
} 
else $('#message').html('Not Matching').css('color', 'red'); 
});
 </script>
<input type="text" name="phone" id="phone">

Answer 1

使用jquery，您可以删除手机输入的禁用属性：

<input type="text" name="phone" id="phone" disabled />

$('#pass, #cpass').on('keyup', function () {
if ($('#pass').val() == $('#cpass').val()) {
    $('#message').html('Matching').css('color', 'green');
    $("#phone").prop('disabled', false);    
} 
else $('#message').html('Not Matching').css('color', 'red'); 
});

Answer 2

您可以通过向电话字段输入添加属性disabled，根据条件启用禁用文本框：

$('#pass, #cpass').on('keyup', function () {
  if ($('#pass').val() == $('#cpass').val()) {
   $('#message').html('Matching').css('color', 'green'); 
   $("#phone").removeAttr("disabled"); 
  } 
 else {
   $('#message').html('Not Matching').css('color', 'red'); 
   $("#phone").attr("disabled", "disabled"); 
  }
 });

<强> Working Demo

检查密码是否匹配

2 个答案: