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函数上发出了一些警告，看起来输入值总是有效的，如果它是空白的或者填充了任何不匹配验证的东西都没关系。

作为一个注释，我使用的验证字符串是＆＃34; ^（\ d * | \ d +，\ d {1,2}）$＆＃34;，我＆m;这适用于Polymer。在任何情况下，当需要为真时，它不会将空白作为无效输入。

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。需要有另一种机制在适当的时间触发验证，以确保每次输入都经过验证一次，例如，在提交表单时。

对提交的值进行核心输入验证

1 个答案: