Question

所以我有一个密码和确认密码，我显然需要匹配并显示一条消息，如果不匹配。

我的要求：

该消息应仅在确认密码（第二次输入）输入后显示。

我的设置现在是，当用户模糊确认密码（第二次输入）时，该函数运行并在没有匹配时抛出错误消息，并且当用户键入与密码输入匹配的正确密码（使用onkeyup）时动态隐藏（第一次输入））

问题： 如果用户返回并更改第一个输入，则不显示任何消息。如果我在密码（第一次输入）上使用相同的onblur函数，则在我在第二个字段中输入任何内容之前显示消息（确认密码）。我该如何解决这个问题？

 $onInit = () => {
        let self = this;

        this.siRole.getRoles().then((roleList) => {
            self.roleList = roleList.filter((r) => {return !r.hidden});
        }, (err) => {
            self.siAlertDialog.error(err.message);
        })
        this.hide = true;
    }

    passwordWatchOnblur = ()=>{
     this.hide =  this.newUser.password == this.newUser.confirmPassword ? true :false  
      }
    passwordWatchOnkeyup = ()=>{
          if(this.newUser.password == this.newUser.confirmPassword){
              this.hide=true;
          } 
    }

    <div layout layout-xs='column'>
        <md-input-container flex class="md-accent">
          <label translate="LABELS.PASSWORD"></label>
          <input  ng-model='$ctrl.newUser.password' type='password'  required/>
        </md-input-container>
        <md-input-container flex class="md-accent">
          <label translate="LABELS.CONFPASS"></label>
          <input id="confirm" ng-model='$ctrl.newUser.confirmPassword' type='password' ng-blur="$ctrl.passwordWatchOnblur()" ng-keyup="$ctrl.passwordWatchOnkeyup()" required/>
          <span ng-hide="$ctrl.hide"  class='label-error'>{{'SI-MESSAGES.PASS-NO-MATCH'|translate}}</span>
        </md-input-container>
      </div>

Answer 1

可能的解决方案：

在密码（第一次输入）上使用相同的onkeyup功能，并像tihs一样修改passwordWatchOnkeyup：

passwordWatchOnkeyup = () => {
    this.hide =  typeof this.newUser.confirmPassword === 'undefined' || this.newUser.confirmPassword === null || this.newUser.password == this.newUser.confirmPassword;
}

原因：如果没有confirmPassword或两者都相等，则隐藏消息。

更新（为passwordWatchOnblur功能添加了替代方案）

...或者你可以在onblur密码上使用这个（passwordWatchOnblur）函数（第一次输入）

passwordWatchOnblur = () => {
    this.hide =  typeof this.newUser.confirmPassword === 'undefined' || this.newUser.confirmPassword === null || this.newUser.password == this.newUser.confirmPassword;
}

P.S。：功能的内容是相同的。它们被调用的时间有什么变化。在passwordWatchOnblur上调用onblur后，只有在用户离开输入时才会显示该消息，而不是在他/她输入密码时显示。

Angular（JavaScript）确认密码验证消息？

1 个答案: