使用Polymer 1.0密碼並重新輸入密碼驗證

我正在從Polymer 0.5遷移到Polymer 1.0，我無法做一個簡單的驗證 - 密碼和重新輸入密碼字段的經典場景。使用Polymer 1.0密碼並重新輸入密碼驗證

有聚合物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; 
}

和它的工作，但現在，已經遷移到聚合物1.0後，我沒有使用紙輸入 - 裝飾器了，所以我想盡一切辦法只有紙張輸入：

<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個字符時顯示錯誤但值不同以及當用戶按下提交按鈕或輸入焦點丟失時。

來源

2015-07-12 Gamby

不知道它仍然是實際的，但你可以實現自定義的驗證，看這裏如何做到這一點http://stackoverflow.com/questions/31955091/how-to-add-custom-validator-to-paper-input – Andrey

這裏一些示例如何使用聚合物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 
     } 
    }

來源

2015-12-14 02:39:45 Fajar

使用Polymer 1.0密碼並重新輸入密碼驗證

回答

相關問題