Пароль и повторный ввод пароля с помощью Polymer 1.0

Я перехожу на Polymer 1.0 с Polymer 0.5 и не могу сделать простую валидацию - классический сценарий с паролем и полем повторного ввода пароля.

С 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 polymer-1.0
person Gamby    schedule 12.07.2015    source источник
comment
не уверен, что это все еще актуально, но вы можете реализовать собственный валидатор, см. здесь, как это сделать stackoverflow.com/questions/31955091/   -  person Andrey    schedule 01.12.2015

Ответы (1)


arrow_upward
3
arrow_downward

вот несколько примеров того, как проверить пароль соответствия с помощью полимера 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
      }
    }
person Fajar    schedule 14.12.2015