点击聚合物v1.0输入验证按钮

Polymer v1.0 input validation on button click

本文关键字：输入 验证 按钮 v1 聚合物      更新时间：2023-09-26

这里对聚合物一窍不通，所以请耐心听我说。

我想学习如何创建一个表单，一个需要用户输入文本到文本框，然后点击"提交"。如果用户点击"提交"而文本框中没有任何内容，则文本框将突出显示红色，并显示错误信息等。

下面是我的代码(还没有验证): 
<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>

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

  1. <paper-input>本身不验证，根据v0.5 -它必须首先包装在<paper-input-decorator>中。
  2. 1.0版本甚至比这更不清楚，用<paper-input-container>代替<paper-input-decorator>，并且在演示页面中混合了标签。

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

谢谢。

是的，聚合物文档有点令人困惑，但作为一般的经验法则:总是要看看元素配备的行为。

因此，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标志，错误消息将显示。

虽然validator似乎很有用，但我发现它足够简单，可以直接测试输入。这将满足您的需要:

...
<div>
    <paper-input-container id="gcashDeco">
    <paper-input-error>Field is empty</paper-input-error>
    <input id="gcashText" is="iron-input" value="{{gcashInput::input}}">
    </paper-input-container>
    <div class="ctrlButtons flex">  
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button on-tap="confirmClick">Submit</paper-button>
    </div>
</div>
...
...
Polymer({
is: "accountability-ticket",
confirmClick: function() {
    if (this.gcashInput == null)
    {
        //show error
        this.$.gcashDeco.invalid = true;
    }
}

这个paper-input-error元素由它所在的paper-input-container的id引用。将invalid属性设置为true显示错误，false隐藏错误。

<paper-input-error>Field is empty</paper-input-error>

下一个代码片段将字段的输入值绑定到变量this.gcashInput，您可以在confirmClick或任何其他方法中访问该变量。

{{gcashInput::input}}

作为最后一个注意事项，获得您的聚合物元素内部的元素的id是这样做的:

this.$.gcashDeco

不是你使用普通Javascript的方式:

document.getElementById('gcashDeco');

后者(普通的JS方式)将搜索主DOM，而不是元素所在的Shadow DOM。因此，如果您需要搜索DOM，请使用document.getElementById()，如果您需要搜索元素的id，请使用this.$.elemendId。

相关文章：