Question

随着纸张输入的最近更改和纸张输入装饰器（聚合物v0.5.1）的引入，我现在无法实现输入验证。例如，在最近的更改之前，我构建了一个自定义的属性编辑器＆＃39;聚合物元素（即基本上组合了可配置图标，可配置输入控件（类型纸张下拉菜单或常规输入）的元素，以及相关的可选单位值输入控件（类型纸张下拉菜单或纸张输入）），它非常实用。这是一小部分代码，显示上述自定义元素中的一个模板，在向其提供正则表达式模式时激活。这很好用：

<template if="{{controlType == 'input' && controlValidPattern != null}}">
     <paper-input id="{{controlId}}" value="{{inputValue}}" label="{{controlLabel}}" floatingLabel="{{controlFloatingLabel}}" pattern="{{controlValidPattern}}" error="{{controlErrorMsg}}" required="{{controlInputRequired}}" maxlength="{{controlMaxLength}}">
     </paper-input> 
</template>

然后我实现了inputValueChanged观察器功能，该功能又为主机/消费元素触发了一个自定义事件，以便根据需要进行操作。

最终目标当然是在当前输入无效时显示控件的验证错误消息（可以在用户输入时发生＆＃39;直播＆＃39;当控件加载时可能存在使用初始输入值），或者甚至更好地防止用户首先输入无效数据。在任何情况下，＆quot; inputValueChanged＆＃39;除非输入有效，否则应该阻止函数触发，并且在用户离开控件之前也不会触发该事件（模糊等）。我一直在尝试使用新版本的纸质元素再试一次（见下面的示例尝试），但仍然有一些困难。任何人都可以提供一个实现正则表达式模式匹配的示例，具有上述所需的行为吗？

<template if="{{controlType == 'input' && controlValidPattern != null}}">
     <paper-input-decorator label="{{controlLabel}}" floatingLabel="{{controlFloatingLabel}}" error="{{controlErrorMsg}}" isInvalid="{{invalidEntry}}">
          <input is="core-input" id="{{controlId}}" value="{{inputValue}}" committedValue="{{committedValue}}" pattern="{{controlValidPattern}}" maxlength="{{controlMaxLength}}" required="{{controlInputRequired}}" size="{{controlWidth}}">
     </paper-input-decorator> 
</template>

提前感谢任何可以借出的建议/示例！

Answer 1

要在输入值更改时验证输入，isInvalid上的paper-input-decorator属性应绑定到输入的validity.valid属性。即

<template is="auto-binding">
  <paper-input-decorator label="Number" floatingLabel
                         error="is not a number" 
                         isInvalid="{{!$.input.validity.valid}}">
    <input id="input" is="core-input" pattern="\d*">
  </paper-input-decorator>
</template>

要回答下面的评论，如果您事先没有输入的ID，则可以收听input事件并在处理程序中设置isInvalid：

在这种情况下，您可以侦听输入事件并在处理程序中设置isInvalid：

<template is="auto-binding">
  <paper-input-decorator id="decorator" label="Number" floatingLabel
                     error="is not a number">
    <input is="core-input" pattern="\d*" on-input="{{inputAction}}">
  </paper-input-decorator>
</template>
<script>
  var scope = document.querySelector('template[is=auto-binding]');
  scope.inputAction = function(e) {
    var d = document.getElementById('decorator');
    d.isInvalid = !e.target.validity.valid;
  }
</script>

实例：http://jsbin.com/hocugi/1/edit

Answer 2

作为Yvonne提供的答案的附加组件，我想我会从原始帖子中提到的自定义组件发布一些固定代码片段，现在使用纸张输入装饰器，两者都带有指定的输入类型，正则表达式等：

<template if="{{controlType == 'input' && controlEntryType != null}}">
     <paper-input-decorator label="{{controlLabel}}" floatingLabel="{{controlFloatingLabel}}" value="{{inputValue}}" error="{{controlErrorMsg}}">
           <input is="core-input" id="{{controlId}}" type="{{controlEntryType}}" value="{{inputValue}}" committedValue="{{committedValue}}" step="{{controlNumberStep}}" min="{{controlNumberMin}}" max="{{controlNumberMax}}" on-input="{{inputAction}}" maxlength="{{controlMaxLength}}" required="{{controlInputRequired}}" size="{{controlWidth}}">
     </paper-input-decorator>
</template>

<template if="{{controlType == 'input' && controlValidPattern != null}}">
     <paper-input-decorator label="{{controlLabel}}" floatingLabel="{{controlFloatingLabel}}" value={{inputValue}} error="{{controlErrorMsg}}">
           <input is="core-input" id="{{controlId}}" pattern="{{controlValidPattern}}" preventInvalidInput value="{{inputValue}}" committedValue="{{committedValue}}" on-input="{{inputAction}}" maxlength="{{controlMaxLength}}" required="{{controlInputRequired}}" size="{{controlWidth}}">
     </paper-input-decorator>
</template>

<template if="{{controlType == 'input' && controlEntryType == null && controlValidPattern == null}}">
     <paper-input-decorator label="{{controlLabel}}" floatingLabel="{{controlFloatingLabel}}" value="{{inputValue}}" error="{{controlErrorMsg}}">
           <input is="core-input" id="{{controlId}}" type="text" value="{{inputValue}}" committedValue="{{committedValue}}" on-input="{{inputAction}}"  maxlength="{{controlMaxLength}}" required="{{controlInputRequired}}" size="{{controlWidth}}">
     </paper-input-decorator>
</template>

inputAction: function(e, detail, sender) {
    // Reset paper-input-decorator's validity based on current user input
    sender.parentElement.isInvalid = !sender.validity.valid;
},

committedValueChanged: function(oldVal, newVal) {
    /* Event designed to listen for paper-input value changes */

    // When the input is valid, fire a custom event that can be listened to by the host element (i.e. via 'on-property-change')
    // Pass to the listener an object representing the property that was changed by this element

    if(this.shadowRoot.querySelector("#" + this.controlId).validity.valid) {
            this.fire('property-change', {newProperty: this.propertyChanged()});
    }
},

聚合物的新纸张输入/纸张输入装饰器组件的验证问题

2 个答案: