纸张输入故障排除中的验证，如何？

Question

我有这个 paper-input 元素定义：

<paper-input label="time_of_birth"
             required=True
             prevent-invalid-input
             allowed-pattern="([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]" 
             placeholder="00:00"
             error-message="24 hour formatted HH:MM">
</paper-input>

正则表达式非常有用 here。但是，当我尝试输入值时（运行在 polyserve 服务器下），根本不允许键盘输入。 Dev Tools控制台没有错误，也没有出现错误信息。

Answer 1

您的正则表达式将验证 33:33。你应该使用这个模式：

allowed-pattern="^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$"
                 ^ makes the regex match the whole input $

PS: 这应该在评论中，但我没有必要的声誉来评论。

Answer 2

问题在于您对 allowedPattern 的使用，它用于指定字符集（即 character class) that could be entered, and this property blocks all other characters when paired with preventInvalidInput. For HH:MM time values, allowedPattern should be digits or colon (i.e., [\d:]). You likely meant to set an input pattern that specifies the required format of the value. For that, you should instead use pattern.

HTMLImports.whenReady(_ => {
  "use strict";

  Polymer({
    is: 'x-foo',
    _submit: function() {
      console.log('submit', `valid: ${this.$.input.validate()}`);
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-input/paper-input.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <form is="iron-form" action="">
        <paper-input id="input" label="time_of_birth"
             required
             prevent-invalid-input
             allowed-pattern="[\d:]"
             pattern="([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]" 
             placeholder="00:00"
             error-message="24 hour formatted HH:MM">
        </paper-input>
        <paper-button on-tap="_submit">Submit</paper-button>
      </form>
    </template>
  </dom-module>
</body>

codepen

纸张输入故障排除中的验证，如何？

Validation in paper-input troubleshooting, how to?

javascript

regex

polymer

polymer-1.0