我正在从 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 个字符但值不同时显示错误当用户按下提交按钮或输入焦点丢失时。
最佳答案
这里有一些关于如何使用 polymer 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
}
}
关于polymer - 使用 Polymer 1.0 进行密码和重新输入密码验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31369599/