对承诺价值的核心输入验证

Question

我正在制作一个带有大量输入的类似表单的控件，为此我使用了我自己的带有核心输入的聚合物元素。我无法验证它。

我不想为其设置自动验证，因为几乎所有的输入都是必需的，而且我不喜欢将一堆输入用红色排列并在页面加载时显示错误的想法。我所拥有的（并且认为可行）是以下代码：

<polymer-element name="custom-core-input"
                 attributes="columnId inputError validation inputRequired">
<template>
    <section>
        <paper-input-decorator id="decorator" error="{{inputError}}">
            <input id="custominput"
                   is="core-input"
                   validate="{{validation}}"
                   on-change="{{inputCommited}}"
                   required?="{{inputRequired}}">
        </paper-input-decorator>
    </section>
</template>
<script>
    Polymer({
        inputRequired: false,
        inputCommited: function () {
            this.$.decorator.isInvalid = !this.$.custominput.validity.valid;
        }
    });
</script>
</polymer-element>

我之前在 inputCommited 函数上发出了一些警告，看起来输入值总是有效的，不管它是空白还是填充了任何不应该匹配验证的东西。

请注意，我使用的验证字符串是“^(\d*|\d+,\d{1,2})$”，我假设这适用于 Polymer。在任何情况下，当 required 为真时，它不会将空白视为无效输入。

Answer 1

如果 validation 属性是一个正则表达式，使用 <input pattern="{{ validation }}"...> 它应该可以工作（参见 input validation at MDN）：

<input id="custominput"
       is="core-input"
       pattern="{{ validation }}"
       on-change="{{ inputCommitted }}"
       required?="{{ inputRequired }}">

仅触发文本输入的 change 事件 if the value is changed and the input loses focus。需要有另一种机制在适当的时间触发验证，以确保每个输入都被验证一次，例如，在提交表单时。

对承诺价值的核心输入验证

Core-input validation on value commited

polymer