两个输入相同时启用按钮答案

【问题标题】：Enable button when two inputs are the same两个输入相同时启用按钮
【发布时间】：2018-08-01 07:14:47
【问题描述】：

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

重置.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')
    }
})

【问题讨论】：

这个问题重复？ Button disable unless both input fields have value

标签： javascript jquery

【解决方案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 解决方案当然更简单，但它不能很好地扩展到超过两个或三个元素。

【讨论】：

【解决方案2】：

你可以订阅两个输入框的'input'事件，像这样：

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

现在，当用户在任一框中键入时，如果两个值不同，“#validate”按钮将被禁用。

【讨论】：