Question

我有两个密码输入，当两个输入相同时，我希望我的验证按钮可以单击。

reset.pug

block content
    div#content.center-align
        p
            span#main.bold=trad.mainTitle
            br     
        input#pass(type='password',placeholder='' + trad.textplaceholder)
        input#pass(type='password',placeholder='' + trad.validpass)
        button#validate(value=token) #{trad.button}

这是我的ajax函数

$('#validate').bind( 'click', function(e) {
    let token = e.target.value
    // let pass1 =  $('#pass1').val()
    let pass = $('#pass').val()
    if (pass !== '') {
        $.post('/reset-password', {'pass': pass, 'token': token}, function (res) {
            console.log(res)
            if (res.err) {
                $('#hiddenErr').removeClass('hide')
            } else {
                $('#hiddenSuccess').removeClass('hide')
                setTimeout(function () {
                    window.location = '/'
                }, 10000)
            }
        })
    } else {
        console.log('wrong password')
    }
})

Answer 1

严格来说，这不是错误，但是您在同一页面上的两个html元素上使用了相同的id，这可能导致奇怪的行为。当您有两个相似的元素或使用两个单独的ID时，最好使用一个类。

使用类执行此操作

block content
  div#content.center-align
    span#main.bold=trad.mainTitle
    br     
    input.pass(type='password',placeholder='' + trad.textplaceholder)
    input.pass(type='password',placeholder='' + trad.validpass)
    button#validate(value=token) #{trad.button}

script.
  function isMatchingPassword(){

    var passwords = [];

    $('.pass').each(function(index, element){
      passwords.push( $(element).val() );
    });

    if( passwords[0] === passwords[1] ){
      return true;
    } else {
      return false;
    }

  }

使用ID进行此操作

block content
  div#content.center-align
    span#main.bold=trad.mainTitle
    br     
    input#pass1(type='password',placeholder='' + trad.textplaceholder)
    input#pass2(type='password',placeholder='' + trad.validpass)
    button#validate(value=token) #{trad.button}

script.
  function isMatchingPassword(){

    if( $('#pass1').val() === $('#pass2').val() ){
      return true;
    } else {
      return false;
    }

  }

id解决方案当然更容易，但是它不能很好地扩展到超过两个或三个元素。

Answer 2

您可以订阅两个输入框的'input'事件，如下所示：

$('#pass, #pass1').on('input', function()
{
 $('#validate').prop('disabled') = $('#pass').val() != $('#pass1').val();
});

现在，如果用户在两个框中输入任何一个，则如果两个值不同，则将禁用“ #validate”按钮。

两个输入相同时的启用按钮

2 个答案: