Question

我正在使用这样的paper-input：

<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>

Answer 1

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

添加验证器的关键是：

定义一个实现Polymer.IronValidatorBehavior行为的无模板自定义元素。

Polymer 2.x：

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

Polymer 1.x：

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

在该元素中，定义validate(value)，它返回一个布尔值，表示value是否有效。

Polymer 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 1.x语法定义验证器（在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

Answer 2

更新：错误已解决，版本为2.1.0

自定义验证器不适用于基于聚合物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});
  }

聚合物2：使用纸张输入进行自定义验证

2 个答案: