Polymer 聚合物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>

您对验证器的使用看起来是正确的，但是缺少验证器的定义

添加验证程序的关键是：

定义实现该行为的无模板自定义元素

聚合物2.x：

聚合物1.x：


在该元素中，定义
validate（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（）。或者，您可以使用Polymer 1.x语法定义验证器（Polymer 2中仍然支持）：

更新：该漏洞已解决，并可在2.1.0版中使用

自定义验证器不适用于基于polymer 2.0类的结构。这里的报告有一个bug：

解决方法是不要使用
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});
  }

谢谢@tony19，你的回答很好，但当我需要检查第三个
纸张输入
是否等于第一个
纸张输入
加上第二个
纸张输入
时，它就不起作用了。当我试图获取第一个和第二个值时，我得到了
未定义的
值。我将编辑我的问题以显示这一点。
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);

Polymer({
  is: 'ssn-validator',

  behaviors: [
    Polymer.IronValidatorBehavior
  ],

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

  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});
  }