javascript - 单击按钮时的 Polymer v1.0 输入验证

Question

我是 polymer 新手，所以请多多包涵。

我正在尝试学习如何创建一个表单，该表单要求用户在点击“提交”之前将文本输入文本框。如果用户在文本框中没有任何内容的情况下点击“提交”，文本框将突出显示为红色，并显示错误消息等。

到目前为止，这是我的代码(尚未验证):

<dom-module id="accountability-ticket">
    <template>
        <paper-dialog with-backdrop entry-animation="scale-up-animation" exit-animation="fade-out-animation" id="diagTicket">
            <h2>I Own It Ticket</h2>
            <div>
                <paper-input-container id="gcashDeco" required error="GCash Ref. Required">
                    <input id="gcashText" is="iron-input">
                </paper-input-container>
                <div class="ctrlButtons flex">  
                    <paper-button dialog-dismiss>Cancel</paper-button>
                    <paper-button on-click="confirmClick">Submit</paper-button>
                </div>
            </div>
        </paper-dialog>
    </template>
</dom-module>
<script>
Polymer({
    is: "accountability-ticket",
    confirmClick: function(event){
        console.log(event);
        var gCashDeco = document.getElementById('gcashDeco');
        var gCashText = document.getElementById('gcashText');   
    }
});

</script>

我一直在阅读 Polymer 文档，到目前为止，我想到了两件事:

1. <paper-input>根据 v0.5 本身不验证 - 它必须包装在 <paper-input-decorator> 中首先。
2. 1.0 版比那个更不清晰，<paper-input-container>而不是 <paper-input-decorator> , 以及演示页面中的混合标签。

鉴于我想坚持使用最新版本 (v1.0)，我需要在我的代码中添加什么来让它检查文本框是否为空，如果为空则显示错误消息？

谢谢。

Answer 1

是的，Polymer 文档有点令人困惑，但作为一般经验法则:始终查看元素配备的行为。

因此，paper-input(在 1.0 中)带有 PaperInputBehavior这意味着您可以简单地编写以下内容:

<paper-input label="Input label" required error-message="Field required!"></paper-input>

<paper-input label="Input label" minlength="4" maxlength="10" auto-validate></paper-input>

<paper-input label="Input label" pattern="MY_REGEX" auto-validate></paper-input>

<paper-input label="Input label" validator="myvalidator"></paper-input>

auto-validate 使输入——当然——在输入时进行验证。 myvalidator 必须是实现 IronValidatorBehavior 的元素并插入页面的某处。如果您不希望字段自动验证或想自己做，请在该字段上调用 ​​validate() 或设置 invalid 标志和错误消息将被显示。您甚至可以通过编程方式调整消息。