验证数据观察中的聚合物输入

debugcn 发表于 Dev

woj_jas

我想在我的聚合物应用程序上进行动态验证，我想在输入为空时创建#login-button按钮属性disabled，并在用ID和密码填充输入时删除该属性。我试过做html5required属性，但是此解决方案不起作用。现在，我创建button-click了击中Api的函数，我想添加验证函数。

 <form id="form_login">
            <paper-input  aria-required="true"  name="name" floatingLabel label="Id*"
                         value="{{name}}"></paper-input>
            <br>
            <paper-input-decorator floatingLabel label="password">
                <input aria-required="true" id="password" is="core-input" name="password" type="password"
                       value="{{password}}"/>
            </paper-input-decorator>
            <br>


            <div class="page-holder" horizontal layout center center-justified>

            </div>

            <div class="page-holder" horizontal layout center center-justified>
                <paper-button  id="login-button" on-click="{{buttonClick}}">Zaloguj Się</paper-button>
            </div>
        </form>

我的剧本：

    Polymer('login-page',{
        buttonClick: function () {
                this.$.ajaxSubmit.go();
        },
        responseChanged: function (oldValue) {
            console.log(this.response);
            document.querySelector('app-router').go('/profile?hash=dfsasdsf');

        }
    });
</script>

没有

disabled?={{!name || !password}}paper-button在这种情况下，可能会检查其中的空值。所以这是我要怎么做：

<link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html">
<link rel="import" href="http://www.polymer-project.org/0.5/components/core-elements/core-elements.html">

<body fullbleed layout vertical>
  <form-elem></form-elem>
</body>
<polymer-element name="form-elem" noscript>
  <template>
    <paper-input aria-required="true" floatingLabel label="Id*" value="{{name}}"></paper-input>
    <br>
    <paper-input-decorator floatingLabel label="password">
      <input aria-required="true" id="password" is="core-input" type="password" value="{{password}}" />
    </paper-input-decorator>
    <br>
    <div class="page-holder" horizontal layout center center-justified></div>
    <div class="page-holder" horizontal layout center center-justified>
      <paper-button disabled?="{{!name || !password}}" id="login-button" on-click="{{buttonClick}}">Zaloguj Się</paper-button>
    </div>
  </template>
</polymer-element>

如果需要，这是一个jsfiddle版本： jsfiddle

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。