使用 Polymer 1.0 进行密码和重新输入密码验证答案

【问题标题】：Password and re-enter password validation with Polymer 1.0使用 Polymer 1.0 进行密码和重新输入密码验证
【发布时间】：2015-07-12 15:45:58
【问题描述】：

我正在从 Polymer 0.5 迁移到 Polymer 1.0，但我无法进行简单的验证 - 密码和重新输入密码字段的经典场景。

使用 Polymer 0.5 我有：

<paper-input-decorator id="passwordDecId" label="New password (8 caratteri almeno)" floatingLabel error="campo obbligatorio!">
    <input id="passwordId" onchange="validatePassword()" is="core-input" type="password" name="password" required pattern=".{8,32}">
</paper-input-decorator>
<paper-input-decorator id="reenterPasswordDecId" label="Re-enter password (8 caratteri almeno)" floatingLabel error="campo obbligatorio!">
    <input id="reenterPasswordId" onchange="validatePassword()" is="core-input" type="password" name="reenterPassword" required pattern=".{8,32}">
</paper-input-decorator>

而 validatePassword 函数是：

function validatePassword() {
    var passwordDecorator = document.getElementById('passwordDecId');
    var passwordInput = document.getElementById('passwordId');
    var reenterPasswordDecorator = document.getElementById('reenterPasswordDecId');
    var reenterPasswordInput = document.getElementById('reenterPasswordId');
    var pass2 = reenterPasswordInput.value;
    var pass1 = passwordInput.value;

    if (pass1 != pass2) {
        reenterPasswordInput.setCustomValidity("Passwords Don't Match");
    } else {
        // empty string means no validation error
        reenterPasswordInput.setCustomValidity('');
    }

    passwordDecorator.isInvalid = !passwordInput.validity.valid;
    reenterPasswordDecorator.isInvalid = !reenterPasswordInput.validity.valid;
}

它工作了，但是现在，在迁移到 Polymer 1.0 之后，我不再使用 paper-input-decorator 了，所以我想只用 paper-input 来做所有事情：

<paper-input id="passwordId" onchange="validatePassword()" name="password" type="text" label="New password" auto-validate required pattern=".{1,32}" error-message="1 caratteri almeno"></paper-input>

<paper-input id="reenterPasswordId" onchange="validatePassword()" name="reenterPassword" type="text" label="Re-enter password" auto-validate required pattern=".{1,32}" error-message="1 caratteri almeno"></paper-input>

我不知道如何更改validatePassword 函数以在两个密码的长度大于 1 个字符时显示错误但值不同以及当用户按下任一提交按钮或输入焦点丢失时。

【问题讨论】：

不确定它是否仍然是实际的，但您可以实现自定义验证器，请参阅此处如何操作stackoverflow.com/questions/31955091/…

标签： polymer polymer-1.0

【解决方案1】：

这里有一些关于如何使用聚合物 1.0 验证匹配密码的示例

<paper-input label="Password" required value="{{pass::input}}" id="checkPassword"></paper-input>
<paper-input label="Re-type Password" required value="{{repass::input}}" on-change="passmatch" id="checkPassword"></paper-input>

并添加passmatch功能

passmatch: function(e){
      var password = encodeURIComponent(this.pass);
      var confirmPassword = encodeURIComponent(this.repass);
      if(password != confirmPassword){
        // do something
      }
    }

【讨论】：