Question

我找到了这个脚本：

<label>password :
  <input name="password" id="password" type="text" />
</label>
<br>
<label>confirm password:
  <input type="text" name="confirm_password" id="confirm_password" /> <span id='message'></span>

http://jsfiddle.net/sprme2gq/2/

$('#confirm_password').on('keyup', function () {
    if ($(this).val() == $('#password').val()) {
        $('#message').html('matching').css('color', 'green');
    } else $('#message').html('not matching').css('color', 'red');
});

但是我想将第一个输入与第二个输入进行比较，而是比较确切的值，我想比较它是否在路上。

例如，第一个输入是：＆＃34; 1234＆＃34;
在第二种类型中输入：＆＃34; 12＆＃34;
在这一刻，我想表明它仍然正确，或者至少，它几乎存在，而不是错误，只有当输入完全相同时才表示它是正确的右。

有人可以帮我这个吗？

Answer 1

希望这会有所帮助：

function AlmostThere(pwd, pwdConfirm) {
   var confirmLength = pwdConfirm.length;
   var partialPwd = pwd.substr(0, confirmLength);
   return pwdConfirm ==partialPwd;
}
$('#confirm_password').on('keyup', function() {
   if (AlmostThere($('#password').val(),$(this).val())) {
      $('#message').html('matching').css('color', 'green');
   } else $('#message').html('not matching').css('color', 'red');
});

Answer 2

JQuery不引人注目的验证处理所有这些。您可以使用它们来代替自己编写。你可以有一个标志，当你第一次进入盒子时，不要比较，直到它是正确的。设置标志以在输入相同或焦点输出或更改确认密码时开始比较。

Answer 3

只需检查Password1是否以Password2开头

$('#confirm_password').on('keyup', function () {
    var p1 = $(this).val(),
        p2 = $('#password').val();

    if (p2 === '') {
        notify('');
        return;
    }
    if (p1 === p2) {
        notify('matching', 'green');
        return;
    }
    if (p1.indexOf(p2) === 0) {
        notify('waiting', 'yellow');
        return;    
    }
    notify('not matching', 'red')

    function notify(message, color) {
        $('#message').html(message).css('color', color);
    }
});

Answer 4

我会做这样的事情：

$('#confirm_password, #password').on('input', function(e){
  changeColor($('#confirm_password').val(), $('#password').val());
});

function changeColor(c, p){
  var color;
  if(c === p){
    color = 'green';
  } else if(p.indexOf(c) === 0 && c != ''){
    color = 'yellow';
  } else {
    color = 'red';
  }
  $('#confirm_password').css('background-color', color);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>password :
  <input name="password" id="password" type="text" />
</label>
<br>
<label>confirm password:
  <input type="text" name="confirm_password" id="confirm_password" /> <span id='message'></span>

比较部分输入与另一部分

4 个答案: