聚合物2：紙張輸入

自定義驗證我使用的是paper-input這樣的：聚合物2：紙張輸入

<paper-input 
    type="number" 
    allowed-pattern="[0-9,]" 
    validator="my-validator" 
    auto-validate="true" 
    error-message="Invalid input!"> 
</paper-input>

我想添加自己的邏輯來驗證輸入。我已經搜索了關於這方面的信息，但我只找到Polymer 1.x示例。如何在Polymer 2中添加自定義輸入驗證？

編輯：

<paper-input 
    type="number" 
    allowed-pattern="[0-9,]" 
    validator="my-validator1" 
    auto-validate="true" 
    value="{{value1}}" 
    error-message="Invalid input!"> 
</paper-input> 

<paper-input 
    type="number" 
    allowed-pattern="[0-9,]" 
    validator="my-validator2" 
    auto-validate="true" 
    value="{{value2}}" 
    error-message="Invalid input!"> 
</paper-input> 

<paper-input 
    type="number" 
    allowed-pattern="[0-9,]" 
    validator="my-validator3" <!-- value1 + value 2 == value3 --> 
    auto-validate="true" 
    value="{{value3}}" 
    error-message="Invalid input!"> 
</paper-input>

來源

2017-06-04 Amparo

你的驗證器的使用看起來是正確的，但驗證的定義缺失。

以增加驗證的關鍵是：

定義一個實現Polymer.IronValidatorBehavior行爲模板少自定義元素。

聚合物2.x的：

class Foo extends Polymer.mixinBehaviors([Polymer.IronValidatorBehavior], 
             Polymer.Element) 
{...}

聚合物的1.x：

Polymer({ 
    ... 
    behaviors: [ 
    Polymer.IronValidatorBehavior 
    ] 
});

在該元件中，定義validate(value)，它返回一個布爾值，指示value是否是有效。

聚合物2.x的例子：

class SsnValidator extends Polymer.mixinBehaviors([Polymer.IronValidatorBehavior], Polymer.Element) { 
    static get is() { return 'ssn-validator'; } 

    ready() { 
    super.ready(); 

    // Workaround https://github.com/PolymerElements/iron-validator-behavior/issues/30#issuecomment-305643574 
    new Polymer.IronMeta({type: 'validator', key: SsnValidator.is, value: this}); 
    } 

    validate(value) { 
    const re = /^\d{3}-?\d{2}-?\d{4}$/; 
    return re.test(value); 
    } 
} 

window.customElements.define(SsnValidator.is, SsnValidator);

注ready()使用用於known issue with IronValidatorBehavior in Polymer 2一種解決方法。

Polymer({ 
    is: 'ssn-validator', 

    behaviors: [ 
    Polymer.IronValidatorBehavior 
    ], 

    validate: function(value) { 
    const re = /^\d{3}-?\d{2}-?\d{4}$/; 
    return re.test(value); 
    } 
});

demo

來源

2017-06-04 18:10:53 tony19

謝謝@ tony19，你的答案是相當不錯的，但它確實當我需要檢查第三個「紙張輸入」是否等於第一個「紙張輸入」加上第二個「紙張輸入」時，它不起作用。當我嘗試獲取第一個和第二個值時，我得到'undefined'值。我將編輯我的問題以表明這一點。 – Amparo

UPDATE：的錯誤得到解決，工作版本2.1.0

或者，你可以用聚合物1.x的語法（在聚合物2仍然支持）定義的驗證

自定義驗證程序不適用於基於聚合物2.0類的結構。有一個關於報告此錯誤：https://github.com/PolymerElements/iron-validator-behavior/issues/30

一種解決方法是不使用IronValidatorBehavior和以下行添加到connectedCallback()功能：

class PasProfilePasswordValidator extends Polymer.Element { 
    static get is() {return 'pas-profile-password-validator';} 
... 
connectedCallback() { 
    super.connectedCallback(); 
    new Polymer.IronMeta({type: 'validator', key: PasProfilePasswordValidator.is, value: this}); 
    }

來源

2017-11-06 18:54:10 aphex

聚合物2：紙張輸入

回答

相關問題